Conditional Breakpoints in Chrome are Awesome
Since I always write code that makes tons of sense in my head, but fails immediately after building, I’ve had to evolve and pick up some fancy tricks. I never see people talking about conditional breakpoints in chrome even though they’ve made my life way easier.
Say luck isn’t on your side and you run into an error in the code below. 💥 What do you do?
A glutton for pain would just put a breakpoint inside the forEach, and then press Continue 515,253 times. A more experienced javascript prisoner might write an if statement inside the code with a debugger;, but what happens if everything is terrible and you can’t easily edit the code? Maybe you are just investigating an issue in another package because you’re a good person and contribute to the open source packages you use! 🎉
Instead of adding your usual breakpoint in the chrome sources, try right clicking and selecting the Add conditional breakpoint...! Add your logic for when you want the breakpoint to trigger and just like that the breakpoint should only fire when you need it to!
Conditional breakpoints are actually quite powerful if you view them as an entry point for dynamically injecting javascript. For example, say you wanted the console to print out what reallyImportantProperty is on each loop, but don’t really want to break every time.
I find myself using conditional breakpoints mostly as a way to write whatever code I want into the current script. I know it’s possible to type in the Chrome Source panel, but I’ve had mixed results with that and breakpoints persist through reloads. This way I can add code wherever I want, and continue to add breakpoints at other points in the code.
Since we’re all human, we are going to make mistakes in our code. I think the ability to debug is just as important as the ability to code. Hopefully the next time you are in a sticky situation, conditional breakpoints can make your life a bit easier. 😌👌
