JavaScript: How to Power Up Your Logging
Tags: javascript, webdev, programming, beginners
Published: 2022-05-01 20:20:10

Power up your logging and build good developer habits. As your codebase grows you’ll need to debug it more easily. One important tool in debugging is logging. This article focuses on the essential aspects of client-side JavaScript.

To instead learn about logging in Node.js see [Node.js: How to Power Up Your Logging](https://dev.to/simeg/nodejs-how-to-power-up-your-logging-5hf6).

## Client-side logging
For JavaScript, the logging your application will output will be visible in the console in your browser. This is different from server-side logging where logs will be written to a file or sent to a log aggregation server.

It’s important to know that browsers handle logging differently, but the basics are the same. See here how different browsers handle logging:
* Chrome
* Firefox
* Safari
* Microsoft Edge

A [standard](https://console.spec.whatwg.org/#logging) exists on how logging using `console` should work, but [unfortunately, not all browsers respect it](https://github.com/whatwg/console/blob/main/NOTES.md).

Most likely you are already comfortable using `console.log()`, but there are more methods on the `console` object to power up your logging!

## Logging message levels
JavaScript supports different levels of messages. They all work the same but the output looks different. The level of the message conveys different meanings, for example, you should use an `error` level when something went wrong, while the `info` level can be used for more generic logs.

I’m using Google Chrome version 98.0.4758 in my examples.

### `console.log()`
Used for general output. Usually the same level as `info`.

```js
console.log("Look at me -- I'm a simple logline");
```

![console.log output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0mug254lp16zoat6viy.png)
 

### `console.info()`
Usually identical to `log`.

```js
console.info("I look identical to log()");
```

![console.info output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jkjrnp30ggfccwbc9tj8.png) 

### `console.debug()`
Used for verbose logs that you don’t want in your production application log output. This level is special because you need to [activate it yourself](https://support.google.com/chrome/a/answer/6271282?hl=en).

```js
console.debug("Some debug output");
```

![console.debug output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xuxvdd85fsz8d4efxba.png) 

### `console.warn()`
Used for warnings. Formats the message as a warning and in some browsers include a stack trace.

```js
console.warn("Warning! Something might be wrong");
```

![console.warn output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmvnscd4aa8ci2zvk5xo.png) 

### `console.error()`
Used for errors. Formats the message as an error and includes a stack trace.

```js
console.error("Error! Something went wrong");
```

![console.error output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sx9s0qslityonl7bwxvf.png) 

### Log objects like JSON
To make it easier to read your object you can log it with JSON formatting applied.

```js
const obj = { name: "Simon", lang: "JS", colors: ["purple", "blue"] };
console.dir(obj);
```

![Log object like JSON](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwdejx9sw9so58ungt2z.png) 

### Counting things
It may be useful to log how many times a function is invoked, for example. To do this you can call `console.count([label])`. It will log the number of times it’s been called. If no label was provided it will fall back to the `default` label.

```js
console.count();
console.count();
console.count("fruit");
console.count();
console.count("fruit");
```

![Counting things in JS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfoqk8kjxbne50c7avxx.png) 

### Group log messages
Sometimes you might want to log lines that belong together. For this, you can use `console.group(label)` to create log groups. To log the group as collapsed you can use `console.groupCollapsed(label)`.

```js
const label = "Fruit";
console.group(label);
console.info("Apple");
console.info("Pear");
console.info("Banana");
console.info("Orange");
console.groupEnd(label);
```

![Group log messages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fucnnqxh1e9z6sr0bvng.png) 

### Measure time
At some point in your career, you might need to optimize the time your code takes to run. Before knowing what you optimize you want to understand where time is spent. One tool you can use to measure time is `console.time([label])`. This will start a timer that you can then stop and log using `console.timeEnd([label])`.

```js
console.time();
for (var i = 0; i < 100000; i++) {
  let random = Math.floor(Math.random() * i);
}
console.timeEnd();
```

![Measure time in JS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bpz2gmy35s5znjgzrjp.png) 

### Table formatting
To make it easier to read your array you can log it with table formatting.

```js
const array = [
  { name: "Apple", color: "Red" },
  { name: "Banana", color: "Yellow" },
  { name: "Pear", color: "Green" },
  { name: "Orange", color: "Orange" }
];
console.table(array);
```

![Format logs as table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o569yvtexfgtwkrswhcb.png) 

### Conclusion
Client-side logging with JavaScript is straightforward! Using the built-in console object is the preferred way of logging in the browser. There are libraries out there but there’s really no need to use any.

---

_Connect with me on [Twitter](https://twitter.com/prplcode), [LinkedIn](https://linkedin.com/in/simeg), or [GitHub](https://github.com/simeg)_

_Originally published at [prplcode.dev](https://prplcode.dev)_