ChromeデベロッパーツールでXPathまたはCSSセレクターを使用してDOM要素を検索する方法

116

文書http://code.google.com/chrome/devtools/docs/elements.htmlは、XPathまたはCSSセレクターをサポートしていると述べていますが、試したところ、うまくいきませんでした。

誰でもそれを使う方法を知っていますか？

dom google-chrome google-chrome-devtools

— ボボ
ソース

回答:

263

$xChromeのJavaScriptコンソールで使用できます。拡張は必要ありません。

例： $x("//img")

— マット・ポリト
ソース

これは役立つ回答です。これに追加するために、$ x関数は2番目のオプションの引数contextを受け入れます。$ x（xpath、context）これにより、たとえば特定のiframeコンテンツを選択し、それに対してxpathクエリを実行できます。したがって、最初のiframeの場合：myframe = document.getElementsByTagName（ "iframe"）[0] .contentWindow.document.body; #to xpathでテーブルセルのiframeをクエリします。

— アドルフトルドー

CSSセレクターを持つ要素を見つけるには、$$（ 'body'）などの$$コンソール関数を使用する必要があります

— Dmitry Korolyov

その他のコマンドは、ここで見つけることができます：developers.google.com/chrome-developer-tools/docs/...

— ドミトリーPolushkin

ほぼ2年後にこの質問に戻ってきます、ええ、これはもっといいです。

— ボボ2014年

XPathのデバッグに非常に適しています。ちなみに、この$x()関数はSafariコマンドラインAPIでも機能します。

— Otto G

検索ボックスにxpath式を入力するだけで機能します。ツリー構築のヒントで私のために動作します。

Chrome 11では機能が壊れているようですが、次のバグを報告しました：http : //crbug.com/79716

— ユーリー・セミハツキー
ソース

あなたが正しいです。機能していますが、強調表示機能が壊れています。私は、クロム10.0を使用しています* MAC OS X.に。

— ボボ

以下のマーク・ポリトによるより良い答え。

— FGM 2013年

Chrome 32で動作します。devtoolの[要素]タブに移動し、CTRL + Sを押して、xpathを検索します

— eeezyy

@eeezyyあなたはctrl + fを意味しますか？

— Box

xpath検索にはを使用します$x('xpathSelector')。CSSセレクターにはを使用します$('cssSelector')。

ただし、この最後のセレクタは、最初に一致した要素のみを返します。すべての一致する要素を見たい場合は$$('cssSelector')

— チャム
ソース