Three Tricks for Chrome DevTools to Find Logs More Easily
Tags: webdev, productivity, javascript, beginners
Published: 2022-09-18 15:30:22

Chrome's developer tools are incredibly powerful. Unfortunately, both the console and network tab tend to be filled up with a lot of logs which are rarely looked at, making it difficult to find what you are there to look at.

Today I will show you three tricks of how you more easily can find the information you are searching for. You may have seen the first tip before, but the second and third ones are lesser known tricks I rarely see people use or write about.

## 1. Let Your Logs Stand Out

Make your console logs look beautiful like this.

![Colored console log](https://www.perssondennis.com/images/articles/three-tricks-for-chrome-developer-tools-to-find-logs-more-easily/colored-log.png)
_Colored log in chrome dev tools console_

While it easy to notice, it's a bit verbose to write. You can create a JavaScript utility function for it to make it easy to write.

```javascript
const clog = (log) => console.log(`%c ${log} `, 'background: #ffff00; color: #0012e9');

# Usage
clog("I am colorful!")
```

![Colored console log function](https://www.perssondennis.com/images/articles/three-tricks-for-chrome-developer-tools-to-find-logs-more-easily/colored-log-function.png)
_You can create a shorthand function for colored console logs_

Another alternative is to [create a snippet in VS Code](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets) so VS Code can autocomplete the code for you when you just write a prefix of your choice.

Below you can see two snippets. The first one, with the prefix _clog_, will output a colorful log statement for you when you write _clog_ in a file and autocomplete it with the tab key. The second one, named _vlog_, logs out both a label and a value.

```json
{
  "Colored Console": {
    "prefix": "clog",
    "body": [
      "console.log('%c $1 ', 'background: #ffff00; color: #0012e9');",
      "$2"
    ],
    "description": "Log colored message to console"
  },
  "Colored Value Console": {
    "prefix": "vlog",
    "body": [
      "console.log('%c $1 ', 'background: #ffff00; color: #0012e9', $1);",
      "$3"
    ],
    "description": "Log colored message to console and an additional value"
  }
}
```

## 2. Group Console Messages

Do you have annoyingly many console messages and don't want to remove them? What if I said you can keep them and still hide them? The solution you search for is console.group. In this way you can for example group logs per file or module. Or maybe wrap all logs used for app initialization in a group.

To wrap some logs in a group, simply write _console.group()_ before your logs and _console.groupEnd()_ after the logs. The web console will fold all the logs there in between.

![Console group](https://www.perssondennis.com/images/articles/three-tricks-for-chrome-developer-tools-to-find-logs-more-easily/console-group.png)
_Folded console group in Chrome DevTools console_

And when you expand the group, it looks like this.

![Console group expanded](https://www.perssondennis.com/images/articles/three-tricks-for-chrome-developer-tools-to-find-logs-more-easily/console-group-expanded.png)
_Expanded console group in Chrome DevTools console_

## 3. Filter Network Requests Instead of Searching

The network tab tends to be very bloated in medium and large sized applications, especially when analytics and log requests are sent remotely. As you might already know, you can filter network requests based on their type, e.g., images or AJAX requests (Fetch/XHR). I would guess you even have found the filter field where you can filter network requests.

![Chrome developer tools filter options](https://www.perssondennis.com/images/articles/three-tricks-for-chrome-developer-tools-to-find-logs-more-easily/filter-options.png)
_Filter options under the network tab in Chrome DevTools_

I have seen a lot of persons using the filter field to search for the request they want to view, it's an easy way to ignore all other kind of spam requests. The cumbersome thing about that is that you have to write a filter term every time you want to find a new request.

To avoid that, I instead use the filter field to filter out logs I never am interested to see. To do so, just check the invert button beside the filter box and enter the words you don't want to see. Separate each word with a whitespace.

In the example below, all requests including the terms "inspect" and ".css" are filtered out. You can keep this filter active to always have a clean network log showing only requests you commonly look at.

![Chrome developer tools no filter](https://www.perssondennis.com/images/articles/three-tricks-for-chrome-developer-tools-to-find-logs-more-easily/no-filter.png)
_Example of network tab in Chrome DevTools without a filter_

![Chrome developer tools with filter](https://www.perssondennis.com/images/articles/three-tricks-for-chrome-developer-tools-to-find-logs-more-easily/filter.png)
_Example of the same network tab in Chrome DevTools with a filter filtering out css files and requests with the word "inspect" in its name_

{% embed https://dev.to/perssondennis %}