大家好，我叫CUGGZ。今天我将分享ChromeDevTools中一些非常有用的功能和调试技巧！1、保留日志当我们刷新页面时，通常控制台的Console面板会被清空。如果想保留控制台的日志，可以勾选设置中的Preservelog选项，将日志保留在控制台中。2.Codecoverage我们可以打开设置，勾选Experiments中的Recordcoveragewhileperformancetracing选项。点击面板下方Coverage面板中的红色按钮，记录页面的代码覆盖率：代码覆盖率采用动态分析的方式收集代码在运行时的覆盖率，让开发者知道页面上有实际使用的代码页。动态分析是指在应用程序运行时收集代码执行数据的过程。换句话说，覆盖率数据是在代码执行期间通过标记收集的。3、显示重绘在浏览器的开发者工具中，可以开启显示重绘选项，查看页面执行操作时哪些元素会被重绘。在控制台右上角三个点的Moretools选项中打开Rendering选项卡：开启Rendering（渲染）选项后，开启Paint闪烁：页面刷新时，绿色区域为重绘区域.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地址（片段），请求地址中会发送包含对应字符串的异步请求位置自动停止：11.CSSOverview在Chrome管理面板中，打开CSSOverview面板后，可以查看当前网站的样式信息，包括颜色信息、字体信息、媒体查询等，这个功能在使用时就派上用场了我们需要优化页面的CSS。此外，您还可以通过该功能轻松查看其他优秀网站的风格信息。默认情况下，此面板未启用。您可以通过以下步骤开启该功能：在任意页面打开Chrome浏览器的DevTools；单击更多选项->更多工具->CSS概述。那么如何使用CSSOverview面板呢？非常简单，只需要点击Captureoverview按钮就可以生成页面的CSS概览报告。如果要重新运行CSSOverview，只需单击左上角的清除图标，然后单击Captureoverview按钮。CSS概览报告主要由五个部分组成：（1）概览摘要：页面CSS的高级摘要（2）颜色：页面中的所有颜色。颜色按背景颜色、文本颜色等目的分组。它还显示具有低对比度问题的文本。每种颜色都是可点击的。我们可以单击它以获取使用该颜色的元素列表。将鼠标悬停在列表中的元素上将突出显示页面上的相应元素。单击列表中的元素会在“元素”面板中打开该元素。(3)字体信息：字体信息，页面中的所有字体及其外观，按不同的字号、字体粗细和行高分组。与颜色部分类似，单击它可以查看受影响元素的列表。(4)Unuseddeclarations：未使用的声明，包括所有无效的样式，按原因分组。(5)Mediaqueries：媒体查询，页面中定义的所有媒体查询，按出现次数最多的排序。单击以查看受影响元素的列表。12、CSP违规断点ChromeDevToolsCSP违规断点可以捕获可能与CSP违规相关的异常，并在代码中指出这些异常。CSP代表内容安全策略，它允许限制网站中的某些行为以提高安全性。例如，CSP可用于禁止内联脚本或禁止eval，这两者都可以减少跨站点脚本(XSS)攻击的攻击面。一个特别新的CSP是TrustedType（TT）策略，它支持动态分析，可以系统地防止一大类网站注入攻击。为实现这一点，TT支持网站监管其JavaScript代码，只允许将某些类型的内容分配给DOM接收器，例如innerHTML。网站可以通过包含特定的HTTP标头来激活内容安全策略。例如，标头content-security-policy:require-trusted-types-for'script';trusted-types默认激活页面的TT策略。目前，调试TT违规的唯一方法是在JS异常上设置断点。此功能可能很有用，因为强制违反TT将触发异常。然而，在现实场景中，需要对TT违规进行更细粒度的控制。特别是，我们希望仅在TT违规（而不是其他异常）时中断，也是在仅报告模式下，并区分不同类型的TT违规。启用此功能将为应用程序添加额外的安全层，减少跨站点脚本(XSS)等漏洞。那么如何开启这个功能呢？该功能可以通过以下步骤开启：在任意页面打开Chrome浏览器的DevTools；点击右上角的设置图标->选择左侧的Experiments->勾选ShowCSPViolationsview；重启浏览器的DevTools；在CSPViolationsBreakpoints下只需选择TrustedTypeViolations。当遇到有安全问题的代码时，ChromeDevTools甚至会告诉你如何解决问题。13.新的字体编辑器工具ChromeDevTools提供了一个实验性的字体编辑器工具，可用于更改字体设置。您可以使用它来更改字体、大小、粗细、行高、字符间距，并实时查看更改。那么如何开启这个功能呢？该功能可以通过以下步骤开启：在任意页面打开Chrome浏览器的DevTools；点击右上角的设置图标->选择左侧的Experiments->勾选EnableNewFontEditorToolswithinStylesPane；重启浏览器的DevTools；选择HTML元素，包括要更改的字体，只需单击字体图标即可。14.双屏模式通过启用双屏模式，在ChromeDevTools模拟器中的双屏设备上调试您的网络应用程序。这对于开发适配可折叠手机的应用程序非常有用。那么如何开启这个功能呢？该功能可以通过以下步骤开启：在任意页面打开Chrome浏览器的DevTools；点击右上角设置图标->选择左侧Experiments->勾选Emulation:Supportdual-screenmode；重启浏览器的DevTools；①切换进入移动设备调试->②选择双屏设备->③点击上方切换双屏模式。15.完整的辅助功能树视图使用ChromeDevTools辅助功能树，您可以检查为每个DOM元素创建的辅助功能对象。此功能类似于“元素”选项卡，但使用它可以深入了解应用程序的更多辅助功能详细信息。那么如何开启这个功能呢？该功能可以通过以下步骤开启：在任意页面打开Chrome浏览器的DevTools；点击右上角的设置图标->选择左侧的Experiments->在Elements窗格中勾选EnabletheFullaccessibilitytreeview；重启浏览器的DevTools；在Elements面板中，点击右上角的accessibility按钮，将元素视图模式切换为accessibilitytreeview。
