关键是要将断点与性能测量解耦：先用断点定位逻辑位置，再插入performance.mark()和performance.measure()获取微秒级耗时；避免断点干扰，需连续执行并配合Performance面板和PerformanceObserver验证优化。
在浏览器断点调试过程中做性能分析，关键不是“边断点边计时”，而是把断点和性能测量解耦——先用断点精确定位逻辑位置，再在对应代码段插入 performance.mark() 和 performance.measure() 来获取高精度耗时，两者配合才能既看清执行流，又拿到可信数据。
在断点位置前后打性能标记
断点本身不记录耗时，但它是你插入性能标记的最佳提示点。比如你在某个函数入口设了断点，暂停后确认逻辑正确，就可以手动补上标记：
- 在断点所在行上方加
performance.mark('api_start'); - 在函数结束前、或下一个关键节点前加
performance.mark('api_end'); - 接着立即调用
performance.measure('api_total', 'api_start', 'api_end'); - 然后运行
performance.getEntriesByName('api_total')[0]?.duration查看结果（单位：毫秒，精度达微秒级）
避免打断点干扰 performance 测量
频繁单步执行或长时间暂停会拉长真实耗时，导致 performance.mark() 记录的不是纯代码执行时间，而是“人+机器”混合耗时。所以：
- 打完标记后，直接点击“Resume script execution”（F8）让代码连续跑完，不要逐行 Step Over
- 不要在循环体内部设断点再打标记，容易重复记录或触发内存警告
- 开发阶段可加守卫：
if (location.hostname === 'localhost') { performance.mark(...); }
用 Performance 面板验证断点处的长任务
如果你怀疑某段被断点暂停过的代码实际运行很慢，可以切换到 Chrome DevTools 的 Performance 面板：
立即学习“Java免费学习笔记（深入）”；
- 点击 Record（录制），复现操作（如点击按钮触发该函数）
- 停止录制后，在 Main 线程火焰图中查找红色长条（>50ms 的 Long Task）
- 点击该长任务，右侧 Summary 会显示具体函数名和耗时，双击还能跳转到源码行
- 如果它和你设断点的位置一致，说明这里确实是性能瓶颈，需优化逻辑或拆分任务
结合 PerformanceObserver 自动捕获测量结果
不想每次手动查 getEntriesByName？可以用观察者自动响应：
- 在调试脚本开头加一段监听代码：
new PerformanceObserver(list => { list.getEntries().forEach(entry => { if (entry.name === 'api_total') console.log('接口耗时:', entry.duration.toFixed(2), 'ms'); }); }).observe({ entryTypes: ['measure'] });- 这样只要执行过
performance.measure('api_total', ...)，控制台就会立刻打印结果，无需手动取值
