As with Pry and Byebug, you can examine and interact with the variables available at the paused line using the console (press the Escape key to toggle quick access to the console).
To resume execution, click the play (triangle icon) button found in the Debugger tab.
An alternative to using the
debugger keyword is to view the JS source in the Debugger tab and click in the line gutter to set a breakpoint for a specific line of code.
Each argument to
console.log() will be printed to the browser console. Click on the printed arguments to inspect them more deeply.
A handy feature of
console.log() is that it accepts multiple arguments –
console.log(x, y, z) is acceptable, and prints the values of
z to the console.
Try it out by running
console.dir(document) in your browser console. Click on the result to dive into the
document object further.
Print Stack Trace
The stack trace reveals the sequence of function calls that lead to the current line being executed.
Play and click around in the browser dev tools, in particular the Debugger tab, to discover what else is possible.
To find out about more advanced debugging features see the Firefox and Chrome docs from the browser vendors.