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:
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:
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.
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:
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:
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.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.)
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!
Top comments (0)