Menu
Sometimes, it's difficult to tell when a piece of code starts and when it ends. Is it possible to add markers to Chrome's Timeline tool?
417
To access the Performance tab, navigate to the website you want to profile, then open Chrome DevTools by right-clicking and selecting Inspect. Select the Performance tab inside Chrome DevTools. The easiest way to capture a performance profile is by clicking the Start profiling and reload page icon.
To be able to visually identify what was going on when you profiled your website, Timeline is painted in different colors. JavaScript execution time is marked in yellow and it's called Scripting. The purple area shows the Rendering and the green parts of the Timeline show the Painting process.
This is idle time, the time when the browser is waiting on the CPU or GPU to do some processing. It is shown in the pie chart screenshot in the documentation page How to Use the Timeline Tool.
Use console.timeStamp(markName). See https://developers.google.com/web/tools/chrome-devtools/debug/console/track-executions#marking-the-timeline for reference.
156
console.time() and console.timeEnd() now show under Performance's Console section (next to Main, GPU, Network, etc.).
For example:
console.time('Hello world!');
console.time('Hi world!');
setTimeout(() => console.timeEnd('Hello world!'), 1000);
setTimeout(() => console.timeEnd('Hi world!'), 2000);
This looks like this:
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
