chrome 和火狐_使用Google Chrome和Mozilla Firefox切换元素状态

chrome 和火狐

It's much easier to debug CSS than JavaScript since there are many fewer interactions in CSS, and they are much easier emulate. Still, element state debugging isn't simple...until now. Google Chrome's WebInspector and Mozilla Firefox's Firebug have a really sweet feature I just discovered which allows the developer to apply element states for the sake of debugging.

与CSS相比，调试CSS要容易得多，因为CSS中的交互较少，而且它们的仿真也更容易。 不过，元素状态调试并不简单...直到现在。 我刚刚发现Google Chrome的WebInspector和Mozilla Firefox的Firebug具有一个非常不错的功能，它允许开发人员为调试而应用元素状态。

Chrome浏览器的WebInspector (Chrome's WebInspector)

The image above displays Chrome's "Toggle Element State" button, allowing developers to toggle CSS states via checkboxes.

上图显示了Chrome的“切换元素状态”按钮，允许开发人员通过复选框切换CSS状态。

Firefox的Firebug (Firefox's Firebug)

The image displays Firebug's likewise menu, triggered by the down arrow on the CSS tab for an element.

该图像显示Firebug的类似菜单，该菜单由元素CSS选项卡上的向下箭头触发。

This allows active CSS state bugging vs. simple CSS explorations to be much, much easier. Happy CSS debugging!

与简单CSS探索相比，这可以使主动CSS状态窃听变得容易得多。 CSS调试愉快！

翻译自: https://davidwalsh.name/toggle-element-state

chrome 和火狐