Most modern web browsers offer a developer console of some sort. While some of them may look a little bit different, for the most part, the functionality is similar. If you’re a developer, you’ve likely used it or at least seen it. However, a lot of developers only really scratch the surface when it comes to all of the features the browser console has to offer. In today’s post, I’m going to dive a bit deeper into how you can use the browser console to make your life easier.

Where do I find the browser console?

If you already know where to find your developer console, you can safely skip this part. If not, find your browser below and follow along with the steps.

Apple Safari

The trickiest one on the list. Apple hides the developer tools by default so you need to enable them first. To do so, go to Safari’s preferences menu (Safari Menu > Preferences), then under the “Advanced” tab, tick the “Show Develop menu in menu bar” option.

After this, you’ll be able to open the developer console either by clicking on “Develop > Show Javascript Console” or by using the Option + ⌘ + C keyboard shortcut.

Google Chrome

Click on the three dots in the top-right corner of the browser window. From here, navigate to “More Tools > Developer Tools”. You can also use the Option + ⌘ + J shortcut on Mac or Shift + CTRL + J on Windows/Linux.

Mozilla Firefox

Click on the gear in the top-right corner of the browser window. From here, select “F12 Developer Tools” or just use the F12 key.

Using the developer console

Now that we know how to get to it, let’s start diving into the features!

Firstly, let’s be clear

If you’re going to be trying out a lot of console commands, you’re going to end up with a wall of information in your console soon enough. Just like a terminal, the clear() or console.clear() command will remove everything in the console and give you a blank slate.

Outputting to the console

You’ve likely used a console.log() command before, it’s the most common way to get information from your site to appear in the console. For a lot of developers, including me just a few years ago, this is about the extent of what they use the browser console for. But did you know there are several different ways in which you can log data to the console? Consider the following two options:

  • console.warn()
  • console.error()

These two commands perform a similar role to the console.log() command, but they are styled differently in the console by default. This makes it easier to spot in your console and by using them for actual warnings or errors you can tell from a glance if there’s a problem.

Table your concerns

Some elements, like objects, (which most things in JavaScript are) are easy to understand when displayed in tabular format. Luckily, the console allows us to do just that with the console.table() command.

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var me = new Person("John", "Smith");

console.table(me);
An example of a console.table() command in the browser console.

The console.table() command also accepts a second paramater in the form of an array of strings. This array is then used as the column headings in your table.

String substitution

console.log() and other logging methods like those described above supports string substitution. This means that by putting certain identifiers in your log you can inject variables in their place. There are a couple of instances where this is useful, the most common of which is string concatenation.

console.log("%s has %d years of experience.", "Peter", 3);

>> "Peter has 3 years of experience."

The character you use for your identifier indicates the type of data that the variable is expected to be. The most common identifiers are:

  • %s: string
  • %d or %i: integer
  • %f: floating-point value
  • %o: Javascript object

Styling the console output

This feature is closely related to string substitution. Similarly to the identifiers above, you can also add the %c identifier to the string you’re outputting to the console. This allows you to pass CSS styles as a second parameter that will apply to the string.

console.log("Peter had %c3 years of experience.", "color: green");
An example of a styling console output in the browser console.

Notice how in the example above, the CSS styles only applied to the part of the string that followed the identifier. As such, you can add multiple identifiers if you want to style different parts of the output.

console.log("Peter had %c3 years %cof experience.", "color: green", "color: inherit");
An example of a styling console output in the browser console.

Group up!

As you start to add more output to the console, things can get confusing. A simple way to avoid this is to group related output with the console.group() and console.groupEnd() commands. The console.group() command also accepts a string parameter that acts as a label for the group.

console.group("User contact details");
console.log("Harry");
console.log("Potter");
console.groupEnd();

console.group("User physical address");
console.log("4 Privet Drive");
console.log("Little Whinging");
console.log("Surrey");
console.groupEnd();
An example of grouping outputs in the browser console.

Take a closer look

You can use the inspect() command in your console to jump to the node that you pass as a parameter.

inspect($('button'));

If there is a button on the page, the inspector window will jump to it and select it.

Quick on the clipboard

The copy() command allows you to quickly copy the content of a node/object that you pass as a parameter to your clipboard.

Debugger

While not technically a part of the console, all of the major modern browsers also provide a Javascript debugger. In addition to normal console output methods, using the Javascript debugger can be advantageous to your debugging efforts. To use the debugger, add the debugger; command somewhere in your code.

function exampleFunction(){
	debugger;
	//More code...
}

In the above example, when you run your code, the Javascript debugger will pause when it hits the debugger; line. This allows you to see the state of your website or app at this point and step through your code from here so you can pinpoint where things might be going wrong.

In conclusion

I hope that by reading this post you’ll have gained some more knowledge about the browser console and the tools you have at your disposal when using it.

In truth, there are actually many more and if you’re interested in further reading, you’re welcome to check out the full browser console spec maintained by WHATWG over here: https://console.spec.whatwg.org/.

Happy debugging! 🐞

...