As a developer when I was getting started any used JavaScript for my projects. For debugging I was using console objects in JavaScript which is a very simple and easy way to do.

Months pass by and I was still using console.log() and didn’t know the other useful methods which exist in console objects, and in this post, I’m going to share with you methods that are helpful in debugging.

Watch Video

Click to Play Video

console.log() method

The .log() was the method most common and frequently used. I just simply need to pass a string, number, or any type of object and it will be logged in the browser Console section in Inspect window.

console.log( "Say hi" ) // Say hi 

console.error() method

This method displays a red background, depicting an error. This is displayed when there is an unhandled expectation that has occurred in the code.

console.error( Y )

javascript console.error() method output

console.trace() method

This is a convenient way to get to know through how many scripts the objects have gone through as it displays the stack trace.
Here is the example of console.trace() in React JS.

console.trace(`props`, props)

javascript console.trace() method example in react app

console.warn() method

This method puts up a warning message in the console. and mostly if there is any CSS compatibility issue or you might have used a deprecated javascript method and soon.

console.warn("Few modules are not working as expected")

javascript console.warn() method output

console.assert() method

This method is used to evaluate a condition. If the condition returns false the message as Assertion failed: is displayed in the console.

console.assert( 1==="1", 'Not a correct type' )

javascript console.assert() method output

console.time() and console.timeEnd() method

This method is used to track the timing between time() and timeEnd().

> console.time("start")
> console.timeEnd("start") 

// output
start: 4501.759033203125 ms

console.table() method

This method is quite helpful as it displays the arrays and objects in table format. Which makes it easy to explore its details.

let students = [
    { name : 'raghu', course : 'BBA' },
    { name : 'sam', course : 'Bcom' },
    { name : 'pavan', course : 'BCA' },
]

console.table( students )

javascript console.table() method output

console.dir() and console.dirxml() method

The method console.dir() displays the properties and methods of objects in a dropdown manner.

console.dir( document.getElementById('my_para') ) 

And displays console.dirxml() in document tree order.

Styling using console

To add colors to the console.log() output pass the styles to the second parameter.

console.log("%cAttention", "color:red;font-size:30px;font-family:impact")

Thank you