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

Incredible Demos

  • By
    Instagram For MooTools

    If you're still rocking an iPhone and fancy taking a photo every now and then, you'd be crazy not to be using an app called Instagram.  With Instagram you take the photos just as you would with your native iPhone camera app, but Instagram...

  • By
    Create Custom Events in MooTools 1.2

    Javascript has a number of native events like "mouseover," "mouseout", "click", and so on. What if you want to create your own events though? Creating events using MooTools is as easy as it gets. The MooTools JavaScript What's great about creating custom events in MooTools is...

Discussion

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