http://vid4.us/free_video_tutorial/157/internet-explorer-how-to-disable-developer-tools-menu/

Also of note: I thought I had a simple, ad hoc method of debugging the :first-line pseudo-class, but it failed also.

HTML:

<p><span>Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>

CSS:

p:first-line { font-variant: small-caps; }

Both Gecko (Firefox) and Webkit (Safari) render the text in the span properly as small caps, but both Firebug and Webkit’s inspector report the span’s font-variant property as “normal” (inherited). While the :first-line pseudo-class isn’t represented in the DOM, the span is, and its style is not being reported properly.

if you want to see the :hover pseudo classes for links in firebug, you need to use the inspect tool, hovering over the link and click it.. firebug now shows you the :hover pseudo class.

apart from pseudo classes and elements, each @* expression, like @font-face, @media etc. are also not shown by firebug (don’t know about the other inspectors tho)

Personally, I find it confusing that the Developer Tools in IE8 shows the styles associated with a DOM node for any medium, even if the medium is not active, such as print styles. Also, the Developer Tools would be much more useful if it could show dynamically-generated DOM nodes. Still, it’s a great resource and many people (myself included) benefit from it being included in the browser by default as opposed to being an add-on.

The IE Developer Toolbar for IE6 and IE7 is useful, too, and it will show you the styles for supported pseudo-elements and pseudo-classes such as “a:link” if you select the element in the DOM tree and then go to the View menu, choose “Source” then “DOM (Element + Styles).”

Really, IMHO, they should adapt the DOM engines and debuggers to artificially put the :after elements into the DOM, at least for debugging purposes.

The challenge is that we’d like those comments to show up in web inspectors where a designer is *investigating* an issue rather than having to go into the code (and our CMS + source control monolith) itself.

Of course, the browsers + web inspectors strip out invalid properties. The work-around we’ve used so far is something like ‘content: “NOTES: …blah…”;’ without a pseudo-class of :before or :after. Gross but it works.

I’m glad that web inspectors have become so ingrained in web workflow that we’re nitpicking advanced details. Is our web-inspection sophistication is pushing past the rendered DOM? Would the ability to provide custom/different validation schemas to web inspectors help? If so, how does the community take on a bigger, standardizing(?) role in web inspector features?

For what it’s worth, I can get firebug to also show me the :hover pseudo class if I first click “inspect” in the Firebug toolbar and then hover over and click the element on which I’m trying to see the CSS cascade and values. Normally, I just right-click an element and use the contextual menu to go to “inspect element” but this method will never get you the :hover values.