如何在Chrome DevTools为Node.js V8 CPU profile关联SourceMap

你已经可以正常将Node.js Inspector生成的.cpuprofile文件加载到Performance面板的前提下，按以下步骤操作即可完成source map关联，解析被预处理器处理过的调用栈：

前置准备 #

• 确认你本地持有的构建后JS文件、对应source map文件版本，和生成CPU profile时生产环境运行的代码版本完全一致，版本错位会导致映射完全失效。
• 确认构建后JS文件末尾的//# sourceMappingURL=注释指向的相对路径，和本地存放.map文件的路径匹配；如果生产构建时移除了该注释，手动在本地对应JS文件末尾补上正确的相对路径注释即可，无需修改生产环境配置。

具体操作步骤 #

• 打开Chrome DevTools，进入Sources面板，点击左侧文件导航栏顶部的「Add folder to workspace」选项，选择你本地存放构建产物+对应source map的根目录，在Chrome顶部弹出的权限确认弹窗中点击允许，授予DevTools访问该本地目录的权限。
• 切换到Performance面板，点击面板左上角的上传按钮，导入目标.cpuprofile文件，等待火焰图、调用栈数据完全渲染完成。
• 回到Sources面板，按下快捷键Ctrl+P（macOS系统按Cmd+P）调出文件快速搜索框，搜索CPU profile中出现的经过预处理器处理的编译后JS文件名，在Sources面板中打开该文件：
  • 如果DevTools自动识别到了对应source map，文件编辑区会直接显示原始源码内容
  • 如果未自动识别，右键点击文件编辑区空白处，选择「Add source map」选项，手动选中本地对应的.map文件完成关联
• 关联完所有涉及的编译后JS文件的source map后，切回Performance面板，点击面板工具栏上的环形重载图标（注意不要刷新整个浏览器页面），等待性能数据重新渲染，此时火焰图、函数调用栈中的混淆后函数名、位置信息就会被自动映射为原始源码对应的内容。

常见异常排查 #

• 重载后仍显示混淆后栈信息：检查workspace挂载的目录路径是否正确，确认sourceMappingURL指向的.map文件可以被DevTools正常读取，无本地文件权限问题。
• 映射后函数名和源码对不上：核对本地构建产物、source map的版本和生成profile时的线上运行版本是否完全一致，不同版本的source map没有映射价值。
• 部分栈解析失败：确认该部分栈对应的JS文件都完成了source map关联，没有遗漏文件。

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