Developer Tools: How can I quickly check the difference in styles between normal state and :focus?

Question

I am trying to find the CSS rule, in a large number of CSS files, that is responsible for a box-shadow (or something similar) being applied to an input element when it is focussed.

My question is this. How can I see exactly which styles are changing when the element becomes focussed, versus its normal state?

I know how to set the focus state on the element, so that I can inspect absolutely all the computed styles that are being applied on both states:

But the problem is that there are so many styles set on the element in both states that I can't easily keep track of what has changed. It could be a box-shadow, a border, an outline... There are many rules and many possibilities.

I know I can use the right-hand sidebar to look at all the style rules that apply - but again, there are so many that it's hard to keep track of what is different.

At the moment I have three options:

1. Writing down all the computed styles on the normal state, then all the styles on the :focus state, then doing a manual diff
2. Writing down all the matched CSS rules for both states, and doing a manual diff
3. Finding a way to do an actual diff!

So my question is: is (3) possible?

Answer 1

You can try my CSSDiff extension. It shows difference between last two inspected elements. It's wasn't ment for exactly what you are trying to achieve but, you should be able to use it by inspecting two inputs of the same sort from which on should have focus (that way you will see actual difference between focused and unfocused element).

Answer 2

In Chrome Developer Tool under the Styles part (below the Computed Style) there is a button (Toggle Element State) to simulate states. It is very useful if you want to see what styles are active in different states.