The JavaScript Console

All browsers have a console that can be used for debugging and one of the most popular ways to utilize it is to use the console object.

The console object has various methods to use which are really helpful for you as a developer. To find out more about using and opening the console continue reading below.

How do I open the console?

Opening a console on any browser is pretty simple. Right click on the page, select Inspect and click console. Alternatively, browsers provide us with some nifty shortcuts to speed up development so you can use:

• Command + Option + i on your Mac
• F12 on your PC

You can even try it now on this page. Give it a go!

The most useful console methods:

console.log()

There's a good chance you've heard someone say, "console log" before even if you've just started learning JavaScript.

To log means to write down. So console log is used to display an output in the console.

Within the parentheses, console log can hold any value or expression:

1console.log('This is a test') // This is a test 
2console.log(false) // false
3console.log(2 * 2) // 4

console.table()

The table method displays the passed data in tabular form. Either an array or an object can be passed to this method. You can use this method to make objects and arrays easier to read.

Array

If you pass an array to the method, the first column in the table are the indexes. The second is each of the elements in the array.

1const arr = ['Welcome','to','Java5cript.com']
2console.table(arr)

Object

If you pass an object, the same will happen but each property type will be it's own column.

For example:

1function Car(make,doors){
2    this.make = make
3    this.doors = doors
4 }
5 
6 const merc = new Car('Mercedes',4)
7 const bmw = new Car('BMW', 2)
8 console.table([merc,bmw])

💡 Tip

You can restrict the number of columns displayed by using an optional parameter called 'columns'. Pass the columns you want to display as an array and the output will be limited to those only:

1console.table([merc,bmw],[make]);

console.info(), console.warn() & console.error()

The info, warn and error methods all do the same as console.log with one difference.

ℹ️ info : Outputs the data passed to the console as an informational message. This is styled as normal text in the console.

⚠️ warn : Outputs a warning message to the console that is styled in yellow.

❌ error : Outputs an error message to the console styled in red.

Note

Many other console methods exist that are all beneficial to learn but not used as often. You can learn more about them by searching google for, 'javascript console object'.