Chrome DevTools: using Logpoints for on-demand JavaScript debugging.

This short post is an addition to my previous post about logging in JavaScript– Logging and debugging in JavaScript. A few methods I use on a daily basis.

Google Chrome v73 introduced a cool new feature I’d like to share with you. It’s called logpoints and it’s meant to make it easier to debug the source code of a web app. It’s not a new concept, but now it’s accessible through Google Chrome and VSCode.

What are Logpoints? When and where to use them?

Another great feature of logpoints is that they are not persisted in your code, so you can just restart your devtools and you won’t have to deal with removing all the statements from your code in IDE.

How to use Logpoints?

let bears = 0; let timeout = null; incrementBears = function () { bears++; timeout = setTimeout(incrementBears, 1000); if (bears === 10) { clearTimeout(timeout); } } incrementBears();

If we run this code in the browser we won’t see any feedback, because there are no logs inside. Let’s put one.

You can do this by right-clicking the line number near your source code and selecting “Add logpoint…” option.

From there we can describe our message and variables we want to log.

After refreshing the tab, we’ll see that we have our message in the console displayed every second.

Let’s add another one, this time, let’s put it inside the if statement (line 8). I’ll also change the timeout to 2 seconds so that I can show you that we can insert logpoints during runtime.

For this example I’ve used “LOL 🤪” message, because I’m that mature, but you can use whatever you want, you know? For example you can put expressions in {} and they’ll be interpolated!

Use logpoints in VSCode

Debugging production apps?

That’s it for this quick tutorial. This concept isn’t new, but it is helpful and it lets you save some time and nerves. Remember how to use logpoints in case your next production debugging session looks like this…

Hey, one more thing. I’ve created the graphics with the help of www.vecteezy.com

Originally published at www.thedevelobear.com on March 23, 2019.

Writing articles for all the front-end develobears in the woods.