前端工程师生产环境 debugger 技巧

导言：

开发环境 debug 是每个程序员上岗的必备技能。生产环境呢？虽然生产环境 debug 是一件非常不优雅的行为，但是由于种种原因，我们又不得不这么干。

那我们今天讲一讲如何使用 chrome 在生产环境进行 debug 。

生产环境 debug 步骤

生产环境 debug 需要几步？这问题和“把大象装进冰箱拢共分几步”一样简单。

第一步，把冰箱门打开。F12 打开 devTools；

第二步，把大象装进冰箱。找到需要 debug 的前端文件，格式化，打断点，调试上下文，定位问题；

第三部，关闭冰箱门。解决问题。

如何快速定位错误是前端还是后端接口返回的？

在把大象装进冰箱之前，先初步判断下，是否真的需要由你将大象装进冰箱。

首先我们需要判断，错误是前端还是后端报的，那么如何快速判断？

方案一：根据对代码的实现的了解，判断报错属于前端还是后端。

这个方案前提是需要你对代码实现很熟悉，也是最简单的方式。

方案二：前端代码全局搜索关键字，工程代码里搜索/控制台打开搜索。

对应工程 gitlab 或者 vscode 或者 devTools global