loading...

You can do a lot more with the JavaScript console than console.log()

caelinsutch profile image caelinsutch ・3 min read

If you do any sort of web development, you probably use a lot of console.log(x) when debugging your applications. It's a stragghtforward way to figure out what's going on in your code. But the console object has quite a few other methods that can help you debug your applications better.

The Basics
You can of course print strings:
console.log("Where am I?")

and objects as well:

const foo = { id: 1, name: 'Joe', age: 12 }
console.log(foo);

The problem is, this will give the following output:
Result of console.log(foo)

You don't actually see the variable name of foo. This can get annoying when debugging with a lot of Outputs. Thankfully, we can fix this by using console.log as so:

console.log({foo})

which gives the following output:

Output of console.log({foo})

console.warn() and console.error()

Many people also forget about our friends console.warn() and console.error(), which can be used to make your console more readable. console.info() is also available, and some browsers will show a special icon for it.

Other console methods

console.group()

Outputting a lot of logs or errors? You can actually nest them with console.group to make your logs easier to read. This is great for making sure that the scope of each log statement is clearly deliminated.

For example, look at these logs for a shopping cart:

console.group('Shopping Cart');

console.log('user: John Doe');

// First Shopping Item

console.group('Shopping item');

console.log('Name: JS Book 1');

console.log('Author: Unknown author');

console.log('ISBN: 048665088X');

console.groupEnd();

// Second Shopping Item

console.group('Shopping item');

console.log('Name: JS Book 2');

console.log('Author: Unknown author');

console.log('ISBN: 048665087X');

console.groupEnd();

console.groupEnd();

This will give the following output:

Output

console.table()

This will actually put objects into a nice table to make it more readable. If you have objects with common properties or an array of objects, you can use console.table() to make it more readable. For example, lets define an a few objects:

const a = {id: 1, a: "a", b: "b"}
const b = {id: 1, a: "a", b: "b"}
const c = [a, b]

console.table({a, b})
console.table(c)

This is the output:

Output of console.table

console.trace()

This will show you the call path taken to reach the point at which you call [console.trace](https://developer.mozilla.org/en-US/docs/Web/API/Console/trace)()

console.time()

Starts a timer you can use to track how long an operation takes. You give each timer a unique name, and may have up to 10,000 timers running on a given page. When you call [console.timeEnd](https://developer.mozilla.org/en-US/docs/Web/API/Console/timeEnd)() with the same name, the browser will output the time, in milliseconds, that elapsed since the timer was started.

console.time();

for (let i = 0; i < 100000; i++) {

// some code

}

console.timeEnd();

console.time() example

console.clear()

Pretty intuitive, clears the console of all the messages that have built up.

console.dir()

This prints out all the properties of a specific JavaScript object in the console, so we can easily see all the available properties (methods, variables, etc.)

Example of console.dir()

Conclusion

All of these various console methods will hopefully allow you to be more effective at using the console object to debug your JavaScript applications.

Like to learn?

Stop by and say hi at my LinkedIn!

Posted on by:

caelinsutch profile

caelinsutch

@caelinsutch

Cofounder of Bytes Robotics. Passionate about creating products that improve quality of life and integrate seamlessly into everyday environments.

Discussion

pic
Editor guide