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
    How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

Incredible Demos

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    Translate Content with the Google Translate API and JavaScript

    Note:  For this tutorial, I'm using version1 of the Google Translate API.  A newer REST-based version is available. In an ideal world, all websites would have a feature that allowed the user to translate a website into their native language (or even more ideally, translation would be...

Discussion

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