Beyond Console Debugging Tricks
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.
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.
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().
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.
Check Object Properties
If you need a JavaScript representation of an Object, you can use console.dir(). That will give you a list of properties for that Object.
3 Extra Tips
Here are 3 extra tips that you may find useful for an easy debugging.
Quickly Find a Function to Debug
Sometimes, you want to quickly debug a function, and you have a lot of resources. Ctrl-Shift+f does not find you exactly what you want. The script will stop as soon as it reaches the function you wrapped within debug().
Monitor the Arguments of a Function
Imagine you simply want to monitor the arguments passed into a specific function, but you don’t want messy output to crowd your code. That’s when you use monitor() to fetch those precious, precious values.
Access the Console Inside an iframe
I repeatedly saw people that wanted to access the console inside an iframe opening that very iframe in another tab. Sometimes they needed parent page context, so they had to manipulate some data in the console.
Going back and forth like this is impractical, but there’s a quick solution. You have a dropdown in the browser’s console tab, showing all the documents rendered by the browser, so you can switch easily:
These are just a few of the tricks we use daily to maintain a sane environment and appease the gods of code cleanliness, but keep your eyes peeled for more. We have a few more tips up our sleeves that we promise we’ll share with you, very soon!
Edit (7th July): About one week after publishing, I feel the need to add a little disclaimer: all the examples in this article were used directly in the browser. None of these ended up being added to the JavaScript file and deployed like that. I’m not aiming at replacing bad with somehow less bad.
The idea was to provide a simple alternative for the many (many!) cases I witnessed, out there in the field. You can see this as a statement in favor of having “Everything in its right place”.
Just don’t use the same console.log() for everything, study these alternative methods, avoid developing code in a JavasCript file in order to have an output with console.log().
As for the tone… Guys, it’s all in good fun. ;)