When it comes to debugging javascript, there is one single tool that consinstently pops out, no matter how sophisticated the browser debugger is: console.log()

🤨

Ok, it's not really elegant but sometimes is an effective way to monitor what's happening in our code without recurring to breakpoints and watch expressions and without the need to pause the execution of our script.

The drawback is that console.log() statements tend to clutter the code and are really there for testing purposes only: we should remove them once we are done but there's always the risk that they slip in some production code 😫.

Luckily, any Chromium based browser has a nice feature that takes the best of the two approaches: Logpoints.

These are quite similar to brakpoints in the way they are set, but they allow us to define a message in the same way we would do for a console.log() statement, even passing variable or executing functions visible in the current scope.
Plus, script execution won't stop on a logpoint but rather will print the defined message in console.

Logpoints only live in the browser, so no risk of forgetting them in the code, and we can enable, disable or remove them as if they were breakpoints.

Check it out!

Simple and effective!