如何在Chrome开发者工具中加载本地source map解析性能录制的混淆方法名

方案1：使用Chrome开发者工具「Override」功能（最推荐） #

• 在本地新建一个空文件夹，用于存放待替换的本地资源
• 打开Chrome开发者工具，切换到「Sources」面板，找到左侧栏的「Overrides」标签（隐藏时可点击「>>」展开更多标签查看）
• 点击「Select folder for overrides」选择新建的空文件夹，在弹出的权限请求中选择「允许」，授予Chrome该目录的读写权限
• 按照录制中关联的外部混淆JS的URL结构，在Override文件夹中创建完全一致的域名→子目录层级，将本地持有的混淆JS、sourcemap文件放入对应目录下，保证文件名、相对路径和线上完全匹配
• 检查混淆JS文件末尾是否有正确的sourcemap关联注释：//# sourceMappingURL=你的map文件名.map，路径不匹配时可手动修改后保存
• 重新将性能录制文件拖入Chrome Performance面板，Chrome会优先加载Override目录下的本地资源，自动读取sourcemap完成反混淆，展示原始方法名。

方案2：修改性能录制文件（无额外配置依赖） #

• 将后缀为.json的性能录制文件用任意文本编辑器打开
• 全局搜索录制中关联的混淆JS外部URL，将所有匹配的URL字符串替换为你本地静态服务对应的JS资源路径（比如http://localhost:8080/xxx.min.js），或者直接替换为本地文件绝对路径
• 也可以提前将sourcemap以base64形式内嵌到混淆JS中，再修改录制文件的资源指向
• 保存修改后的录制文件，重新拖入Chrome Performance面板即可生效。

方案3：本地代理拦截请求 #

• 安装任意本地代理工具
• 新增代理规则，将录制中关联的外部混淆JS的请求，直接映射到本地磁盘中对应的JS+sourcemap文件
• 开启代理后重新打开性能录制文件，Chrome请求资源时会被代理拦截返回本地文件，自动加载关联的sourcemap。

注意事项 #

• 需保证本地持有的sourcemap与录制对应的混淆JS版本完全匹配，否则会出现方法名、行号错位的问题
• 如果反混淆未生效，可以打开Chrome开发者工具「Settings」→「Experiments」，确认Performance: Load source maps for performance profiles选项已开启。

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