What a trace table is
A trace table is how you check a loop by hand. Each column is a variable, each row is one pass through the loop, and you write down what every variable holds at the end of that pass. It is slow on purpose: you catch the off-by-one before the computer does.
Using it
- Paste code in the code panel. Declarations, assignments,
++/--, loop variables and function parameters become columns.
- Fill in one row per iteration. Iteration 0 is the state before the loop starts. Add iteration, or Enter in the last row, adds the next one. Empty cells show the previous row's value in grey.
- − and + on a column header fade a column out or highlight it, so the variables you care about stand out.
- Drag a header, or use ‹ and ›, to reorder columns. The iteration column always stays first.
- Add column covers anything the detector missed. × hides a column it got wrong, and Show hidden brings it back.
- Table: Left, Right, Top, Bottom moves the table. Drag the bar between the panels to resize them; double-click it to reset.
- Scratch pad opens a notes area under the code. Float turns it into a window you can drag over the table.
Where your work goes
Everything saves in your browser as you type: the code, the table, the scratch pad and the layout. Nothing is sent anywhere. It stays until you press Clear all, which asks for a second click so it can't happen by accident. Clearing keeps your layout.
Limits
The variable detection is pattern matching, not a parser. It handles the common shapes in JavaScript, Python, C, C++ and Java, but it can miss a variable or pick up something that isn't one. That is what Add column and × are for.