Using watches in my devtools workflow

I’ve recently found that I’m able to optimise my workflow inside of devtools using “Watch Expressions” which I’ve found (for me) is often left untouched.

Using watches

The video below works through the real example where I’m using watches to get visual feedback whilst developing.

The console up/enter workflow

Typically if I had a bug, I would use the console to re-run my code and check the result until it worked. Since I’m already editing functional code that’s being live-updated inside V8 it means my workflow is already pretty slick.

But this cursor up, enter workflow can be improved. The code that I’m running in the console can actually be moved to the watch expressions panel.

Changing my workflow

With my expression in the watch expressions panel, and whilst I’m still in a paused state of execution in the code, I can go ahead and edit the code directly inside devtools, and each time I hit save on the file, V8 will reload the function in memory, and my watch updates, which gives me a real-time preview of the result. And that’s it. Very neat.

3 Responses to “Using watches in my devtools workflow”

  1. Hey,
    Thanks for the nice tutorial.

    I have a queries here.

    Is there any way I can find which event handler function is associated with particular dom element ?

    For eg. a firebug plugin fireQuery allows me to see which jQuery function is attached on specific event for a dom element ? Is there something similar with chrome dev tool ?

    Thank you,


  2. Useful advice. You’re just full of useful tips and tricks, aren’t you? :-D

    I’m really enjoying your tool, while working on a NodeJS website project. Sometimes, checking stuff in the browser is just more comfortable.


  3. @Justin: You can see that under the “Event Listeners” tab in the Elements panel in Chrome DevTools.

Leave a Reply
Not required

CODE: Please escape code and wrap in <pre><code>, doing so will automatically syntax highlight