开发人员工具：如何快速检查正常状态和：焦点之间的样式差异？

Question

我试图在大量的CSS文件中找到CSS规则，它负责在聚焦时应用于输入元素的盒子阴影（或类似的东西）。

我的问题是这个。当元素聚焦时，如何确切地看到哪些样式更改与正常状态相比？

我知道如何在元素上设置焦点状态，这样我就可以完全检查在两种状态下应用的所有计算样式：

但问题是在这两种状态下元素上设置的样式太多，我无法轻易跟踪已发生的变化。它可能是一个盒子阴影，一个边框，一个轮廓......有许多规则和许多可能性。

我知道我可以使用右侧边栏来查看适用的所有样式规则 - 但同样，有很多很难跟踪不同之处。

目前我有三个选择：

1. 在正常状态下写下所有计算出的样式，然后在：focus状态下进行所有样式，然后进行手动差异
2. 记下两种状态的所有匹配的CSS规则，并进行手动差异
3. 找到一种方法来做一个实际的差异！

所以我的问题是：（3）可能吗？

Answer 1

在样式部分（计算样式下方）下的Chrome开发者工具中，有一个按钮（切换元素状态）来模拟状态。如果您想查看哪些样式在不同的状态中处于活动状态，这非常有用。

Answer 2

您可以尝试我的CSSDiff扩展程序。它显示了最后两个检查元素之间的差异。对于你想要实现的目标而言，这并不是准确的，但是你应该能够通过检查两个相同类型的输入来使用它，这些输入应该具有焦点（这样你将看到聚焦和未聚焦元素之间的实际差异）