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?
The obvious solution is to use Console. It gives you much more tools than simple console.log
:
console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
)console.time("Array initialize"); longRunningOperation(); console.timeEnd("Array initialize");
)
(source: google.com)
console.group("Authenticating user '%s'", user); authentication(); console.groupEnd();
)
(source: google.com)
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.