97

:after 疑似要素を使用してかなり精巧な DOM 要素をいくつか作成しました。それらを Chrome Inspector または Firebug または同等のツールで検査および調整できるようにしたいと考えています。

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

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

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

編集: Firebug がこれらの要素を検査できないことについて間違っていることに加えて、Opera は :before および :after 要素を箱から出して検査するのがかなり得意であることがわかりました。

4

7 に答える 7

65

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

CSSStyleDeclarationそれ以外の場合は、JavaScriptコンソールに次の行を入力して、返されたオブジェクトを調べることもできます。

getComputedStyle(document.querySelector('html > body'), ':before');
于 2012-04-16T13:26:07.690 に答える
36

次の図に示すように、Chrome 31 の時点で、疑似要素は親要素の子要素として要素パネルに表示されます。

スクリーンショット

通常の要素と同じように選択できますが、contentスタイルを削除すると疑似要素も削除され、devtools のフォーカスがその親に変わります。

継承された CSS スタイルが表示されず、要素パネルから CSS コンテンツを編集できないようです。

于 2013-11-14T13:19:03.397 に答える
26

Chrome won't show :before and :after pseudo elements in the DOM-tree, if they miss "content" attribute. It should be set, even if it is set to nothing.

This won't show up:

:after {
  background-color: red;
}

This will show up in the inspector:

:after {
  content: "";   
  background-color: red;    
}

Hope it helps.

于 2014-02-17T13:17:04.760 に答える
5

多くのフラストレーションの後、Firefox はドキュメント ツリーに疑似要素をまったく表示しないことがわかりましたが、疑似要素が定義されている正確な要素を選択すると、その疑似要素のスタイルが表示されます。 ) は、右側のスタイル ルール セクションに表示されます。これは、firebug と組み込みの inspect ("Q") の両方に当てはまります。これまで誰もこれを明確に説明していなかったことにショックを受けました。

明らかに、chrome/chromium の疑似要素の処理は非常に優れています。なぜなら、疑似要素は (ドキュメント ツリー内とページ上で直接) 選択し、通常の要素と同じように、レイアウト、プロパティ、その他すべてを「所有者」に関係なく検査できるからです。 "。

現在使用しているブラウザのバージョン: Chromium 40.0.2214.91、Firefox 31.3.0。

于 2015-02-25T08:16:27.573 に答える
1

Firefox にはしばらく前からこの機能がありました。右クリックして「要素を検査」し、インスペクターの右側のパネルで前後の要素を確認します。

于 2014-02-12T06:49:52.747 に答える