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
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    MooTools Zebra Table Plugin

    I released my first MooTools class over a year ago. It was a really minimalistic approach to zebra tables and a great first class to write. I took some time to update and improve the class. The XHTML You may have as many tables as...

  • By
    spellcheck Attribute

    Many useful attributes have been provided to web developers recently:  download, placeholder, autofocus, and more.  One helpful older attribute is the spellcheck attribute which allows developers to  control an elements ability to be spell checked or subject to grammar checks.  Simple enough, right?

Discussion

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