Chrome CPU Profile无法保留Sourcemap信息？求解决方法

这个问题我之前也踩过坑——Chrome实时捕获Profile时会自动读取当前页面的Sourcemap来显示原始代码，但保存的.cpuprofile文件只记录了编译后代码的位置（比如打包后的bundle.js行号），并没有存储Sourcemap的路径或内容，所以重新加载时就找不到映射关系了。下面是几个实用的解决办法：

方法一：依赖原网页的Sourcemap（简单快捷） #

如果不需要离线使用Profile，这是最省事的方式：

• 先打开你当初捕获Profile的原始网页，等待页面完全加载完成，确认DevTools的Sources面板里已经能看到正确的原始源文件（说明Sourcemap已经被Chrome加载成功）。
• 打开DevTools的Performance面板，点击左上角的「Load profile」按钮，选择你保存的.cpuprofile文件。
• 此时Chrome会自动复用当前页面已加载的Sourcemap，把Profile里的编译后代码位置重新映射回原始源文件。

注意：不要清除浏览器缓存，也不要修改网页或Sourcemap的文件路径，否则Chrome找不到对应的映射资源。

方法二：手动嵌入Sourcemap到Profile文件（支持离线使用） #

如果需要离线查看Profile，或者无法再访问原始网页，可以把Sourcemap直接嵌入到.cpuprofile里：

1. 找到对应编译后文件的Sourcemap（比如bundle.js.map），打开它并复制全部JSON内容。
2. 用文本编辑器打开你的.cpuprofile文件，找到"modules"数组——这个数组里的每个对象对应一个编译后的代码文件。
3. 找到你需要映射的模块对象，在里面添加一个"sourceMap"字段，值就是你刚才复制的Sourcemap JSON内容。
   举个修改后的例子：

   {
     "id": 0,
     "name": "bundle.js",
     "url": "http://localhost:3000/bundle.js",
     "lineCount": 1234,
     "sourceMap": {
       "version": 3,
       "sources": ["src/index.ts"],
       "names": [],
       "mappings": "AAAA,...",
       // 这里是完整的Sourcemap内容
     }
   }
   

4. 保存修改后的.cpuprofile文件，再加载到Chrome DevTools里，就能直接看到原始源文件的位置了。

方法三：用第三方工具自动关联（高效批量处理） #

如果有多个Profile需要处理，或者不想手动编辑JSON，可以用Node.js工具自动注入Sourcemap：

• 首先安装工具：npm install -g chrome-profile-sourcemap
• 运行命令关联Sourcemap：

  chrome-profile-sourcemap input.cpuprofile output.cpuprofile --sourcemap bundle.js.map
  

• 工具会自动把Sourcemap的映射信息注入到输出的Profile文件里，之后加载output.cpuprofile就能直接看到原始代码位置。

额外注意事项 #

• 确保你的Sourcemap是完整且未损坏的，否则Chrome无法正确解析映射关系。
• 如果代码经过多轮编译（比如TS→JS→压缩），一定要使用最终编译步骤对应的Sourcemap，否则映射会出错。
• 大型Sourcemap嵌入后会让.cpuprofile文件体积变大，注意存储空间。

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