Chrome性能面板Run Microtasks下不显示函数名,如何设置永久显示?
Chrome性能面板固定显示函数名的配置方案
- 开启JavaScript采样:打开性能面板右上角的设置齿轮,勾选
启用JavaScript采样选项,关闭该选项时仅会捕获顶层任务标记,不会展开内部函数调用栈。 - 配置有效Source Map:使用Webpack、Vite等打包工具时,需要在构建配置中开启Source Map生成;同时确认DevTools设置页中
启用JavaScript源映射处于勾选状态,压缩后的匿名函数才能映射为实际业务函数名。 - 调整录制操作逻辑:使用重新加载页面录制功能时,等待页面完全加载、所有交互逻辑执行完毕后再停止录制,避免提前截断调用栈捕获;如果目标函数执行耗时极短,可勾选性能面板设置中的
高精度CPU分析选项提升采样率,避免短执行函数被漏采。 - 开启异步栈跟踪:在DevTools设置页勾选
启用异步栈跟踪选项,Promise、MutationObserver等微任务关联的上层调用栈会被关联识别,不会被统一折叠到Run Microtasks条目下不展开。 - 临时调试替代方案:针对特定逻辑调试时,可在目标函数开头插入
console.trace()语句,或手动打断点触发逻辑后在调用栈面板查看完整调用链,不受性能面板采样概率影响。
内容的提问来源于stack exchange,提问作者Nish
相关产品推荐
相关产品推荐

