Replacing console logs with debugger; and using conditional breakpoints

If you are like me and still slipping back to the nasty habit of using too much the console.log(); statements for debugging in Javascript this video was of real help.

Something did not feel natural for me to go in the devtools, find the troublesome block of code and add there a breakpoint.

Being in the code editor all the time, was much more easy just to drop a few console.log() statements in there. More easy yes, but for sure not more productive.

But it turns out that if you drop a debugger; statement (min 1.20 in the video) it triggers the breakpoint with full access to the debugging tools.

javascript debuger statement

Another cool trick in the video is are the usage of the conditional breakpoints (min 3.00) from the dev tools.

But you can use this that also with the debugger; as well:

for (let counter = 1; counter < 10; counter++) {
    // more complex code here
    if (foo === 5) {
        // activate the brekpoint only  when foo is 5
        debugger; 
    }
}

So, welcome debugger and bye-bye console.log().

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

📖 50 Javascript, React and NextJs Projects

Hi friend! Before you go, just wanted to let you know about the 50 Javascript, React and NextJs Projects FREE ebook.

One of the best ways to learn is by doing the work. Choose from 8 project categories and get started right away:

  • Business & Real-World
  • Games & Puzzles
  • Fun & Interesting
  • Tools & Libraries
  • Personal & Portfolio
  • Project Add-Ons
  • Productivity
  • Clones

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects complete with project briefs and wireframes!

Keep building and level up! Get all projects as an ebook right to your inbox!

X