![Firefox Web Developer Tool 中“仅显示应用的样式”?](https://linux22.com/image/1520417/Firefox%20Web%20Developer%20Tool%20%E4%B8%AD%E2%80%9C%E4%BB%85%E6%98%BE%E7%A4%BA%E5%BA%94%E7%94%A8%E7%9A%84%E6%A0%B7%E5%BC%8F%E2%80%9D%EF%BC%9F.png)
答案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)将不会包含它。诸如此类的警告...但对于隔离特定网页块并获取其规则集,这种方法可能很有用。