DevTools 技巧合集六

禁用所有的CSS样式

要移除网页上的所有CSS样式，例如为了测试在禁用样式时页面的可访问性，或者验证内容显示的顺序，你可以使用以下技术。不用担心，刷新页面后样式将会重新启用。

• 1.通过在控制台中运行JavaScript
• 2.打开浏览器的开发者工具中的控制台。
• 3.输入以下JavaScript表达式：

document.querySelectorAll('style, link[rel="stylesheet"]').forEach(e => e.remove());

上面的表达式会找到页面上所有的 <style> 元素和 <link rel="stylesheet"> 元素，并将它们移除。

• 4.按Enter键运行表达式。页面现在将以没有任何CSS样式的方式显示。

  
  

通过使用Firefox的样式编辑器工具

Firefox有一个名为样式编辑器（Style Editor）的工具，列出了页面上使用的所有样式表。要禁用页面上的样式：

• 在Firefox的开发者工具中打开样式编辑器工具。
• 点击每个样式表旁边的切换样式表可见性按钮（眼睛图标）来禁用它。

通过使用其他浏览器的来源工具

在Chrome或Edge的开发者工具中打开来源工具。
找到想要禁用的CSS文件，例如通过按Ctrl+P（或在macOS上按Command+P）打开命令菜单，并键入.css来过滤CSS文件。

• 选择CSS文件中的整个文本并删除它。
• 重复处理其他你想要禁用的CSS文件。

为什么一个CSS属性被覆盖

在CSS中，级联（cascade）在确定哪些CSS属性应用于一个元素时起着非常重要的作用。

在调试CSS时，有时候你会意识到本来想应用于元素的CSS属性实际上被另一个属性覆盖了。找出覆盖属性并不总是容易的，特别是当元素被多个CSS规则样式化，定义了许多属性时。

以下是找出覆盖CSS属性的方法：

通过使用计算样式

• 1.在浏览器的开发者工具中打开计算样式（Computed styles）面板。在Firefox中，它位于检查（Inspector）工具中；在其他浏览器中，它位于元素（Elements）工具中。
• 2.找到被覆盖的属性。
• 3.点击属性旁边的三角形图标展开该属性。
  显示出定义这个属性的CSS规则列表，按照它们的特指度排序。位于顶部的规则是最终生效的。
• 4.要查看覆盖属性的位置，请点击在获胜规则旁边的链接。

通过过滤应用规则

Firefox开发者工具有一个有用的功能，允许你过滤在规则面板中显示的应用的CSS规则，这可以帮助你找出覆盖的属性：

• 1.在检查工具的规则面板中找到被覆盖的CSS属性。
• 2.点击该属性名称旁边的“筛选包含此属性的规则”图标（一个漏斗）。
  CSS规则列表被过滤，只显示包含被覆盖属性的规则。此外，属性在面板中出现的地方都会被突出显示。
• 3.通过浏览属性列表找出覆盖的属性（即没有被删除线划掉的属性）。

你可以在其他浏览器中通过使用元素工具中样式面板顶部的筛选文本框来达到相同的效果。

突出显示所有与给定CSS选择器匹配的元素

当你在开发者工具中（在元素或检查工具中）选择一个元素时，你会看到应用于它的CSS规则。但是，这些规则可能也适用于页面中除当前选择的元素之外的其他元素。

为了查看所有匹配特定CSS规则选择器的元素，并因此了解如果更改该规则将影响哪些元素：

• 在Firefox中，选择检查工具中的一个元素，然后在样式面板中的CSS规则旁边点击“突出显示匹配此选择器的所有元素”按钮：
  
• 在Chrome、Edge或Safari中，选择元素工具中的一个元素，然后在样式面板中悬停在一个CSS选择器上：