☰

Firefox Web 開發工具中「僅顯示已套用的樣式」？

tag-icon • tag-icon firefox firefox-extensions firebug
Firefox Web 開發工具中「僅顯示已套用的樣式」？

我已經是 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 文件，並將 CSS 複製到<style>標記內。

它將被縮小，因此您可能需要使用類似的工具來取消縮小它Unminify.com

嘗試這樣做的人應該意識到，僅僅因為一種風格並不應用，並不意味著它一定是「未使用的」。某處可能有一個腳本嘗試將某種樣式附加到元素，但如果在捕獲時未套用該樣式，則 SingleFile（或 Chrome 開發工具）將不會包含它。諸如此類的警告......但是對於隔離網頁的特定區塊並獲取其規則集，這種方法可能很有用。

相關內容