Chrome DevTools is one of the most commonly used tools for front-end developers. Today, let’s take a look at 5 useful experimental features of Chrome DevTools. Turn on these hidden features and make your Chrome more powerful!
Chrome browser version used in this article: 99.0.4844.74 (official version) (arm64)
1. CSS Overview
In Chrome's admin panel, after opening the CSS Overview panel, you can view the style information of the current website, including color information, font information, media queries, etc. This feature comes in handy when we need to optimize the CSS of a page. In addition to this, you can also use this feature to conveniently view style information for other great websites.
By default, this panel is not enabled, you can enable this function by following the steps below:
- Open the DevTools of the Chrome browser on any page;
- Click More Options
-> More tools -> CSS Overview .
So how to use the CSS Overview panel? Very simple, just click the Capture overview button to generate the CSS overview report of the page. If you want to re-run CSS Overview, just click the clear icon in the upper left corner, then click the **Capture overview** button.
The CSS Overview report consists of five main parts:
(1) Overview summary: high-level summary of page CSS
(2) Colors: All colors in the page. Colors are grouped by purposes such as background color, text color, and so on. It also shows text with low contrast issues.
每种颜色都是可点击的。我们可以单击它以获取使用该颜色的元素列表。将鼠标悬停在列表中的元素上就可以突出显示页面中对应的元素。单击列表中的元素就可以在“Elements”面板中打开该元素。
（3）Font info：字体信息， 页面中的所有字体及其出现，按不同的字体大小、字体粗细和行高分组。与颜色部分类似，可以单击以查看受影响元素的列表。
（4）Unused declarations： 未使用的声明，包含所有无效的样式，按原因分组。
（5）Media queries： 媒体查询，页面中定义的所有媒体查询，按出现次数最高的排序。单击可以查看受影响元素的列表。
2. 新的字体编辑器工具
Chrome DevTools 提供了一个实验性的字体编辑器工具，可以用来改变字体设置。可以用它来改变字体、大小、粗细、行高、字符间距，并实时看到变化。
可以通过以下步骤来开启此功能：
- 在任意页面打开 Chrome 浏览器的 DevTools；
- 点击右上角设置图标 -> 选中左侧 Experiments -> 勾选 Enable New Font Editor Tools within Styles Pane；
- 重启浏览器的 DevTools；
- 选择HTML元素，其中包括想改变的字体，点击字体图标即可。
3. 双屏模式
通过启用双屏模式，可以在 Chrome DevTools 模拟器的双屏设备上调试你的 web 应用。这对于开发要适配折叠屏手机的应用是非常有用的。
可以通过以下步骤来开启此功能：
- 在任意页面打开 Chrome 浏览器的 DevTools；
- 点击右上角设置图标 -> 选中左侧 Experiments -> 勾选 Emulation: Support dual-screen mode；
- 重启浏览器的 DevTools；
- ①切换到移动设备调试 -> ②选择一个双屏设备 -> ③点击上方的切换双屏模式。
4. 完整的可访问性树视图
通过 Chrome DevTools Accessibility Tree，可以检查为每个DOM元素创建的可访问性对象。这项功能与 Elements 选项卡相似，但使用它可以深入探索应用的更多可访问性细节。
可以通过以下步骤来开启此功能：
- 在任意页面打开 Chrome 浏览器的 DevTools；
- 点击右上角设置图标 -> 选中左侧 Experiments -> 勾选** Enable the Full accessibility tree view in the Elements pane**；
- 重启浏览器的 DevTools；
- 在Elements面板中点击右上角的无障碍按钮，将元素视图模式切换为无障碍树视图。
2. CSP 违规断点
Chrome DevTools CSP 违规断点可以捕捉到与CSP违规有关的可能的异常，并在代码中指出这些异常。
CSP 即内容安全策略，它允许限制网站中的某些行为以提高安全性。例如，CSP 可用于禁止内联脚本或禁止eval，这两者都可以减少跨站脚本 (XSS)攻击的攻击面。
一个特别新的 CSP 是可信类型 (TT)策略，它支持动态分析，可以系统地防止对网站的一大类注入攻击。为了实现这一点，TT 支持网站监管其 JavaScript 代码，只允许将某些类型的东西分配给 DOM 接收器，例如 innerHTML。
网站可以通过包含特定的 HTTP 标头来激活内容安全策略。例如，标头content-security-policy: require-trusted-types-for 'script'; trusted-types default激活页面的 TT 策略。
目前，调试 TT 违规的唯一方法是在 JS 异常上设置断点。由于强制 TT 违规将触发异常，因此此功能可能会很有用。但是，在现实的场景中，需要对 TT 违规进行更细粒度的控制。特别是，我们希望仅在 TT 违规（而不是其他异常）上中断，也在仅报告模式下中断，并区分不同类型的 TT 违规。
启用该功能将为应用程序增加一个额外的安全层，减少跨站脚本（XSS）等漏洞。
可以通过以下步骤来开启此功能：
- 在任意页面打开 Chrome 浏览器的 DevTools；
- 点击右上角设置图标 -> 选中左侧 Experiments -> 勾选 Show CSP Violations view；
- 重启浏览器的 DevTools；
- 在 CSP Violations Breakpoints 下选择 Trusted Type Violations 即可。
当遇到有安全问题的代码时，Chrome DevTools 甚至会显示如何修复改问题。