嘿，这个需求我之前刚好研究过！你提到的console.timeStamp确实只会在调用它的上下文轨道里生成小矩形标记，但想要那种横跨Performance面板顶部的全局标记（就是你用红色箭头标注的样式），有两个实用的方案：

1. 代码触发（适合自动化标记关键步骤） #

使用标准的Performance API里的performance.mark()方法，这是专门用来在性能 timeline 中添加自定义标记的API，生成的标记会显示在顶部的独立轨道里。

示例代码 #

在你想要标记的关键步骤处插入：

// 标记「结算流程开始」
performance.mark('checkout-initiated');

// 执行完支付操作后标记「支付完成」
performance.mark('payment-success');

如何在DevTools中查看 #

录制Performance数据后：

• 确保面板左侧的「User Timing」选项被勾选（默认可能隐藏，需要在「More tools」里找到或者直接搜索）
• 此时你添加的标记会出现在顶部的「User Timing」轨道中，就是你想要的那种横跨整个时间轴的全局样式，点击标记还能查看详细的触发上下文。

如果需要关联两个标记的时间差，可以额外使用performance.measure()：

// 计算从结算开始到支付完成的耗时
performance.measure('checkout-to-payment', 'checkout-initiated', 'payment-success');

2. 手动添加（临时调试用） #

如果只是临时调试，不需要代码侵入，可以直接在Performance录制过程中：

• 点击面板右上角的「Add mark」按钮（带加号的时钟图标）
• 手动添加全局标记，这就是你截图里红色箭头指向的那种样式，还可以给标记自定义命名。

注意事项 #

• 确保你的Chrome DevTools是较新版本，Performance API的支持很完善，但旧版本可能有显示问题
• 如果performance.mark()的标记没出现在顶部，检查「User Timing」轨道是否被隐藏了

内容的提问来源于stack exchange，提问作者Jon Sud