[解決済み] ブラウザ上で:beforeと:afterの疑似要素を検査し、調整するには？

質問

私は :after 疑似要素でかなり精巧な DOM 要素をいくつか作成しました。Chrome Inspector または Firebug または同等のものでそれらを検査し、微調整できるようにしたいと思います。

この機能は この WebKit/Safari ブログの記事 (2010 年付け) で言及されているにもかかわらず、Chrome と Safari のいずれでもこの機能を見つけることができません。Chrome には、少なくとも :hover, :visited および :active の状態を検査するためのチェックボックスがありますが、:before および :after はどこにも見当たりません。

さらに このブログの記事 (日付は 2009 年!) では、IEの開発ツールにこの機能があることを述べていますが、私は現在 Mac OS を使用しているので、これは何の役にも立ちません。さらに、IE は私が主にターゲットにしているブラウザーではありません。

これらの疑似要素を検査する方法はありますか？

EDIT: Firebug がこれらの要素を検査できないというのは間違いであることに加え、Opera は :before と :after 要素をすぐに検査するのに非常に優れていることがわかりました。

どのように解決するのですか?

で Chrome の開発ツール では、擬似要素のスタイルがパネルに表示されます。

その他、JavaScriptのコンソールで次の行を入力し、返される内容を確認することもできます。 CSSStyleDeclaration オブジェクトを検査します。

getComputedStyle(document.querySelector('html > body'), ':before');

• window.getComputedStyle
• document.querySelector