How to make the best use of JavaScript console object
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
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