【CSDN】十大必须掌握的 Chrome 浏览器开发者工具

Chrome 提供的一些调试功能，在排查代码故障时非常有帮助。事实上，由于谷歌浏览器提供的调试工具太多，很多都被隐藏了起来，等待你去探索。
声明：本文已获作者Ferenc Almasi翻译授权。

本文插图
作者 | Ferenc Almasi
出品 | CSDN（ID：CSDNnews）以下为译文：
Chrome DevTools（开发者工具）团队每月（https://developers.google.com/web/updates/capabilities）都会在他们的网站上发布更新，你也可以在他们的官方 Twitter 账户（https://twitter.com/chromedevtools）上找到一些很棒的提示。如果你想了解更多关于 Chrome 提供的工具的信息，我强烈推荐查看这两个信息来源。
在这篇文章中，我收集了 10 个我经常使用但是别人可能不知道的功能。它们帮助我简化了工作流程，可以在更短的时间内完成更多的工作。
日志保持这里先从在控制台中保持日志说起。假设在重新加载页面之前或导航发生时出现了问题，你会尝试登录控制台，但所有内容都被清除了。解决方法很简单，但我很久以前就不知道了：

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

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

本文插图
为 DOM 节点操作添加断点
代码覆盖率
有时候我们对代码进行性能优化，会导致很多代码没有用了但是还没及时清除。在覆盖工具的帮助下，你可以分析资源并查看哪些行没有执行。如果你关注的不是所有交互，只执行你所关注的交互操作有助于你获取准确的覆盖率。你可以点击 Ctrl + Shift + P 打开工具面板，然后点击重新加载图标开始记录，所有以红色显示的内容都不会被执行。

本文插图
使用 DevTools 查看代码覆盖率
展示重新绘画
不必要的重绘也会导致性能问题。假设你的页面上有一个倒计时，每次更新都会导致整个页面重新绘制。你可以通过在 Render 选项卡中启用 "paint flashing" 来解决这些问题，并查看哪些元素触发了这些问题。同样， Ctrl + Shift + P 会弹出工具栏。

本文插图
在 Rendering 选项卡上启用重新绘制
动画审查
既然上面讨论了渲染，那么让我们来看看如何调试 CSS 动画。用 Ctrl + Shift + P 打开工具菜单，输入“ animation” 它将为你打开动画标签，这将记录任何发生在网站上的动画。你可以重播它们，看看它们的宽松程度，然后根据时间或持续时间调整：

本文插图
在 DevTools 中调试动画