Dennis Persson

Three Tricks for Chrome DevTools to Find Logs More Easily

(3 minutes reading)

    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 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.

    const clog = (log) => console.log(`%c ${log} `, 'background: #ffff00; color: #0012e9');
    # Usage
    clog("I am colorful!")

    Colored console log function You can create a shorthand function for colored console logs

    Another alternative is to create a snippet in VS Code 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.

      "Colored Console": {
        "prefix": "clog",
        "body": [
          "console.log('%c $1 ', 'background: #ffff00; color: #0012e9');",
        "description": "Log colored message to console"
      "Colored Value Console": {
        "prefix": "vlog",
        "body": [
          "console.log('%c $1 ', 'background: #ffff00; color: #0012e9', $1);",
        "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 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 before your logs and console.groupEnd() after the logs. The web console will fold all the logs there in between.

    Console group Folded console group in Chrome DevTools console

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

    Console group expanded 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 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 Example of network tab in Chrome DevTools without a filter

    Chrome developer tools with filter 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

    Knowledge Should Be Free

    Dennis Persson

    I'm doing this for free because I like to contribute to the world. I think that's the right way, knowledge should be free. Nevertheless, people must make money in some way to live and the money must come from somewhere. My way of ensuring that people can keep on sharing knowledge for free is to pay for the content I appreciate, so they can continue doing whatever awesome things they are doing. If you are like me, please consider donating some money so I can keep on blogging. It doesn't have to cost more than a coffee!

    Buy Me A Coffee