Beyond Console Debugging Tricks
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.
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 Object Properties
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!
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”.
As for the tone… Guys, it’s all in good fun. ;)