今天给大家分享10个ChromeDevTools调试好用的功能！1.保留日志当我们刷新页面时，通常控制台的Console面板会被清空。如果想保留控制台的日志，可以勾选设置中的Preservelog选项，将日志保留在控制台中。2.Codecoverage我们可以打开设置，勾选Experiments中的Recordcoveragewhileperformancetracing选项。点击面板下方Coverage面板中的红色按钮，记录页面的代码覆盖率：代码覆盖率采用动态分析的方式收集代码在运行时的覆盖率，让开发者知道页面上有实际使用的代码页。动态分析是指在应用程序运行时收集代码执行数据的过程。换句话说，覆盖率数据是在代码执行期间通过标记收集的。3、显示重绘在浏览器的开发者工具中，可以开启显示重绘选项，查看页面执行操作时哪些元素会被重绘。在控制台右上角三个点的Moretools选项中开启Rendering选项卡：在Rendering（渲染）选项卡中开启Paintflashing：页面刷新时，绿色区域为重绘区域。4、查看动画Chrome的开发者工具不仅可以调试样式，还可以调试动画。可以在控制台右上角三个点的更多工具选项中打开Animations选项卡：当页面的动画执行时，会及时查看轨道上的所有动画，点击其中一个动画了解执行过程和时间轴：我们可以在时间轴上随时定位动画帧，或者拖动左右两端的圆点来修改动画的延迟和周期，修改后可以看到对应的属性面板中的CSS样式。5.截图Chrome浏览器内置截图功能，可以在浏览器开发者工具中使用快捷键Ctrl+Shift+P（Windows）或Command+Shift+P（Mac）打开搜索查找截图：这里有四种选择：第一种：截取自选区域；第二种：拦截整个网页；第三种：拦截当前节点；第四：拦截当前屏幕。截图完成后会自动下载到下载目录。打开浏览器的下载框或本机的下载目录即可看到图片。6.LocalOverrides我们可以使用本地资源覆盖网页使用的资源，比如我们可以使用本地的CSS文件覆盖网页的css文件，修改样式。将本地文件夹映射到网络，在Chrome开发者功能中修改CSS样式会直接改变本地文件，页面重新加载，使用的资源也是本地资源，达到持久化的效果。有关详细信息，请参阅：https://developer.chrome.com/blog/new-in-devtools-65/#overrides7。全局搜索代码Chrome浏览器为我们提供了全局搜索的概念，可以点击开发者工具右上角的三个1点，点击搜索选项，在搜索面板中搜索需要的关键字，点击搜索result跳转到对应文件的代码行：8.事件监听断点有时候应用在用户交互的时候会出现问题，这时我们可以添加事件监听器，添加断点来捕获这些事件，检查交互问题。可以在Source面板右侧的EventListenerBreakpoints中查看对应的事件：9.DOM操作断点当页面内容发生变化时，如果想知道哪些脚本影响了它，可以为DOM。我们可以右击需要设置断点的DOM元素，在弹出的菜单中点击Breakon，选择合适的断点。可以看到，Breakon中有3个选项：SubtreeModifications：子树（内容，属性）修改通知，常用于子节点内容变化后定位源码；AttributesModifications：当前节点的属性修改通知，一般在node中用到，节点的className等属性修改后，定位到源码；NodeRemoval：当前节点移动时通知，常用于节点移除时定位源码。10.异步请求断点异步请求断点可以使用XHR断点，点击加号添加断点规则，输入请求的URL地址（片段），请求地址中会发送包含对应字符串的异步请求位置自动停止：
