How to use the developer console like a pro

The console window in a browsers developer tools is more than just a long list of red strings letting you know that something has gone wrong, but never actually telling you what. That is one of its primary roles, sure, but it can definitely do much much more. In this post, I will break down all of the standout features that you can use to test and debug your JavaScript code that you may not be aware of.

Most developers are familiar with console.log() as their primary method of displaying objects to the console window. However, there are a total 4 different methods that can be used as well to display data. Those being the following:

console.info()
console.log()
console.warn()
console.error()

They all for the most part work in the exact same way, and that is that they take in any list of objects as arguments and then display that data in the console window. The primary difference being in how they display data in the console window.

The following is the output of each of the display functions listed above.

Notice the accompanying icon to the left of each output specifying what kind of message you are logging. Most developer consoles offer filtering mechanisms as well so that you can display each type of console output selectively as needed.

As mentioned, each of the display functions behave the same and accept the same parameters. There are 3 primary ways to display data using these functions.

1. Output any object

The display functions can pretty much give you an output for anything and everything that you can throw at it. Everything from standard strings and integers to more complex JSON objects and built in JavaScript objects.

Take the following for example:

    
let num1 = 111;
    let name = 'Walt';
    let nums = [1, 3, 5];

    console.log('Number: ' + num1);
    console.log('String: ' + name);
    console.log('Array: ' + nums);

    console.log('All: ' + num1, name, nums);

We have various types of variables declared and we will output each to the console. The output to this would look like the following:

The output would be the same regardless of the display function that is used. Note that the first 3 outputs are converted to their string equivalents, while the 3rd option gives us an expandable view of the Array data.

If you are simply logging variables directly without any strings included in your message, the console window will display each message in its corresponding type, allowing you to expand the data if needed.

2. Outputting multiple values

The console.log function is capable of outputting comma-separated values as well, saving you some time if you don't actually want to keep typing console.log over and over. We saw this above when displaying All of the variables declared.

Depending on the data type of the argument passed in, the console window will display each item as its corresponding type.

3. String substitutions

And lastly, you can also pass in a message containing zero or more substitution strings, followed by a list of objects that will replace those strings.

What are substitution strings? They are placeholder characters that will get substituted (hence the name) with passed in parameters.

In total, there are 4 primary type of substitutions that you can make in a console.log string, those being the following:

The substitution strings will get replaced in the order that they appear in the parameter list. In the example below, the first %s will be replaced by make and the second by model.

What happens if you are missing a parameter you may wonder. While you would think that the browser would simply ignore the %s declaration, it does not and will actually just output back out the %s text to the window.

Another interesting note is that you attempt to use a complex data type, such as an Array or an object using the %s declaration, you will not get a string representation of the data, but instead the browser will simply out the data type of the given parameter.

This might be useful, and will depend more on the type of data that you are trying to get back.

4. Creating element groups

If you are like me, you tend to have a fair amount of console.log's at any one time and that can make things somewhat difficult to organize and analyze.

This is where the console.group method can help you to separate out your statements.

You can create named groups in your console output in order to separate out various chunks of output. The console.group method takes in 1 argument, that being the name that you wish to assign to the group.

console.group("Group1");
console.log(111);
console.log('Walt');
console.log([1, 3, 5]);
console.groupEnd();

Note the console.groupEnd() function call used to terminate the current group that you are in.

The output would look like the following:

To include multiple groups you would simply alternate console.group() and console.groupEnd() sections accordingly.

One last interesting note is that you can embed groups into other groups if you so wish.

The developer console will display your groups with the proper indentation and expansion icons as required.

5. Tabular data

For those times when you have a larger and more organized data set to display, such as an Array of data or a more complex Object, consider using the console.table() method, which displays data in a tabular format, along with sortable columns.

let data = [10, 30, 40, 50];
console.table(data);

The output in Firefox would look like the following:

What happens if you console.table() a non Array or Object formatted data? It pretty much just behaves as a standard console.log() would.

One of the main benefits of outputting data in tabular format, is that the browser can allow for the sorting of that data by clicking on the columns label.

6. Styling the output

And lastly, a little known feature of the console.log() is the ability to style the output using a select number of CSS properties. While I can't really find a particular useful use case for this, the option is there for you to do so.

The number of properties is limited, but they include the following:

- background
- border
- border-radius
- box-decoration-break
- box-shadow
- clear and float
- color
- cursor
- display
- font
- line-height
- margin
- outline
- padding
- white-space
- word-spacing / word-break
- writing-mode

This list is prone to change of course and might not behave as expected depending on how complex your style rules are and the browser.

In order to include a style, you will need to use the %c directive in your console message string as follows:

console.log('This is normal and %cThis is styled', 'background:gold;color:black');

Note that only the content right after (to the right) of the directive will receive the given style rules. Which would produce the following in the console window:

As with the other forms of string substitutions mentioned above, you can include multiple styled sections by using multiple %c declarations.

I hope you found these features of the developer console helpful in your debugging and coding life as they have definitely helped me out in generating more useful output and debugging statements.