Use console.log() like a pro
Tags: javascript, webdev
Published: 2020-11-23 06:13:05

Using `console.log()` for JavaScript debugging is the most common practice among developers. But, there is more...

The console object provides access to the browser’s debugging console. The specifics of how it works varies from browser to browser, but there is a de facto set of features that are typically provided.

## The most common Console methods:
`console.log()` – For general output of logging information.
`console.info()` – Informative logging of information.
`console.debug()` – Outputs a message to the console with the log level debug.
`console.warn()` – Outputs a warning message.
`console.error()` – Outputs an error message.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bigab0doaj4g83coh4qj.png)  


## Custom CSS styles for a console.log()
The `console.log` output can be styled in DevTools using the CSS format specifier.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6uwc3fntea5bc8ofbbqw.png)  


## String substitutions
When passing a string to one of the console object’s methods that accept a string (such as log()), you may use these substitution strings:

`%s` – `string`
`%i` or `%d` – `integer`
`%o` or `%0` – `object`
`%f` – `float`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g4iw28vguze8bhbm4u4d.png)  


## `console.assert()`
Log a message and stack trace to console if the first argument is false.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zgjl6o5avcec2udjrxmt.png)  


## `console.clear()`
Clear the console.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gt16umfrcdq54g0lcyfx.png)  


## `console.count()`
Log the number of times this line has been called with the given label.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b050f6ae9zv2g6xxszbr.png)  


## `console.dir()`
Displays an interactive list of the properties of the specified JavaScript object.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gziekeanyicibnqzss5s.png)  


## `console.group()` and `console.groupEnd()`
Creates a new inline group, indenting all following output by another level. To move back out a level, call `groupEnd()`.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/whkb5d3amdsx5guj59fv.png)  


## HTML elements in the console
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7recngvjuawmnpsddpmr.png)  


## `console.memory`
The memory property can be used to check out the heap size status

Note: memory is a property and not a method.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6zuzeuokgwzhryw6napk.png)  


## `console.table()`
Displays tabular data as a table.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ubm6wel1oxogwkhtdd4n.png)  


## `console.time()` and `console.timeEnd()`
`console.time()` – Starts a timer with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.
`console.timeEnd()` – Stops the specified timer and logs the elapsed time in seconds since it started.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ahjfy3qjyh27dyss0lye.png)  


## `console.trace()`
Outputs a stack trace.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tg975vima3lraytrjmul.png)  


If you like this article, chances are you'd like what I tweet as well. Consider following me on [Twitter](https://twitter.com/denicmarko).