大家好，我是CUGGZ，又是周五了。提前祝大家周末愉快！Chrome是前端开发人员最常用的工具之一。今天，让我们来看看ChromeDevTools的5个实验性功能，并启用这些隐藏功能。功能，让你的Chrome更强大！本文使用的Chrome浏览器版本：99.0.4844.74（正式版）（arm64）一、CSS概览在Chrome的管理面板中，打开CSS概览面板后，可以查看当前网站的样式信息，包括颜色信息、字体信息信息，媒体查询等。当我们需要优化页面的CSS时，此功能会派上用场。此外，您还可以通过该功能轻松查看其他优秀网站的风格信息。默认情况下，此面板未启用。您可以通过以下步骤开启该功能：在任意页面打开Chrome浏览器的DevTools；单击更多选项->更多工具->CSS概述。那么如何使用CSSOverview面板呢？非常简单，只需要点击Captureoverview按钮就可以生成页面的CSS概览报告。如果要重新运行CSSOverview，只需单击左上角的清除图标，然后单击Captureoverview按钮。CSS概述报告主要由五个部分组成：(1)概述摘要：页面CSS的高级摘要。(2)颜色：页面中的所有颜色。颜色按背景颜色、文本颜色等目的分组。它还显示具有低对比度问题的文本。每种颜色都是可点击的。我们可以单击它以获取使用该颜色的元素列表。将鼠标悬停在列表中的元素上将突出显示页面上的相应元素。单击列表中的元素会在“元素”面板中打开该元素。(3)字体信息：字体信息，页面中的所有字体及其外观，按不同的字号、字体粗细和行高分组。与颜色部分类似，单击它可以查看受影响元素的列表。(4)Unuseddeclarations：未使用的声明，包括所有无效的样式，按原因分组。(5)Mediaqueries：媒体查询，页面中定义的所有媒体查询，按出现次数最多的排序。单击以查看受影响元素的列表。2.新的字体编辑器工具ChromeDevTools提供了一个实验性的字体编辑器工具，可用于更改字体设置。您可以使用它来更改字体、大小、粗细、行高、字符间距，并实时查看更改。该功能可以通过以下步骤开启：在任意页面打开Chrome浏览器的DevTools；点击右上角的设置图标->选择左侧的Experiments->勾选EnableNewFontEditorToolswithinStylesPane；重启浏览器的DevTools；选择HTML元素，包括要更改的字体，只需单击字体图标即可。3.双屏模式通过启用双屏模式，在ChromeDevTools模拟器中的双屏设备上调试您的Web应用程序。这个概念对于开发需要适配折叠屏手机的应用非常有用。该功能可以通过以下步骤开启：在任意页面打开Chrome浏览器的DevTools；点击右上角的设置图标->选择左侧的Experiments->勾选Emulation:Supportdual-screenmode；重启浏览器的DevTools；①切换进入移动设备调试->②选择双屏设备->③点击上方切换双屏模式。4.完整的无障碍树视图使用ChromeDevTools无障碍树，您可以检查为每个DOM元素创建的无障碍对象。此功能类似于“元素”选项卡，但使用它可以深入了解应用程序的更多辅助功能详细信息。该功能可以通过以下步骤开启：在任意页面打开Chrome浏览器的DevTools；点击右上角的设置图标->选择左侧的Experiments->在Elements窗格中勾选EnabletheFullaccessibilitytreeview；重启浏览器的DevTools；在Elements面板中，点击右上角的accessibility按钮，将元素视图模式切换为accessibilitytreeview。5.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甚至会告诉你如何修复它。
