This feature isn't yet supported in the new debugger. If you need to use it, you can, for now, switch back to the old debugger by visiting about:config and setting the "devtools.debugger.new-debugger-frontend" preference to
To see the docs for the old debugger, please visit Debugger (before Firefox 52).
When the code has stopped at a breakpoint, you can examine its state in the variables pane of the debugger:
Variables are grouped by scope: in Function scope you'll see the built-in
this variables as well as local variables defined by the function like
greeting. Similarly, in Global scope you'll see global variables you've defined, like
greetme, as well as built-in globals like
Each object can be expanded, using a disclosure triangle, to show its properties.
Pointing your cursor at a variable's name displays a tooltip that provides additional information about the variable. See
Object.defineProperty() for details on what these property descriptors mean.
(optimized away), and is not editable. In the screenshot below the variable
upvar has been optimized away:
When the code has stopped at a breakpoint, you can modify variables in the variables pane of the debugger. Just click on the variable's current value and you'll be able to type there:
Watch an expression
Then start running your code. The watch expression does nothing until you begin to step through your code, so nothing happens until you reach a breakpoint. At that point, a box showing your active watch expressions and their current values will appear:
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, of course, you can have more than one watch expression at a time.