This page describes the JavaScript Debugger as it appears in Firefox 52 and above, in Firefox Nightly and Firefox Developer Edition.
To see what it's like in earlier versions of Firefox or in Firefox Beta and Release, see Debugger (before Firefox 52).
If you are getting this version of the Debugger and need to switch back to the old version, you can do so by visiting about:config and setting the "devtools.debugger.new-debugger-frontend" preference to false.
When debugging code, sometimes it's useful to watch expressions as executions are paused. The Debugger features a pane for entering expressions to be watched (watch expressions). As you step through code, the debugger will watch the expresion and return any results.
To set a watch expression, expand the Watch Expressions sidebar, then click "Add Watch Expression." Type the expression you'd like to watch into the text field.
The debugger will save the expression and watch it as you step through your code. When the debugger reaches a breakpoint, it will display your watch expressions variables:
You can step through your code, watching the value of the expression as it changes. Each time it does, the box will flash briefly yellow. You can remove a watch expression by clicking the "x" icon next to it, and you can have more than one watch expression at a time.