本文介绍了如何在生产环境中使用 Chrome Debugger 对前端应用进行调试，包括快速定位错误来源、搜索关键字、debug 混淆代码、利用 sourceMap 和 local overrides 功能实时修改并查看代码效果。通过这些技巧，可以高效地处理生产环境中的问题。
导言：
开发环境 debug 是每个程序员上岗的必备技能。生产环境呢？虽然生产环境 debug 是一件非常不优雅的行为，但是由于种种原因，我们又不得不这么干。
那我们今天讲一讲如何使用 chrome 在生产环境进行 debug 。
生产环境 debug 步骤
生产环境 debug 需要几步？这问题和“把大象装进冰箱拢共分几步”一样简单。
第一步，把冰箱门打开。F12 打开 devTools；
第二步，把大象装进冰箱。找到需要 debug 的前端文件，格式化，打断点，调试上下文，定位问题；
第三部，关闭冰箱门。解决问题。
如何快速定位错误是前端还是后端接口返回的？
在把大象装进冰箱之前，先初步判断下，是否真的需要由你将大象装进冰箱。
首先我们需要判断，错误是前端还是后端报的，那么如何快速判断？
方案一：根据对代码的实现的了解，判断报错属于前端还是后端。
这个方案前提是需要你对代码实现很熟悉，也是最简单的方式。
方案二：前端代码全局搜索关键字，工程代码里搜索/控制台打开搜索。
对应工程 gitlab 或者 vscode 或者 devTools global
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
