如何在Chrome開發人員工具（如Firefox中的Firebug）中過濾和顯示僅應用的CSS

背景故事：我有一個包含多個CSS的頁面，它們可以相互覆蓋。有很多劃掉的CSS樣式，所以我不想看到它們。如何在Chrome開發人員工具（如Firefox中的Firebug）中過濾和顯示僅應用的CSS

我知道Firefox上的Firebug提供了這個功能（只顯示應用的CSS），它可以顯示什麼樣的CSS文件正在被應用（整潔！）。

我們如何在Chrome上使用此功能？我嘗試安裝Firebug Lite for Chrome，但沒有運氣。

PS：Chrome有計算樣式選項卡，但它沒有顯示什麼樣式來自什麼CSS文件。

2013-05-27 Dio Phung

在Chrome開發工具的右欄（其中CSS顯示在「元素」面板中）中，第一部分稱爲「計算樣式」。如果取消選擇「show inherited」，則會獲得實際適用於元素的樣式的整齊列表。這有幫助嗎？

2013-05-27 09:44:26

我的qn基本上是怎麼知道某個CSS樣式來自哪個CSS文件的？例如，我有3個名爲「main.css」，「client.css」和「mobile.css」的CSS文件，都有一個類「.title-header」。在頁面中，我加載了這3個CSS文件，我怎麼知道哪個文件被應用？ –

在正常的Elements面板中（左邊的HTML和右邊的CSS），在每個樣式規則的右上角，它會顯示它所在的文件以及它的行號。 –

使用Computed選項卡的問題是，我無法編輯或禁用樣式選項卡中的單個樣式。 Firefox使這更容易。 – isherwood

回答