css点击显示隐藏-这些隐藏的功能让你的Chrome更加强大！

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

大家好，我是火宝编辑。

Chrome 是后端开发人员最常用的工具之一。 明天编程导航将为大家分享ChromeDevTools的5个实验性功能。 打开这些隐藏的功能可以让你的Chrome变得更强大！

本文使用的Chrome浏览器版本：99.0.4844.74（即将推出）（arm64）

1.CSS概述

在Chrome管理面板中，打开CSSOverview面板后，可以查看当前网站的样式信息，包括颜色信息、字体信息、媒体查询等。当我们需要优化页面的CSS时，这个功能就派上用场了。 此外css点击显示隐藏，您还可以利用该功能方便地查看其他优秀网站的风格信息。

默认情况下，该面板未启用，您可以通过以下步骤启用该功能：

在任意页面打开Chrome浏览器的DevTools；

单击更多选项 -> 更多工具 -> CSSOverview。

那么如何使用CSSOverview面板呢？ 非常简单，只需点击Captureoverview按钮即可生成页面的CSSoverview报告。 如果要重新运行 CSSOverview，只需单击左上角的清理图标，然后单击 Captureoverview 按钮即可。

CSSOverview报告主要由五个部分组成：

（1）Overviewsummary：页面CSS的中间摘要

(2) 颜色：页面中的所有颜色。 颜色按背景颜色、文本颜色等用途进行分组。它还显示具有低对比度问题的文本。

每种颜色都是可点击的。 我们可以单击它来获取使用该颜色的元素列表。 将键盘悬停在列表中的元素上将突出显示页面上的相应元素。 单击列表中的元素会在“元素”面板中打开该元素。

(3) Fontinfo：字体信息，页面中的所有字体及其外观，按不同的字体大小、字体粗细和列宽进行分组。 与“颜色”部分类似，您可以单击以查看受影响元素的列表。

(4) Unuseddeclarations：未使用的声明，包括所有无效的样式，按原因分组。

(5) Mediaqueries：媒体查询，页面中定义的所有媒体查询，按出现次数最高的排序。 单击可查看受影响元素的列表。

2.新的字体编辑工具

ChromeDevTools 提供了一个实验性字体编辑器工具，可用于更改字体设置。 您可以使用它来更改字体、大小、粗细、行高、字符宽度，并实时查看变化。

可以通过以下步骤开启此功能：

在任意页面打开Chrome浏览器的DevTools；

点击右上角的设置图标->选择两边的Experiments->勾选EnableNewFontEditorToolswithinStylesPane；

重新启动浏览器的DevTools；

选择 HTML 元素，包括要更改的字体，然后单击字体图标。

3.双屏模式

通过启用双屏模式，在 ChromeDevTools 模拟器中的双屏设备上调试 Web 应用程序。 这个概念对于开发需要适配折叠屏手机的应用程序非常有用。

可以通过以下步骤开启此功能：

在任意页面打开Chrome浏览器的DevTools；

点击右上角设置图标->选择两边实验->勾选Emulation:Supportdual-screenmode;

重新启动浏览器的DevTools；

①切换到联通设备调试->②选择双屏设备->③点击上方开关切换到双屏模式。

4. 完整的可访问性树视图

使用 ChromeDevToolsAccessibilityTree，可以检测为每个 DOM 元素创建的辅助功能对象。 此功能类似于“元素”选项卡，但使用它可以深入了解应用程序的更多辅助功能详细信息。

可以通过以下步骤开启此功能：

在任意页面打开Chrome浏览器的DevTools；

点击右上角的设置图标 -> 选择两侧的实验 -> 勾选在元素窗格中启用完全可访问性树视图；

重新启动浏览器的DevTools；

在“元素”面板中，单击右上角的辅助功能按钮，将元素视图模式切换到辅助功能树视图。

5.CSP非法断点

ChromeDevTools CSP 违规断点可以捕获与 CSP 违规相关的可能异常，并在代码中指出此类异常。

CSP 代表内容安全策略，它允许限制网站中的个人行为以增强安全性。 例如，CSP 可用于禁止内联脚本或禁止 eval，这两者都可以减少跨站点脚本 (XSS) 攻击的攻击面。

一种非常新的CSP是可信类型（TT）策略，它支持动态分析css点击显示隐藏，可以系统地避免对网站的一大类注入攻击。 为了实现这一目标，TT 支持网站监管其 JavaScript 代码，并只允许将某些类型的内容分配给 DOM 接收器，例如innerHTML。

网站可以通过包含特定的 HTTP 字段来激活内容安全策略。 例如，content-security-policy:require-trusted-types-for'script';trusted-typesdefault 激活页面的 TT 策略。

目前，调试 TT 违规的唯一方法是在 JS 异常上设置断点。 此功能非常有用，因为强制 TT 违规将触发异常。 此外，在实际场景中，需要对TT违规进行更细粒度的控制。 具体来说，我们希望仅在 TT 违规（而不是其他异常）时中断，也在仅报告模式下中断，并区分不同类型的 TT 违规。

启用此功能将为应用程序添加额外的安全层，减少跨站点脚本 (XSS) 等漏洞。

可以通过以下步骤开启此功能：

在任意页面打开Chrome浏览器的DevTools；

点击右上角的设置图标->选择两边的Experiments->勾选ShowCSPViolationsview；

重新启动浏览器的DevTools；

选择 CSPViolationsBreakpoints 下的 TrustedTypeViolations。

当遇到存在安全问题的代码时，ChromeDevTools甚至会展示如何修复问题。

本期内容就到这里啦~欢迎有兴趣的朋友尝试一下。 如果本文对您有帮助，请点赞+关注！ ❤️

欢迎您加入Yupi，与4000多名男伙伴交流学习，向Yupi等大厂友1对1提问，用Yupi直播做项目，领取大量节目资源等。

现在加入限时让利60元，欢迎想一起学习进步的小伙伴们~