Chrome開發人員工具 - 查看當前頁面使用什麼CSS的任何方式？

使用谷歌的Chrome開發者工具，我有時會對代碼運行審計，看看它是如何結合在一起的。這些工具常常提出的建議之一是「刪除未使用的CSS規則」。點擊箭頭，然後顯示當前頁面未使用的CSS規則通常很大的列表。Chrome開發人員工具 - 查看當前頁面使用什麼CSS的任何方式？

有沒有辦法查看當前頁面正在使用哪些CSS規則的列表？

來源

2010-10-14 sscirrus

我不相信Chrome瀏覽器開發工具有辦法做到這一點，沒有。不過，有人可能已經編寫了一個單獨的工具來完成它。 – Amber 2010-10-14 02:34:24

我認爲Google Page Speed會告訴你未使用的CSS規則。也許這與你所要求的是相反的。至少它是如何在Firefox中工作的。 – 2010-10-14 02:36:16

@邁克爾 - 是的，情況正好相反。 Chrome工具已經顯示未使用的CSS列表。 – sscirrus 2010-10-15 09:47:12

按下CTRL-SHIFT-J以訪問Chrome的開發工具。在那裏您可以選擇資源選項卡，選擇在左側啓用它們，並在必要時刷新頁面。它會顯示所有加載的文件，包括樣式表。

來源

2011-01-24 20:58:13 plebksig

這並不回答neXib的問題。我在問如何找出當前頁面正在使用的特定CSS規則，而不是加載哪些樣式表。 – sscirrus 2011-01-24 21:47:17

對不起。但是顯示未使用的樣式是明智的，因爲它們不在樣式表中，但是由於層次結構的原因，顯示哪些樣式會被混淆使用，所以對我來說顯示它是沒有意義的。如果它說風格li.horse被使用，但後來你有li.horse .mane定義，將不會很有用。 – plebksig 2011-01-24 22:50:49

我知道這可能是一點點晚，但萬一別人絆倒過這個像我一樣，也是好奇，我發現除塵我選擇器插件的Firefox會告訴你無論是使用和未使用選擇在每個使用的樣式表的頁面上。

希望這有助於

來源

2012-02-01 01:50:24 sbditto85

的開發工具是開源的，所以你可以創建一個補丁。
http://dev.bootstraponline.com/2011/11/automatically-remove-unused-css-rules.html

snipp

//=== modified file 'AuditRules.js' 
if (!testedSelectors[rule.selectorText] || foundSelectors[rule.selectorText]) 
{ 
    usedCss += "\n" + rule.selectorText + " {" + rule.style.cssText + "}\n"; 
    continue; 
} 
//... 
// Save only used css rules. 
InspectorFrontendHost.saveAs("used.css", usedCss);

來源

2014-05-01 19:49:46 GDmac

Chrome開發人員工具 - 查看當前頁面使用什麼CSS的任何方式？

回答

相關問題