How to mark event in the devtools graph?

Question

I want to "mark" a step in performance tab in chrome devtools.

So I use console.timeStamp to do so. but this function just add a marker within the graph (as you can see the small rect under the tooltip).

What I expected to be is create it in the top of the graph.

Something like this (I mark it by red arrow): This small rect is the console.timeStamp, as I want.

So there is a function that mark the way I describe?

Answer 1

I don't recall if the API for this changed, but at the time of writing, the syntax is performance.mark("some-event"), which will be displayed in the Timings row group in the DevTools performance tab:

In the screenshot, the entries labelled "parseRows-duration" are rendered like so:

performance.mark('parseRows-start');
// work!
performance.mark('parseRows-end');

// (not shown) I'm also logging:
const parseRowsDuration = performance.measure(
  "parseRows-duration",
  "parseRows-start",
  "parseRows-end",
);
console.log(parseRowsDuration);

• https://developer.chrome.com/docs/lighthouse/performance/user-timings
• https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/User_timing