The Ultimate Guide to Web Console 🔥
Tags: javascript, webdev, react, programming
Published: 2021-09-11 10:37:32

To debug a code you will use the console

> The **console** object provides access to the browser's debugging console.

Once you master the console, it will help you to be more organized, debug much faster & know everything that's going on in your app. So I will try to summarize all you need to know in short points with examples :fire:

## console.log(message)
Outputs a **message** to the console
```javascript
const A = 'World';
console.log(`Hello ${A}`);
```
![log](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ndf4xah82j485e7ya18.png)
To add styles
```javascript
console.log('%c Test One', 'color: #bada55; font-size: 20px');
```
![styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kzeyiy0fiz6orxp3lmag.png)
```javascript
console.log('%c JavaScript', 'font-weight: bold; font-size: 50px; color: blue; text-shadow: 6px 6px #E485F8, 3px 3px #E485F8;');
```
![pro styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yz7d8ighc6qudiipzue.png)
- %o / %O - objects
- %d / %i - integers
- %s - strings
- %f - floating-point numbers

## console.info(message)
Outputs a **message** to the console
In case of Firefox it will add an `i` icon
```javascript
console.log('This is log');
console.info('This is info');
```
![log vs info](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/knubtvknfyvpc206t43e.png)
## console.warn(message)
Outputs a warning **message** to the console
```javascript
console.warn('This is Warning message');
```
![warn](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmw6460nas8emv5ktds5.png) 
## console.error(message) 
Outputs an error **message** to the console
```javascript
console.error('This is Error message');
```
![error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tr20yh4y2l0ut76hrkul.png) 
## console.trace()
Outputs a stack trace to the console
```javascript
function a() {
  b();
}
function b() {
  console.trace();
}
function trace() {
  a();
}
trace();
```
![trace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j110lu1owmtftiuud3vg.png)
## console.group() & groupEnd()
Outputs in grouped
```javascript
console.group("Alphabet")
  console.log("A");
  console.log("B");
  console.log("C");
  console.group("Numbers");
    console.log("One");
    console.log("Two");
  console.groupEnd("Numbers");
console.groupEnd("Alphabet");
```
![grouped](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av7mcs0696hy7bzqe35n.png) 
## console.assert(condition, failure message)
```javascript
const A = 20;
console.assert(A === 20, 'This is true');
console.assert(A === 21, 'This is false');
```
If true it will not print any message, on fail:
![assert fail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ilc9nwi3hw5tngg55i2x.png)
## console.count()
Logs the number of times this particular `count()` has been called
```javascript
function count(label) {
  console.count(label);
}
count("One");
count("Two");
count("One");
count("One");
```
![count](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwtqxo02delmvrzjl52u.png)
## console.countReset()
Resets the count
```javascript
console.count();
console.count();
console.countReset();
console.count();
console.count("time");
console.count("time");
console.countReset("time");
console.count("time");
```
![countreset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1lkou8d2lehfa5yzm5c0.png) 
## console.dir()
Outputs objects in a formatted way
```javascript
const obj = {
  name: "user name",
  email: "test@test.com",
  tags: ['dev', 'react', 'js']
};
console.dir(obj);
```
![dir](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7v6mzj94y7rz5yo9yyw.png) 
## console.dirxml()
Outputs the elements if possible, or the JavaScript representation
```javascript
<div class="tryRender">
  <span>
    <button>Click Me</button>
  </span>
</div>

<script>
  console.dirxml(document.querySelector('.tryRender'));
</script>
```
![console master](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fs9c6n1wl1s05eeorr87.png) 
## console.time(label) & timeEnd(label)
We can start a timer with `console.time` and then end it with `console.endTime`. By using this we can find the time taken to execute a function
```javascript
function a () {
  for(let i = 0 ;i < 10; i ++) {
    // operation;
  }
}

function b () {
  for(let i = 0 ;i < 10000; i ++) {
    // operation;
  }
}

console.time();
a();
console.timeEnd();

console.time();
b();
console.timeEnd();
```
![timer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ih5bvzlqpkqzuqq27bz.png) 
## console.table(obj)
Outputs objects in table format
```javascript
const obj = {
  name: "user name",
  email: "test@test.com",
  tags: ['dev', 'react', 'js']
};
console.table(obj);
```
![table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0gnc1ddrm2e8fgh1td2.png)
## console.profile(message) & profileEnd(message)
Outputs message, doesn’t display anything unless used in the inspector, or inspector is open
```javascript
console.profile('This is profile');
console.profileEnd('This is profile');
```
![profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b7ltjwj6lttqtnz1axju.png)
## console.clear()
Remove all the console message and prints `Console was cleared`
![clear](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0e7z8g7021muy2tc8aji.png) 

_ _ _ _
Being `Javascript` developer for sure you have used the console. You may not need all of these, but when your project becomes bigger and more complex, some of the options will boost your debugging process :collision: