如何将Chrome Profiler与控制台日志关联或在时间线上添加标记？

两个需求都可以通过浏览器原生API实现，不需要额外引入依赖：

主动在性能面板生成自定义标记 #

使用Performance API的标记方法即可在性能时间轴上插入自定义标识：

• 单点标记：在你需要定位的代码位置调用performance.mark('自定义标记名')，比如可以在渲染逻辑的前后分别插入performance.mark('瀑布流渲染开始')、performance.mark('瀑布流渲染结束')。录制性能剖面后，所有自定义标记会集中展示在性能面板的Timings轨道下，和页面帧、系统事件的时间轴完全对齐，直接和你观测到的异常帧时间点比对，就能快速定位到对应的代码执行阶段。
• 耗时统计：如果需要计算两个标记点之间的执行耗时，可以调用performance.measure('阶段描述', '起始标记名', '结束标记名')，统计得到的耗时结果也会同步显示在Timings轨道中。

同步性能面板时间戳与控制台日志 #

有两种方案可以实现两者时间完全对齐：

• 调用console.timeStamp('自定义标记名')，该方法执行时会同时在控制台输出对应日志、在性能面板时间轴上添加同名标记，两者的时间戳完全一致。你可以根据异常帧的位置直接找到对应时间段的控制台日志，也可以通过控制台日志反向定位到性能面板的对应时间区间。
• 如果需要给普通console日志绑定性能时间基准，可以在输出日志时带上performance.now()的返回值。该值是页面初始化完成到当前时刻的毫秒数，和性能面板使用的时间基准完全相同，示例写法为console.log('接口数据返回完成', performance.now())，把日志中的时间值和性能面板的时间轴比对即可精准对应。

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