index.rst (1865B)
1 ================= 2 Step through code 3 ================= 4 5 When the debugger is stopped at a breakpoint, you can step through it using four buttons in the :ref:`toolbar <debugger-ui-tour-toolbar>`: 6 7 .. image:: breakpoint_toolbar.png 8 9 In order, the buttons are: 10 11 12 - Play: run to the next breakpoint 13 - Step over: advance to the next line in the same function. 14 - Step in: advance to the next line in the function, unless on a function call, in which case enter the function being called 15 - Step out: run to the end of the current function, in which case, the debugger will skip the return value from a function, returning execution to the caller 16 17 18 Split console 19 ************* 20 21 When paused, you can press the Esc key to open and close the split console to gain more insight into errors and variables: 22 23 .. image:: split_console.png 24 :class: border 25 26 27 Paused overlay 28 **************************** 29 30 When the page is paused, an overlay appears on the viewport of the tab you are debugging. 31 32 .. image:: debugger-overlay.png 33 :class: border 34 35 36 This lets you know what kind of breakpoint the code is paused on (breakpoint, event breakpoint, etc.), and also provides a step button and a play button. The thinking here is that if you've got your DevTools open in a separate window, as many people do, it can be easier to have the buttons available right there to move the code forward while you are looking at the result. 37 38 Starting Firefox 142, this overlay can be disabled from the Debugger settings. 39 40 .. image:: debugger-overlay-setting.png 41 :class: border 42 43 44 Inline variable preview 45 *********************** 46 47 The :ref:`source pane <debugger_ui_tour_source_pane>` gives you an instant preview of the variables on each line of code you've stepped through. See :ref:`Set a breakpoint > Inline variable preview <debugger-how-to-set-a-breakpoint-variable-preview>` for more information.