前端开发Chrome开发中调试工具总结

在公司工作几个月来，作为一个转岗做前端的程序员，在遇到bug进行定位的时候十分头疼，看着公司大佬使用Chrome调试工具轻松定位bug，决定要好好学习一下Chrome的开发者调试工具，下面总结一些常用的调试方法。

快捷键：Ctrl + Shift + I，或者通过鼠标右键点击检查进入开发者工具。

事件监听器的断点

通常，当用户交互发生时会出现问题。捕捉这些事件来检查在交互中运行的位置和内容非常有帮助。幸运的是，我们可以通过访问 Sources 选项卡，用 Ctrl + P 打开一个 js 文件，并检查其中的相关事件：

DOM 操作的断点

对于 DOM 操作也可以添加断点。通常可以断点在某节点接收到属性更改上，例如添加了某个 class 。在一个大型代码仓库中搜索相关代码将耗费大量时间，其实你可以简单地为元素添加一个断点，然后剩下的交给 DevTools 处理。

黑盒

假设你正在调试一个问题，并且你的代码中有两个断点。你正在进行堆栈跟踪，你会发现堆栈信息中大多数来自核心框架文件，如 React 或 jQuery。为了避免在调试器中包含这些核心文件，你可以对它们进行黑盒处理，这意味着 DevTools 将跳过这些文件，以便你可以专注于自己的代码。

Lighthouse

我发现自己一直在使用 Lighthouse 面板，这是为了审计你的网站在各种指标：性能，PWA，可访问性，或搜索引擎优化。你还可以选择审计不同的设备以及模拟网络连接，它为你提供了哪些可以改进以及如何改进的参考。你可以在“Audits” 选项卡下进入“灯塔”，如果你没有看到标签，只需点击锯齿符号来显示隐藏的标签。

生成报告后，可以将结果保存为 JSON 文件，稍后导入以进行比较。