How do you compare the values of different variables with watchpoints in Chrome DevTools?

1 What are watchpoints?

Watchpoints are a type of breakpoint that allow you to pause your code when a specific variable changes its value or is accessed by your code. Unlike regular breakpoints, which are set on a line of code, watchpoints are set on a variable name. You can use watchpoints to inspect the value and scope of a variable, and to see where and how it is modified or used by your code.

2 How to set watchpoints?

To set a watchpoint, you need to open the Sources panel in Chrome DevTools and switch to the Watch tab. There, you can add any variable name that you want to watch by clicking on the + icon and typing the name. Alternatively, you can right-click on a variable name in the code editor or the console and select Add to watch. Once you add a variable to the watch list, you will see its current value and scope in the Watch tab. If the variable is not in scope or not defined, you will see <not available> instead.

3 How to use watchpoints?

When you run your code, Chrome DevTools will automatically pause your execution whenever a watched variable changes its value or is accessed by your code. You will see a yellow overlay on the line of code that triggered the watchpoint, and a message in the Call Stack panel that indicates which variable caused the pause. You can then use the debugger tools to step through your code, inspect the variables and their values in the Scope panel, and evaluate expressions in the Console panel. You can also modify the value of a watched variable in the Watch tab by double-clicking on it and typing a new value.

4 How to set conditional watchpoints?

Sometimes, you may want to pause your code only when a watched variable meets a certain condition, such as being equal to, greater than, or less than a specific value. To do that, you can set a conditional watchpoint by right-clicking on a watched variable in the Watch tab and selecting Edit watch expression. There, you can add any valid JavaScript expression that involves the watched variable, such as x > 10 or y === 'hello'. Chrome DevTools will then pause your code only when the expression evaluates to true.

5 How to remove watchpoints?

To remove a watchpoint, you can either right-click on it in the Watch tab and select Remove watch expression, or click on the x icon next to it. You can also clear all watchpoints by clicking on the Clear all icon at the bottom of the Watch tab. To disable a watchpoint without removing it, you can uncheck the checkbox next to it. This will prevent Chrome DevTools from pausing your code when the watched variable changes or is accessed, but it will still show its value and scope in the Watch tab.

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?