Stepping through JavaScript code
Use the buttons at the top of the left sidebar in the Debugger tab to navigate through JavaScript code. For more information about these navigation buttons, see Debugger tab.
When all breakpoints are disabled, or when you’re making a recording with Timeline tab instruments, a message appears at the top of the navigation sidebar to remind you that breakpoints are currently disabled.
When the debugger pauses, script execution is halted, and the next line and expression to be executed are highlighted in the main pane with light and dark green backgrounds, respectively. A green marker is also placed next to the line number gutter for the line currently being evaluated.
When the debugger pauses, the Scope Chain sidebar becomes available in the right sidebar, and the Call Stack section appears in the left sidebar, showing the stack of function calls leading to the current point of execution. When you select a call frame, that source location is revealed in the main content area.
When JavaScript execution is initiated by an asynchronous event, such as a setTimeout firing or a requestAnimationFrame callback, the Call Stack section shows an asynchronous call stack that includes the initiator for the asynchronous event. This allows you to see what ultimately triggered execution of the code where the debugger is paused.