web-dev-qa-db-ja.com

Google ChromeでXPathを取得する方法はありますか？

YQLで使いたいウェブページがあります。しかし、私は特定のアイテムのXpathが必要です。 Google Chromeのデバッグツール領域に表示されていますが、そのxpathをコピーする方法はわかりません。

完全なxpathをコピーする方法はありますか？

google-chromegoogle-chrome-extension
304
GeoffreyF67

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

例：$x("//img")

Webインスペクタの検索ボックスもxpathを受け付けます

528
Matt Polito

ノードを右クリック=> "XPathをコピー"

200
zavidovych

上記のすべての答えは正しいですここではスクリーンショットでも別の方法です。

Chromeから：

  1. Xpathを見つけようとしているアイテムを右クリックして「検査」
  2. コンソールのハイライトされた領域を右クリックしてください。
  3. Copy xpathに移動します。

enter image description here

60
grepit

XPathヘルパー拡張はあなたが必要とすることをします： https://chrome.google.com/webstore/detail/hgimnogjllphhhkhlmebbmlgjoejdpjl

25
asadovsky

現在クロムで拡張は必要ありません。 xpathが欲しい要素を右クリックして "Inspect Element"をクリックし、それから再びInspectorの中で要素を右クリックして "Copy Xpath"をクリックしてください。

12
deepdive

xpathOnClickはあなたが探しているものを持っています： https://chrome.google.com/extensions/detail/ikbfbhbdjpjnalaooidkdbgjknhghhbo

コメントを読んでください、それは実際にはXpathを取得するために3回クリックする必要があります。

9
Burt

Google Chromeには「 Chrome DevTools 」という組み込みのデバッグツールが用意されています。これには、サードパーティの拡張機能なしでXPath/CSSセレクタを評価または検証できる便利な機能が含まれています。

これは、2つの方法で実行できます。

エレメントパネル内の検索機能を使用してXPath/CSSセレクターを評価し、DOM内の一致するノードを強調表示します。コンソールパネルでトークン$ x（ "some_xpath"）または$$（ "css-selectors"）を実行します。これらは評価と検証の両方を行います。

エレメントパネルから

  1. F12を押してChrome DevToolsを開きます。

  2. 要素パネルはデフォルトで開かれているはずです。

  3. パネル内でDOM検索を有効にするには、Ctrl + Fを押します。

  4. 評価するXPathまたはCSSセレクターを入力します。

  5. 一致する要素がある場合、それらはDOMで強調表示されます。ただし、DOM内に一致する文字列がある場合、それらも有効な結果と見なされます。たとえば、CSSセレクターヘッダーは、要素のみではなく、Wordヘッダーを含むすべてのもの（インラインCSS、スクリプトなど）と一致する必要があります。

enter image description here

コンソールパネルから

  1. F12を押してChrome DevToolsを開きます。

  2. コンソールパネルに切り替えます。

  3. 評価と検証を行うには、$x(".//header")のようにXPathを入力します。

  4. 評価と検証を行うには、$$("header")のようなCSSセレクターを入力してください。

  5. コンソールの実行から返された結果を確認してください。

要素が一致した場合、それらはリストに返されます。そうでなければ、空のリスト[]が表示されます。

$x(".//article")
[<article class="unit-article layout-post">…</article>]

$x(".//not-a-tag")
[ ]

XPathまたはCSSセレクタが無効な場合、例外が赤いテキストで表示されます。例えば：

$x(".//header/")
SyntaxError: Failed to execute 'evaluate' on 'Document': The string './/header/' is not a valid XPath expression.

$$("header[id=]")
SyntaxError: Failed to execute 'querySelectorAll' on 'Document': 'header[id=]' is not a valid selector.
9
Shubham Jain

任意の要素のxpathを見つける簡単な式を教えてください。

1-ブラウザでサイトを開く

2-要素を選択してそれを右クリック

3-要素の検査オプションをクリック

4-選択したHTMLを右クリック

5- xpathをコピーするオプションを選択します

このビデオリンクは役に立ちます。 http://screencast.com/t/afXsaQXru

注：xpathの事前オプションについては、正規表現またはHTMLのパターンを知っている必要があります。

9
Abdul Majeed

最新のクロムのアップデートでは、要素インスペクタの任意の要素をクリックしてXPathをクリップボードにコピーできるようになりました。

9
Tricky

Xpathが欲しい要素を右クリックするだけでそれをコピーするメニュー項目が表示されます。 OPが彼のポストを作ったとき、これは存在しなかったかもしれません、しかしそれは確かに今そこにあります。

4
RAAAAAAAANDY

FirefoxのFirebugでは、検査後に要素を右クリックして[XPathのコピー]を選択できます。 ChromYQLipをスムーズに動作させることができませんでした。

3
Ivan

ちょっとOTですが、おそらく便利です。MacChromeでは、Devツールパネルの検索ボックスからxpathをコピーすることはできません（代わりにコピーするとノードをHTMLとして取得できます）が、テキストを外部エディタにドラッグアンドドロップできます。

1
Ben Weiner

私はほとんどすべての利用可能な拡張機能を試してみましたが、以下のものが最良のものであることがわかりました。

ChroPath Extensionリンク

FirePathと同じように、この拡張子はInspectをクリックしたときに直接Xpathを提供します。

enter image description here

1
Harish Kannan

この拡張子を使うと、idやclassに基づいてxpathが生成されます。これはおそらくあなたが使いたいものです。

ブラウザのアイコンをクリックすると、パネルがページの右隅に表示されます。次に、[検査の開始]をクリックしてから、任意の要素をクリックしてxpathを取得します。

XPathジェネレータ

ChromeはXPathとセレクタの両方を提供していますが、どちらも属性 "id"またはその他の動的に変化するアイテムにデフォルト設定される傾向があります。上記の質問は、永続的な属性に頼る必要性によって引き起こされています。 https://www.burlingtonvisionandlab.com/Downloads/TuSqK231LashowXPathSE7HTML/showXPathSE1_7Table.html

ダウンロード可能な無料のjarファイルには、選択可能な到達者選択属性を含む長いパスが表示されます。

0
ospider