Lesson 8: Debugging

Intermediate

One of the great advantages of visual dataflow programming is that you can watch data flow through your graph. Phograph has a built-in debugger that lets you set breakpoints, step through execution, and inspect values on every wire.

The Run menu

All debugging commands are in the Run menu:

CommandShortcutDescription
RunCmd+RRun the current method at full speed
DebugCmd+Shift+RRun with debugger attached
StopCmd+.Stop execution
ContinueCmd+\Resume from breakpoint
Step OverCmd+'Execute one node, skip into method calls
Step IntoCmd+;Execute one node, enter method calls
Clear ConsoleCmd+KClear the console output

Setting breakpoints

A breakpoint pauses execution when the debugger reaches a specific node. To toggle a breakpoint:

  1. Right-click a node on the canvas.
  2. Choose Toggle Breakpoint.
  3. A red dot appears in the top-left corner of the node.

Right-click the same node again and choose Remove Breakpoint to clear it.

Debugging a program

  1. Load the Basic Arithmetic example.
  2. Set a breakpoint on the * (multiply) node.
  3. Press Cmd+Shift+R to start debugging.
  4. Execution runs until it reaches the * node, then pauses.

When paused:

Step Over vs Step Into

When paused, you choose how to advance:

When to use which

The console during debugging

The console shows log and inspect output as nodes execute. When a debug session completes, the final status appears.

Exercise 8.1 — Step through Basic Arithmetic

  1. Load the Basic Arithmetic example.
  2. Set a breakpoint on the + node.
  3. Press Cmd+Shift+R to debug.
  4. When it pauses at +, press Cmd+' (Step Over).
  5. The + node executes and the debugger pauses at the next node (*).
  6. Step Over again. * executes and the result flows to the output bar.
  7. The debug session completes.
  8. Check the console — you should see the output 14.

Exercise 8.2 — Step Into a method call

  1. Load the Fibonacci example.
  2. Set a breakpoint on the fib method-call node in main.
  3. Debug (Cmd+Shift+R).
  4. When it pauses at fib, press Cmd+; (Step Into).
  5. You should now be inside the fib method, paused at its first node.
  6. Press Cmd+\ (Continue) to let it finish.

Exercise 8.3 — Debug your own code

  1. Open the temperature converter from Exercise 3.1 (or recreate it).
  2. Set breakpoints on each arithmetic node.
  3. Debug and step through, verifying each intermediate result:
  4. 212 - 32 = 180
  5. 180 * 5 = 900
  6. 900 / 9 = 100
  7. This is the power of visual debugging — you can see every value at every step.

Exercise 8.4 — Find a bug

Build this (intentionally buggy) program:

  1. Method main: constant 10, constant 3, wire to -, then wire the result to * with itself (fan-out from the - output). Wire to output bar.
  2. Intended: (10 - 3)^2 = 49.
  3. But suppose you accidentally wired the constants backwards (3 - 10 = -7). The result would be 49 anyway (because (-7)^2 = 49)!
  4. Use the debugger to step through and verify the intermediate value is 7, not -7. Fix if needed.
Lesson

Visual debugging catches sign errors and wiring mistakes that might go unnoticed when only the final result is checked. Always step through new code at least once to verify intermediate values.

Tips for effective debugging

Key Concepts