Tag Archives: chrome

Conditional Breakpoints in Chrome Dev Tools

I recently attended WordCamp London 2016. It was a true blast and an absolute success and really deserves its own blog post, maybe I’ll get round to writing one soon. There is a small thing I need to share sooner though, as it’s been a HUGE help to me in my dev life.

Now I’m a big fan of the developer tools available in Chrome (other browsers are available) and I knew about the ability to set breakpoints in the JavaScript that can be seen in the Sources tab. What I didn’t know though was that you could set conditions against the breakpoint, so that execution would only be paused when the conditions were met. I think it can quickly be seen how this can be incredibly useful when you’re keen on digging into particular flow of events and data through your code.

To add conditions to breakpoints the process is straightforward. Simply right click on the break point and you get the option to edit it. From here you can then add the conditions.

Screenshot of breakpoints in Chrome

Now when my code runs the breakpoint shall only be triggered once the conditions are met. In my case (see this Codepen) I wanted to only trigger my breakpoint when the el.name was the string “Flop”.

Screenshot of Triggered Conditional Breakpoint in Chrome Dev Tools

I learnt of this during an extremely enlightening talk by the wonderful, passionate Katie Fenn that covered loads of gems of information on how to make the most of the Chrome dev tools. Her slides can be found here.