Productivity in the workplace is always a major concern. We try all kinds of things to boost our productivity from using productivity apps like Asana, Brief or using the 2-Minute rule, to bringing an entire garden to work. So what about finding ways to improve our productivity when we’re coding?

If you’re developing any kind of web-based project and your code isn’t working as planned (which is most of the time) the first place you’d check is your browser console.

The console is arguably the most used tool that a developer uses to debug their code. Still, most developers just use it to search for syntax errors and console logging. While these two are the most common uses, that’s just a fraction of what the console is capable of.

Here are 10 of the top browser console hacks that will make you (or your dev’s) life much easier:

1. Output errors using console.warning() & console.error()

I bet you’re using console log as a debugger for your web app projects. Typical console.log() gets the job, but sometimes, when you use it too often, the important stuff can get lost in the giant output of every message type – from critical errors to standard reminders. A better way to output errors and warnings is to use console.warning() and console.error(). This will make higher priority issues stand out from the rest of the output:

2. Keep organized using console.group()

Sometimes when you’re debugging statements within functions, you console log every stage of those functions. All of these console logs can get very unorganized. It gets hard to know where each of the logs came from. In these situations, it’s a good choice to use console.group(). This will group all of your logs into a group, that way it doesn’t get mixed up with the rest of the logs.

Example:

Just using console.group() will give you an uncollapsed view of the logs. If you want them to be collapsed and hidden use console.groupCollapsed() instead.

3. Improve UX using console.time() & console.timeEnd()

Getting things served to users quickly is amazing for UX. If you’re trying to optimize your functions to return data quickly, you should use this amazing console hack instead of the typical setTimeout() functions. Use console.time() to start the timer and use console.timeEnd() to end the timer. The time between those two commands will automatically be output in milliseconds.

In some cases, you’ll have a bunch of timers running together for multiple functions. To avoid confusion between which timer was started and ended, you can attach a label to the timers when you start them. Like this: console.time(‘function foo’), and to end them use: console.timeEnd(‘function foo’).

If the function you’re tracking has multiple stages and requires you to log time after completing each stage, you can use the following code:

const start = Date.now();
// do some stuff
console.log(‘Your function took ‘ + (Date.now() – start) + ‘ millis’);

Output in the console:

In here, you can use the same console log command after completion of each stage.

4. Debugging loops? Use console.count() & console.countReset

When it comes to debugging loops, I catch myself just console logging the iterator to keep track of the other logs from the loop. In these scenarios, it’s better to use console.count() in the loop, then to console log the iterator. Here’s what the results should look like:

If you’re tracking iterators in a nested loop, you can add a label like this: console.count(‘Loop 1’). This will help you to identify them in the mess of all other loops.

In order to reset the counter back to 0 just use console.countReset() or console.countReset(‘Loop 1’)

TIP: Using console.count() along with console.group() will be a good combination while dealing with nested loops

5. Getting lost? Use console.trace()

If you use libraries in your code, it is very likely that you have run into errors that involve fixing something in the library’s code. Sometimes these libraries can be very complex and hard to understand. Using console.trace() can be very helpful to identify the stack of a statement. It gives a clear picture of all the functions that were used along with its location.

Example:
function a() {
    function b() {
        function c() {
            console.trace(‘Where am I?’);
        }
        c();
    }
    b();
}
a();

6. Keep logs private with console.debug(‘Found Error 1’)

When your application is in the production phase, it’s better not to show errors and your logs to the general public. But if you still want to track logs from your code and don’t want the general public to see it, use console.debug(‘Found Error 1’). Console debug allows you to hide all the logs in the console unless the ‘Verbose’ level of logs are enabled from the ‘All levels’ filter. This filter is turned off by default so that all the logs will be hidden until ‘Verbose’ is turned on.

7. Keep it neat with console.table()

In many cases, the log output of arrays or objects data is very ugly and hard to understand. With traditional console.log(); the results in the console looks like this:

Object

But if you use console.table(), the console shows all the data in a very clear manner.

When logging Arrays as well, the results are more elegant and much easier to understand than direct console log.

In my opinion, using console.table() for nested arrays is the best use case. Because if you compare the result with traditional console log your results are much easier to understand.

8. Retrieve all interactive properties with console.dir()

console.dir() is another handy tool. It helps you retrieve all the interactive properties you can use on a JS object. It’s most useful when you’re trying to access properties of a DOM element. This tool can provide which exact property you will be using.

9. Process if statements with console.assert()

In many cases, developers end up writing if statements only for console logging data. console.assert() is a very great tool because it can process the if statement and will show an error in the console when the statement wasn’t met.

Example:

console.assert() takes 2 parameters, (if statment, {label: ‘info’, label: ‘info’ …..})

10. Add CSS styling to your console with %c

If you want your console to look fancy, it’s possible to add CSS styling to it. To add the styling, use the traditional console.log() but in the text add %c before the characters you want to style. In the second parameter add the CSS you want to apply to the text.

You can also apply different styles on different parts of text like this:

This method is also used by companies like Facebook to give their users warnings like this:

This is just one of the many ways you could use this hack

So there you have it! 10 Console hacks to hopefully make your life easier as you work through browsers. Did any of these make your life easier, or maybe you’ve got a tip we didn’t include. Let us know!