I don’t consider myself a nitpicker. That’s only true, and it’s all fine and dandy… until I find a console.log() that someone forgot to remove from the JavaScript code. And if we’re talking about debugger statements… all hell breaks loose! People I have worked with already know how much that bugs me (pun intended).

Sure, I had a few slips of the mind in the past. Who hasn’t? I learned quickly, though. Using those statements should be a last resource, especially when you are working with big teams. It’s disrespectful to your teammates to leave them in the code!

So that is why I started avoiding console.log() like the plague, and I can’t remember the last time I used a debugger statement. It’s been years now! I saw the light!

My experience at OutSystems, while meeting with clients and interacting with other developers, has shown me that people will do some crazy stuff for the sake of debugging. Some of this stuff is so out there and time consuming, that I can’t even understand their reasoning.

Instead of investing a little time, researching better ways and finding the right tools for the job, some people find extremely complicated schemes that end up not helping at all.

Inspired by those people and the inexplicable juggling I saw them doing while trying to debug stuff, I collected some of the most common examples I can present as proper alternatives for that process. With these simple examples you will learn how to avoid the wrath of your colleagues. You know, the prickly ones that get extremely bugged when you leave those debuggers on that JavaScript file.

Console Methods

When you need to accelerate your debugging like a boss, Console API is the solution. Here are a few examples of how you can streamline your debugging, big time.

Print a Stack Trace

One of the most regular problems I found was that people got lost when tracing events, and finding out where a function was called from.

I present thee console.trace()! With this simple method you can trace your call, know exactly where it starts and trace its lifecycle.

In this example, I added a breakpoint to insert console.trace() within the RangeSliderObject. When the RangeSlider button was triggered, the trace was printed to the Console.

Display Object as Table Data

This one’s a personal favorite. With a simple console.table() you can get a friendly tabular output of your Object or Array, displayed in your console. Say goodbye to the not-practical-at-all click on Object you need to check to browse in the console.

In the Console, wrap your object inside console.table() and you will have a tabular output. You can also add a breakpoint in the browser, for the file you need to check, and add the console.table() there. The output will be printed to the Console.

Set a Timer

What do you do when you need to know how long a piece of code takes to run? I’ve seen some strange sorcery out there for this one, but the solution is actually quite unmagical. All you need to do is start a timer with console.time() and then stop it, when needed, with console.timeEnd().

In this example, I added a test console.time(), ran some code, and stopped the test process with console.timeEnd().

Check the CPU Consumption Values

Check the CPU profile and analyze the time consumed in each run with the very handy console.profile(). This will give you an idea of what’s more expensive in your JavaScript code.