Debugger Variables Command Menu Block for React

So you can see it without a click. On load the menu is the Command drawn inline at the end of a picture of the debugger, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so the frame you stepped to in the copy is the frame the dialog opens at. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

Each variable holds its value for the three frames in an array, and a frame is just an index. Step adds one to it, and everything else is worked out from the index: the values shown, whether a value differs from the one before, the struck-through old value, the count in the foot ("12 variables · 4 changed"), the line in the toolbar chip and the marker in the drawing. The last frame has nowhere to go, so Step stays in place, quiet, and says so; Reset returns to the first. A debugger that ran on a timer would change under a screen reader and under reduced motion, so this one moves only when you press.

In words and a strike. The second line of a changed row reads the type and then the word changed in bold, and the end of that line reads "was" and the old value struck through, so the row says what happened to anyone, in any theme. The first frame has no frame before it, so nothing is changed there, and Show changes only is empty with a line that says to press Step.

Alt and S (Option and S on a Mac) steps from anywhere inside the menu, including the search field, and the block reads event.code so Option's characters do not matter; the Step button does the same and is in the tab order. Each step says the frame, the line and how many variables changed, through the status line and, inside the dialog, through the menu's own live region.

All of it. The program, its three frames and its twelve variables are typed; nothing is paused, attached to or run. In your app build VARIABLES from the debug adapter's scopes at each stop, take the line from the stack frame, and make Step call the adapter.

Yes. Tab reaches Step, Reset and the switch, then the input; type to search by name, value or type, the arrow keys move through the rows, Enter reads the highlighted variable aloud through the status line and Escape closes the menu and puts focus on the field. Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself.

The code goes and the toolbar stays, with its chip. The copy shown on load docks full width under the toolbar, the key hints go and the count stays, and each row keeps its name, value, type and change on two lines. The real dialog keeps the Command dialog's own phone layout.