前言
正常来说我们都会在开发环境debug，避免将有bug的代码部署上线。但由于一些原因，比如某些bug只在生产环境才会出现。所以我们不得不在生产环境进行debug。
生产环境debug大致流程
- F12打开浏览器的devTools。
- 找到需要产生问题的前端文件，格式化，打断点，调试上下文，定位问题并找出解决方法。
定位错误产生原因
debug前首先需要确认错误的产生原因，确认其是前端代码编译后产生的错误还是由于后端接口的数据导致的。
\
以下是快速进行错误判断的方法：
- 根据出现问题的地方，前端代码在IDE开发工具中全局搜索相关的关键字。
- 查看浏览器network面板中的网络请求，确认相关接口的状态码和返回数据是否正确。
- 使用network search根据关键字搜索接口详细信息（包括接口返回的信息）。
定位问题相关代码
方法一：关键字查找
1.在浏览器的network面板中输入问题代码处的相关的（编译后的）关键字，查找到相关接口后，可以看到代码所在的编译打包后的chunk文件。
在开发者工具的network面板输入ctrl + f :
2.在source面板中找到搜索到的chunk文件，格式化后按ctrl+f再次搜索之前的关键字。
方法二：根据相关接口查找问题代码文件
如果出现问题的相关代码处有发送网络请求，就可以在浏览器的network面板中选择展示Initiator(打包后的文件名），逐个找出压缩混淆后的问题代码文件，通过搜索关键字定位到问题代码处。
关键字填什么？
1.报错信息。
如果页面存在报错信息，且该提示信息写在是问题相关前端代码处的错误提示信息，提示信息一般写成字符串，在代码压缩混淆后通常会保留原文。代码压缩混淆可能会对中文进行unicode编码，如果搜索中文，需要先将中文转为unicode码。
2.特殊字符
如果问题相关代码附近使用了特殊字符，可以使用特殊字符进行搜索。如果特殊字符是中文字符，需要转为unicode后再进行搜索。
3.压缩混淆后仍然保留的关键代码，或者向外暴露的方法名。
Debug混淆后的js
生产环境的js代码都是经过了压缩混淆的，这极大地增加了我们调试的难度，虽然也有部分代码能够看懂。生产环境的代码经过了构建编译和压缩混淆，原来我们写下的函数名，变量名，字面量等大多被替换成了a,b,c,d这些字母。
在生产环境使用sourcemap调试
为了方便查看代码和调试，我们可以将本地sourcemap和生产环境中构建的代码进行关联。(需要先在本地生成好sourceMap 文件，webpack打开sourceMap配置，本地执行构建命令构建好后会生成sourceMap文件）
\
步骤：
- F12打开浏览器开发者工具的Sources面板。选择问题代码文件，右键菜单处点击Add source map...
- 通过 file 协议选择本地的 map 文件,先在浏览器地址栏中输入确保可以访问到。
3.关联上source map后就可以看到源码了。
生产环境如何修改代码调试（以chrome为例）
开发过程中，我们在IDE修改了代码直接在浏览器就可立马看到更新后的效果，但在生产环境该如何做呢？这里以chrome浏览器举例。
使用chrome的 local overrides
local overrides 是chrome 65更新的一个功能，使用我们自己的本地资源覆盖网页所使用的资源，即通过设置一个本地目录保存我们修改过的文件，再次加载页面时对应的文件会读取本地的修改过的文件。如可以使用本地css文件覆盖网页的css文件，修改样式。
使用 local overrides
- 搭建local overriders的根目录， D:/Dev/Web/chromelocal，
- 打开chrome 开发者工具， sources --> Overrides --> 勾选 Enable Local Overriders --> 点击 Select folder for overrides ,选择文件 D:/Dev/Web/chromelocal
最后，打开文件修改，修改完成后保存，重新刷新页面后，执行的就是更新后的代码了。
tips：
1.原js文件直接 format 是无法修改的；在代码 format 之前先添加无效代码进行代码变更进行保存，然后再 format 就可以修改；
2.HTML和CSS代码都需要在source面板中修改才能进行保存。
