Beyond Console Debugging Tricks

Daniel Reis
Jul 1, 2016 · 5 min read
Image for post
Image for post
Note from Editor: Daniel was very focused finding stuff to nitpick when Rita Marques Ferreira — editor of People Behind the Keyboard — snatched this picture. Thank you, Rita!

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.

Image for post
Image for post
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.

Image for post
Image for post
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().

Image for post
Image for post
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.

Image for post
Image for post
In the Console, just add the console.profile() to start, and console.profileEnd() to finish. After that, you can check the results in the browser’s Profiles tab.

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.

Image for post
Image for post
Once again, it’s all done in the Console, pretty much like the console.trace() example.

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().

Image for post
Image for post
In this example, I wrapped the buttonGroup function with the debug method in the Console. The code stopped when it was triggered — in this case, by calling the function in the Console.

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.

Image for post
Image for post
In this example, I wrapped RangeSliderObject in monitor(), in the Console. The output was printed there after the function was triggered.

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.

Image for post
Image for post
This selection is also accessible from the Console tab.


OutSystems Experts

Digital transformation with a low-code platform…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store