Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to 'add watch' in Chrome developer tools?

I can't seem to find a way to add a watch expression for the selected JavaScript text in Chrome developer tools, the same way I would in Firebug with Ctrl+W. Is there really no way to do this in Chrome? I can't even right-click the selection as it unselects as soon as I do it, and there is no "Add watch" context menu item. Do I really have to type in every watch I want to add while debugging JS?

like image 574
Jez Avatar asked Dec 02 '14 10:12

Jez


People also ask

How do you add a watch to inspect element?

To add a variable to the watch list use the add icon to the right of the section heading. This will open an inline input where you provide the variable name to watch. Once it is filled in press your Enter key to add it to the list. The watcher will show you the current value of the variable as it is added.

How do I add a device to Chrome Developer Tools?

To add a custom device: Click the Device list and then select Edit. On the Settings > Devices tab, either choose a device from the list of supported ones or click Add custom device to add your own. If you're adding your own, enter a name, width, and height for the device, then click Add.


2 Answers

From the Chrome DevTool docs on JS Debugging Reference > Watch the values of custom JavaScript Expressions, you can do it in 1 of 3 ways:

  1. Highlight text, right click, and selct Add selected text to watches

    Add selected text to watches

    *Note: this used to be "Add to watch"

  2. Highlight text and press Ctrl + Shift + A

  3. Add expression on the watch panel directly in the top right corner of the sources tab

    Add Watch Expression

like image 164
KyleMit Avatar answered Oct 21 '22 15:10

KyleMit


You can do it by clicking 'add to watch' after right clicking

You can also select the expression/variable and hit Ctrl + Shift + A

like image 33
Or Duan Avatar answered Oct 21 '22 17:10

Or Duan