Search code examples
javascriptperformancegoogle-chromegoogle-chrome-devtools

How can I display own Events in Chrome dev tools


I would like to measure my application, which is very performance sensitive.

To do so I would like to know if there is an option in the Chrome dev tools or in something else to get a view like it's provided in the Network Tab, but with my own, JS triggered events in it (like the red / blue line).

Is there a way to do so?


Solution

  • The obvious solution is to use Console. It gives you much more tools than simple console.log:

    • Formatting (console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");)

    Formatted message

    • Measuring time (console.time("Array initialize"); longRunningOperation(); console.timeEnd("Array initialize");)

    Measuring time
    (source: google.com)

    • Grouping (console.group("Authenticating user '%s'", user); authentication(); console.groupEnd();)

    Grouping
    (source: google.com)

    • Marking events on the timeline (console.timeStamp("Adding result");)

    Marking the timeline
    (source: google.com)

    This should be more than enough to create readable log of custom events. See the official docs for more tips on using the Console.