How can I display own Events in Chrome dev tools

Question

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?

Answer 1

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");)

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

_{(source: google.com)}

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

_{(source: google.com)}

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

_{(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.