開發者工具：如何快速檢查正常狀態和：焦點之間的風格差異？

Question

我正試圖在大量的CSS文件中找到CSS規則，該規則負責將盒子陰影（或類似物）應用於輸入元素時進行聚焦。

我的問題是這樣的。當元素變得聚焦時，我怎樣才能看到究竟是哪個樣式變化的？

我知道如何設置的焦點狀態的元素，這樣我可以檢查絕對都是被應用了在兩種狀態下計算出的樣式：

但問題是，有在這兩種狀態下的元素上設置了很多樣式，我不能輕易跟蹤發生了什麼變化。它可能是一個盒子陰影，邊框，輪廓......有許多規則和許多可能性。

我知道我可以使用右側邊欄來查看所有適用的樣式規則 - 但同樣的，有很多以至於很難跟蹤哪些不同。

目前，我有三種選擇：

1. 在正常狀態下寫了所有的計算樣式，那麼所有的樣式：焦點狀態，然後做一個手動差速器
2. 寫下所有匹配的兩種狀態的CSS規則，並做一個手動比較
3. 找到一種方法來做一個實際的差異！

所以我的問題是：是（3）可能嗎？

Answer 1

你可以試試我的CSSDiff擴展名。它顯示了最後兩個被檢查的元素之間的區別。這並不是你想要達到的目標，但是，你應該能夠通過檢查兩個相同類型的輸入來使用它，從哪個輸入應該有焦點（這樣你會看到聚焦和未聚焦的元素之間的實際區別） 。

Answer 2

在Styles部分下面的Chrome Developer Tool（計算樣式下）中，有一個按鈕（切換元素狀態）來模擬狀態。如果您想查看哪些樣式在不同狀態下處於活動狀態，這非常有用。