如何在开发工具图中标记事件？

Question

我想在 chrome devtools 的性能选项卡中“标记”一个步骤。

所以我用

console.timeStamp

来做到这一点。但这个函数只是在图表中添加一个标记（正如您可以看到工具提示下方的小矩形）。

我期望的是在图表的顶部创建它。

像这样的东西（我用红色箭头标记）： 这个小矩形就是

console.timeStamp

，如我所愿。

那么有一个函数可以标记我所描述的方式吗？

Answer 1

我不记得此 API 是否已更改，但在撰写本文时，语法为

performance.mark("some-event")

，它将显示在 DevTools 性能选项卡的 Timings 行组中：

在屏幕截图中，标记为“parseRows-duration”的条目呈现如下：

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