如何编辑已压缩JavaScript源码并在线网站测试调试？

作为有7年iOS开发经验的老手，你对调试工具的逻辑肯定门儿清，只不过Chrome针对Web端压缩代码的调试流程和Xcode有点不一样，别慌，我把最实用的技巧和步骤给你理清楚：

一、优先用Source Map加载原始源码（最理想的情况） #

大多数生产环境的压缩JS都会附带Source Map（就像iOS里的dSYM文件，用来关联压缩代码和原始源码），这是最高效的调试方式：

• 打开Chrome DevTools（快捷键F12或Ctrl+Shift+I，Mac是Cmd+Opt+I），切换到Sources面板
• 在左侧文件树里找到那个压缩的JS文件（通常名字里带.min.js或者被打包在一个大文件里）
• 如果文件右上角有个{}（Pretty Print）按钮，点击它格式化代码。如果网站提供了Source Map，Chrome会自动加载原始的未压缩源码，你能在Sources面板的Page -> webpack://或者对应源码目录下找到和你本地一致的原始文件
• 找到原始文件后，直接在DevTools里编辑代码，按Ctrl+S（Mac是Cmd+S）保存，Chrome会立刻替换当前页面的JS逻辑——甚至不用刷新页面就能看到效果！断点调试也和Xcode一样，点击行号就能加断点，条件断点、日志断点这些功能也都有

二、没有Source Map？这样处理也能调试 #

如果网站没提供Source Map，也不用愁，Chrome照样能让你改代码测试：

• 格式化压缩代码：点击压缩文件的{}按钮，Chrome会把混淆的代码整理成可读性强的结构（虽然变量名还是被压缩成a/b/c，但逻辑结构清晰了），你可以直接在格式化后的代码里修改，保存后生效
• 本地文件替换（Overrides）：如果格式化后还是不好改，右键点击Sources面板里的压缩文件，选择Save for overrides，指定本地一个空文件夹保存这个文件。之后你在本地编辑这个保存的文件，Chrome会优先加载本地修改后的版本，每次刷新页面都会用你的修改，完全摆脱线上代码的限制

三、几个提升效率的小技巧 #

• 禁用缓存：在Network面板里勾选Disable cache（要保持DevTools打开才生效），避免浏览器加载旧的缓存代码，和Xcode里清理缓存一个道理
• Workspace映射本地源码：如果你有本地的原始源码，可以在Sources面板左侧右键点击Filesystem，选择Add folder to workspace，把本地源码文件夹加进去，然后把网站上的文件和本地文件一一映射。这样修改本地文件，Chrome会自动同步到页面，和你在Xcode里写代码运行的体验几乎一致
• 临时加debugger：和iOS里加po或者断点一样，你可以在修改后的代码里加debugger;语句，Chrome会自动停在这一行，方便你查看变量和调用栈

内容的提问来源于stack exchange，提问作者I make my mark