CODEWITHSUNDEEP
javascriptperformancegoogle-chromegoogle-chrome-devtools
Daniel Schmidt
Daniel Schmidt

Reputation: 11921

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?

Upvotes: 4

Views: 1463

Answers (1)

Konrad Dzwinel
Konrad Dzwinel

Reputation: 37903

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.

Upvotes: 13

Related Questions