让我们分享今天Chrome Devtools的10个实用调试功能！
当我们刷新页面时，通常会清空控制台的控制台面板。如果要保留控制台的日志，则可以在设置中检查“保存日志”选项以将日志保留在控制台中。
我们可以打开设置并在中间检查选项。
单击面板下方面板中的红色按钮以记录页面的代码覆盖范围：
代码覆盖范围使用动态分析方法在运行时收集代码的覆盖范围，以便开发人员知道页面上存在真正的用途。DYNAGINAGIC分析是指根据应用程序应用程序收集代码执行数据的过程。
在浏览器的开发人员工具中，您可以使用显示重新启动选项来检查执行操作时将重新绘制哪些元素。
在控制台右上角的三个点中的选项中打开选项卡：
在“渲染”选项卡中打开：
刷新页面后，再次显示绿色区域。
Chrome的开发人员工具不仅可以调试样式，还可以调试动画。控制台右上角的三个点中的选项可以打开选项卡：
执行页面的动画时，将在轨道上查看所有动画。单击其中一个动画以了解执行过程和时间表：
我们可以在时间轴上的任何时间定位动画框架，也可以在左侧和右端拖动点以修改动画的延迟和周期。修改后，我们可以在属性面板上看到相应的CSS样式。
Chrome浏览器具有构建的屏幕快照函数，可在浏览器开发器工具（Windows）或（Mac）快捷键中使用以打开搜索：
这里有四个选项：
屏幕截图完成后，自动下载到下载目录，打开浏览器的下载框或计算机的下载目录以查看图片。
我们可以使用本地资源使用的资源来涵盖网页。例如，我们可以使用本地CSS文件来覆盖网页的CSS文件以修改样式。将本地折叠键入网络，并且Chrome Developer函数中CSS样式的修改将直接更改本地文件。该页面已重新加载。所使用的资源也是实现持续效果的本地资源。
有关详细信息：https：//developer.chrome.com/blog/new-inew-inew-indevtools-65/＃覆盖
Chrome浏览器为我们提供了全局搜索的概念。您可以单击开发人员工具右上角的三个点，单击搜索选项，搜索搜索面板中所需的关键字。代码行：
原始：https：//juejin.cn/post/7096438562874195999
有时，当用户交互时，应用程序发生。目前，我们可以添加一个事件监视器以添加断点以捕获这些事件以在交互时检查问题。您可以检查面板右侧的相应事件：
当页面的内容更改时，如果您想知道哪些脚本会影响它，则可以为DOM设置断点。我们可以正确单击需要设置需要设置的DOM元素，然后单击POP -UP菜单中选择适当的断点。
可以看出，突破有三个选择：
原始：https：//juejin.cn/post/7096438562874195999