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

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

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

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