Testing with Chrome Devtools and other Tricks

There's a lot that you can do with the Chrome devtools console besides for just logging simple output:

Suppose you wanted to test that a variable is not blank, you could do something like this:

test using console.error

If a value exists for test, no error is thrown:

test using console.error no error

If you're used to using assert statement to test your code, the devtools console supports using these too. These are basically shortcuts for the test above:

console.assert no error

In the case of an error:

console.assert error

You can also provide a simple expression to console.assert such as (a === 1), and it will trigger if the statement is false.

Note: An important caveat about these assert statements, is that unlike with other compilers or interpreters, the devtools console does NOT handle the error, it simply keeps executing after printing the error message. So you should never rely on console.assert to handle errors for you.

console.assert continuation

However, Node.js may handle these statements differently depending on your setup. The console module for example, will break after encountering a console.assert statement.

Some other tips for using the console:

You can also print information messages:

console info

And warning messages:

console warn

console.error

console.error not only draws attention, but also provides a useful stack trace to aid debugging. The next time you are trying to track down a bug, consider using console.error instead of just console.log.

console error

You can also filter by error level:

filter by error level

If you are just looking to pass messages with a difference appearance, you can pass text with '%c' followed by CSS:

formatting text

 

You can pass multiple arguments to console.log:

console.log arguments

You can also include any object type such as strings, arrays, booleans and objects.

console.log objects

Counting

Suppose you wanted to count how many times something occurs. You can do something like this:

let one = 0;
let two = 0;
let three = 0;

for (i = 0; i < 1000; i++) {
	let num = Math.ceil(Math.random() * 3);
	if (num === 1) {
	  one++;
	} else if (num === 2) {
	  two++;
	} else if (num === 3) {
	  three++
	}
}

console.log(one, two, three)

 

An easier way of doing this though, is to let the console itself count the output:

console count code

The console will output each number, and tally them up:

console count first few numbers

The final tally:

console count final tally

Grouping

You can also group output together:

nesting code

Note that the group name can be anything, as long the name passed into console.group() and console.groupEnd() matches.

In the output, you can open and close each group:

nesting output

You can even nest groups inside each other, in this case I've nested the above groups inside 'Morning':

nested groups 1

nested groups 2

 

Console.table

The console has a nice built-in way of displaying related data in table format.

In this example, I am creating a dog class, then three instances of dogs.

I then put all three into a 'dogs' array.

console.table code

When given one argument, console.table will output all data in table format.

Since this is an array, the first column is the index.

console.table output

You can also choose the columns to display by passing another argument:

console.table second argument

 

Enjoy!