How to style console.logs in Chrome Dev Tools
Tags: javascript, webdev, css, groovy
Published: 2021-03-27 01:12:57

If you're like me and you use `console.log` as a debugging method by printing things to the console, the least we can do is to make the outputs prettier. What if our logs could be printed in different colors and font sizes, like in the print screen bellow?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/smpr9g7748lz5kxqv26z.PNG)

In order to style (format) our logs we must use so called `format specifiers`. They contain the `%` symbol, followed by a letter that specifies what kind of formatting we want to the apply to our output.

They look like this:

```javascript
%s - Formats the value as a string
%i or %d - Formats the value as an integer
%f - Formats the value as a floating point value
%o - Formats the value as an expandable DOM element. As seen in the Elements panel 
%O - Formats the value as an expandable JavaScript object
%c - Applies CSS style rules to the output string as specified by the second parameter
```

Now, let's write some examples. You can follow along by copy-pasting them in your Chrome console and see the result.

Example: print a `blue string` (apply CSS style)
```javascript
console.log("%cThis will be formatted with blue text", "color: blue"); 
// outputs: This will be formatted with blue text [in blue color]
```
We can add as many styles as we wish
```javascript
console.log("%cTry me on!", "color: #FFFFFF; font-size: 45px; background: #333333; text-shadow: #FFF 0px 0px 5px, #FFF 0px 0px 10px, #FFF 0px 0px 15px, #FF2D95 0px 0px 20px, #FF2D95 0px 0px 30px, #FF2D95 0px 0px 40px, #FF2D95 0px 0px 50px, #FF2D95 0px 0px 75px;")
// outputs: a Vegas style super shiny string
```
Styling is not the only thing we can manipulate in the console. We can convert data types (e.g. a number to a string) or output them (e.g. print objects or floats). Just check the examples below.

Example: print a `string` (convert a number to a string)
```javascript
console.log("This will be formatted as a string - %s ", 8999); 
// outputs: This will be formatted as an integer - 8999 
```

Example: print a `string` (convert an array to a string)
```javascript
console.log("This will be formatted as a string - %s ", [78, 89, 1024, 47]); 
// outputs: This will be formatted as a string - Array(4) 
```
*You can't actually interact with the output in the console, so you can't see the content of the array since it's just a string.*

Example: print an `object` 
```javascript
console.log('This is an object %o', { obj: { prop1: 'Hello', prop2: "World" }})
// outputs: this is an object {obj: {…}}
```
*You can interact with the output in the console, expand the object and see its properties*

Example: print an `integer` or a `float`
```javascript
console.log('Integer: %d, Floating point: %.1f', 12, 7.3)
// output: Integer: 12, Floating point: 7.3
```

`LATER EDIT - grouping specifiers`

If we want to use multiple format specifiers at the same time, we can do it like so:

```javascript
console.log("%cThis will be formatted with blue text This will be formatted as a string - %s", "color: blue", 8999)
// outputs: This will be formatted with blue text This will be formatted as a string - 8999 [all in blue color]
```
What we do is basically provide all the format specifiers in the first string and then provide the `arguments`, one by one (in quotes or not, depending on what you're trying to achieve - CSS rules and strings need quotes for example, numbers or arrays don't).