用於css故障排除的工具

我使用firebug和web開發人員firefox插件進行大多數css調試。兩者都是優秀的工具。但是，當涉及大量樣式表和自定義規則時，我無法使用任何一種工具查看最終屬性值派生的規則應用程序序列。用於css故障排除的工具

讓我分享一個例子來說明我在這些工具中遇到的困難。在我網站的一頁上，特定部分的字體大小比其他部分大。 Firebug向我展示了應用於元素的所有CSS規則。它也向我展示了被拋棄的規則;這些都以透視圖顯示。這很棒！但要找出確切的分類規則來負責較大的字體大小，我必須滾動瀏覽所有樣式，直到找到尚未觸及的字體大小規則。似乎沒有一個「搜索」功能的CSS面板（不像HTML面板）。

你如何處理這些情況？那裏有更好的工具嗎？或者，有沒有辦法在firebug css面板中搜索「尚未觸及的字體大小」？對於一些人來說這可能不是一個大問題，但在我的情況下，如果我能夠解決這個問題，我相信我可以節省很多時間。任何幫助將不勝感激。

感謝， Tabrez

來源

2012-01-18 Tabrez

哇，這聽起來像你有太多*'font-size'樣式覆蓋對方。 – 2012-01-18 20:37:15

你應該以避免這種問題的方式編寫你的css。從來沒有必要查找爲什麼「這種方式」。也許讀一些關於壓倒一切的CSS。 – mreq 2012-01-18 20:44:13

@PetrMarek - 我用過重要的！關鍵字在某些情況下。但我不希望這是常態。 – Tabrez 2012-01-18 22:03:30

在Firebug中，查看Firebug窗口中「樣式」選項卡下的下拉選項。

有一個選項'僅顯示應用樣式'。

來源

2012-01-20 03:36:19 ryankeairns

這就是我正在尋找的！非常感謝！ – Tabrez 2012-01-20 05:29:09

如果你願意改變瀏覽器，谷歌Chrome的檢查元素功能（右鍵單擊>檢查元素）將告訴展示你倆匹配的樣式（重寫那些穿越通過），以及只是計算的風格。它給你一個鏈接到css文件中的行。

來源

2012-01-18 20:43:56 zethus

謝謝！我會試試看。 – Tabrez 2012-01-18 22:04:11

用於css故障排除的工具

回答

相關問題