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
    Chris Coyier’s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Incredible Demos

Discussion

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