Use Logpoints!

By  on  

There's sometimes a tribal attitude about how web developers should be debugging their code and solving problems. There's the console.log loyalists, then there's the debugger/breakpoint maximalists. I worked on the Firefox DevTools debugger for years and I can tell you my philosophy -- use whichever tool helps you get the job done!

I use console.log for very simple problems, other times when I want an audit trail I can analyze after a series of events to spot the problem and share with others. I use breakpoints when I want to halt execution to to see values and the visual state of the UI. One tool you can use to get the best of both worlds is logpoints, a breakpoint-like mechanism in the devtools debugger that logs instead of halts!

To add a logpoint:

  • open the devtools debugger
  • right-click a line number in a JavaScript file,
  • provide the log message accompanied by any variables you'd like in the log:

You have access to all variables in the current context, which you can add to the logpoint message.

You may be asking "why don't you just add a console.log to your source file manually? Oftentimes you need to debug third party scripts where manually editing the file isn't possible. Even if you do have access to the source file, you don't need to do a bunch of console.log cleanup!

Developer tools are always more popular than believe -- take full advantage of them!

Recent Features

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!