如何调试线上项目的代码

我们知道，通常生产环境的前端代码是经过混淆压缩的，代码本身难以阅读，但有时候排查线上 bug 需要对线上项目的代码进行调试。那么如何调试线上项目的代码呢？这边介绍两种方法。

我们知道，生产环境通常会使用 uglifyJS 或者 terser 进行混淆压缩，但是这些压缩工具并不会做程序流分析，因此并不是所有的变量名、方法名都会被压缩。例如模块中有一个向外导出的方法，为确保其他模块能正常调用，这个方法名不会做混淆处理，只有该模块内部的变量名、方法名才会混淆压缩。或者在代码中的字符串字面量，也不会进行压缩（这好像没法压缩吧）。

具体的压缩处理，可以参考：https://github.com/terser/terser#compress-options

我们可以利用这个特点，在压缩后的代码中搜索特定的方法名、变量名、字符串等等。那我们到哪里去搜索呢？我们知道，生产环境为了提升页面首屏性能，以及充分利用缓存，一般会做 code splitting，即对构建产物进行分包处理，这会导致浏览器加载多个 chunk 。我们可以在 top 这边右键 “Search in all files” 搜索： 或者在某个目录下右键 “Search in folder” 搜索： 找到需要调试的代码之后，通常文件被压缩成一行了，没法阅读，也不能加断点。这时候我们可以点左下角的按钮，对压缩后的代码进行美化： 美化就是给代码添加换行缩进，便于阅读和调试，这样就可以愉快地打断点调试了。

上面这样虽然可以调试，但是由于很多变量名、方法名都被混淆压缩了，除了这些之外，babel 等编译工具还会对 ES2015+ 的语法进行语法转换，导致代码可读性降低。如果使用 sourceMap，就可以映射到源码了。我们知道，在生产环境中，一般会关闭 sourceMap，这样提升构建性能，也能防止源码泄露。这种情况下怎么使用 sourceMap 呢？我们找到需要调试的代码，右键 “Add source map” 这边需要我们提供一个 sourceMap 的 URL： 这个 URL 怎么指定呢，我们点击 Filesystem，然后点击 Add folder to workspace，把当前项目的根路径添加进去： 添加之后，我们找到 sourceMap 文件，右键复制链接地址： 然后把链接粘贴到刚才的输入框中，导入 sourceMap 文件，这样就可以直接搜索项目的源文件了： 这样就可以直接给源码加断点调试了： 需要注意一个问题，上面这样做的前提是，Webpack 的 devtool 选项需要做如下配置：

上面这样配置会生成完整 sourceMap 文件，只不过不会在构建后的代码最后生成一个 sourceMapURL 的引用链接。而且导入的 sourceMap 必须和构建后的代码要能对应，否则会导致源码无法正确映射。

一般会配置 sentry 日志收集上报，然后在监控平台通过 sourceMap 定位到源码，这样可以复现生产环境报错，不用直接去调试源码。