☰

Firefox Web Developer Tool 中“仅显示应用的样式”？

tag-icon • tag-icon firefox firefox-extensions firebug
Firefox Web Developer Tool 中“仅显示应用的样式”？

我使用 Firebug 已有很长时间了。我的 Firefox 最近更新到了 51 版，很快我就遇到了 Firebug 问题。

当访问 Firebug 页面时，我发现它不再被开发了，这让我很震惊。

现在为了继续前进，我决定使用 Firefox 内置的 Web 开发工具 (WDT)。但其中似乎缺少一样东西。

在 Firebug 检查器中，当我选择页面上的元素时，曾经有一个名为“仅显示已应用的样式”或类似名称的选项。WDT 中似乎缺少该选项，而且在面板中看到所有被划掉的 CSS 样式非常难看。

有没有办法在 WDT 中实现该功能？

火狐

答案1

Firefox DevTools 目前不提供该功能（截至 Firefox 51.0.1）。因此，我创建了一个请求错误报告。

另外，我有在 Firebug 用户迁移指南中添加了一条注释。

答案2

没有这样的选项。但是，您可以使用计算选项卡仅显示应用的样式。

为此，您需要以某种方式编辑或覆盖（例如display: none）默认的 Firefox 开发人员工具样式：

在文件中/devtools/client/themes/rules.css有（第 423 行）：

.ruleview-overridden {
  text-decoration: line-through;
}

第 268 行：

.theme-firebug .ruleview-overridden .ruleview-propertyname,
.theme-firebug .ruleview-overridden .ruleview-propertyvalue {
  text-decoration: line-through;
}

本文也可能有帮助。

答案3

如果你需要节省仅应用样式，这可以在 Chrome 中使用 Chrome 开发者工具完成（教程在这里）。但如果您想要一个 Firefox 解决方案，您可以将页面保存为单个 .html 文件，然后只从该文件中获取 CSS。

为此，请先获取该附加组件的 Firefox 版本单一文件

安装SingleFile后，您可以将页面下载为.html文件，并复制<style>标签内的CSS。

它将被最小化，因此你可能需要使用类似以下工具来取消最小化它Unminify.com

尝试这种风格的人应该意识到，仅仅因为一种风格不是应用，并不意味着它一定是“未使用的”。某个地方可能有一个脚本会尝试将某种样式附加到元素，但如果在捕获时未应用该样式，SingleFile（或 Chrome Dev Tools）将不会包含它。诸如此类的警告...但对于隔离特定网页块并获取其规则集，这种方法可能很有用。

相关内容