Every JavaScript developer has used `console.log("message")` .
It provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.
In this article we will talk about most of the console methods which everyone should start using.
All the following methods are available in the global instance console, so it is not necessary to require the console module.
Default: console.log( ) | info( ) | debug( ) | warn( ) | error( ) 🔥
These console will directly print the raw string with appropriate color based on the type of event that is provided to them.
console.log("console log")
console.info("console info")
console.debug("console debug")
console.warn("console warn")
console.error("console error")
Styling console output 👻
You can use the %c directive to apply a CSS style to console output
console.log("%cText color is green and increased font size", "color: green; font-size: 2rem;")
We can add %c multiple times.
console.log("Multiple styles: %cred %corange", "color: red", "color: orange", "Additional unformatted message");
1. console.table( )
console.table ( ) allows us to generate a table inside a console. The input must be an array or an object which will be shown as a table.
let info = [["Suprabha"], ["Frontend Dev"], ["Javascript"]]
console.table(info)
2. console.group("group") & console.groupEnd("group")
To organize the console, let's use console.group() & console.groupEnd().
Using console group, your console logs are grouped together, while each grouping creates another level in the hierarchy. Calling groupEnd reduces one.
console.group()
console.log("Test 1st message")
console.group("info")
console.log("Suprabha")
console.log("Frontend Engineer")
console.groupEnd()
console.groupEnd()
3. console.dir( )
Prints a JSON representation of the specified object.
let info = {
"name": "Suprabha",
"designation": "Frontend Engineer",
"social": "@suprabhasupi"
}
console.dir(info)
4. console.assert( )
Log a message and stack trace to console if the first argument is false.
It will only print the false argument. It does nothing at all if the first argument is true.
console.assert(false, "Log me!")
Example:
let name = "supi"
let msg = "Its not a number"
console.assert(typeof msg === "number", {name: name, msg: msg})
5. console.count ( )
This function logs the number of times that this particular call to count() has been called. This function takes an optional argument label.
If label is supplied, this function logs the number of times count() has been called with that particular label.
console.count("Hey")
console.count("Hey")
console.count("Hey")
console.count("Hey")
If label is omitted, the function logs the number of times count() has been called at this particular line
for (let i = 0; i < 5; i++) {
console.count()
}
6. console.time( ) and console.timeEnd( )
Check the performance of your code in execution time
console.time() is a better way to track the microtime taken for JavaScript executions.
console.time("Time")
let l = 0;
for (let i = 0; i < 5; i++) {
l += i
}
console.log("total", l)
console.timeEnd("Time")
Reference 🧐
| 👩🏻💻 suprabha.me |
Top comments (27)
after I did this, my chrome went into a proplem
setInterval(() => {console.count()}, 0)You will get dangerous email from Sundar Pichai :)
what do you mean?
its a joke
3 days on — what’s the count?
lucky you are not spawning threads or processes
DDOS Attack. :)
It seems you found & implemented, and then rewrote this featured original article on Hacker News: news.ycombinator.com/item?id=26779800
If this is the case, I'm glad you got something from this, but why not credit the original author given how similar your post is?
Additionally, the post I'm linking to above is one of many similar articles that started getting popular in 2017/2018 (on the same note as @ra1nbow1 's comment here). At some point we have to acknowledge when we're steering away from the spirit of sharing information in pursuit of internet points.
One more post about JS console
Great screenshots, the examples are very clear!
Your console screenshot for using console.dir() seems like it returns the same object format as using console.log(), instead of returning JSON. Is that how JSON looks like in the console? I'm not too sure what the difference is between console.dir() and console.log() on an object.
console.dirisn't technically emitting JSON, it's more that it's providing a way to interactively navigate through that object's properties.It's the default approach that
console.logwill use on objects, but you can see a clear distinction when you use a DOM node instead.If you were to
console.log(document.body), you get an interactive version of the DOM in the console, because the console standard says to use an optimally useful format, which for the DOM is the same asconsole.dirxml(document.body).But, if you
console.dir(document.body)instead of getting the DOM representation, you get an Object representation and can navigate through the properties of the Object.Thank you so much for the explanation, that is incredibly useful! I've always struggled with trying to read DOM element representations in console.
ah... Javascript is spelled JavaScript... not that important but thought if we use it for 10 years, then may as well know the official name... I know... macOS, MacBook... it is all confusing...
it's really nice
Thanks, I didn't know most of that, but I'll remember for the next JS project
I am really glad you find this post useful ☺️
Thanks for sharing.
Thanks, great info
Wow! Never even knew most of these functions!
Thanks for sharing!