399

YQL で使用したい Web ページがあります。しかし、特定のアイテムの XPath が必要です。Google Chrome のデバッグ ツール エリアで確認できますが、その XPath をコピーする方法がわかりません。

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

4

18 に答える 18

587

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

元：$x("//img")

また、Web インスペクタの検索ボックスは xpath を受け入れます

于 2011-08-29T20:46:04.923 に答える
294

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

于 2012-12-14T19:02:35.227 に答える
26

XPath ヘルパー拡張機能は必要なことを行います: https://chrome.google.com/webstore/detail/hgimnogjllphhhkhlmebbmlgjoejdpjl

于 2011-05-15T07:20:51.410 に答える
20

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

これは、次の 2 つの方法で行うことができます。

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

要素パネルから

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

  2. Elements パネルはデフォルトで開く必要があります。

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

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

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

ここに画像の説明を入力

コンソールパネルから

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

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

  3. $x(".//header")評価および検証するXPath を入力します。

  4. $$("header")評価および検証するCSS セレクターを入力します。

  5. コンソール実行から返された結果を確認します。

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

$x(".//article")
[<article class="unit-article layout-post">…&lt;/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.
于 2017-10-06T06:29:47.073 に答える
14

現在、Chrome では拡張機能は必要ありません。xpath が必要な要素を右クリックし、[Inspect Element] をクリックしてから、インスペクター内で再度要素を右クリックし、[Copy Xpath] をクリックします。

于 2013-04-27T13:12:07.970 に答える
11

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

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

2-要素を選択して右クリックします

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

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

5- xpath をコピーするオプションを選択します 必要な場所で使用します

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

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

于 2015-11-03T06:47:17.003 に答える
10

chrome の最新の更新の時点で、要素インスペクターで任意の要素をクリックして、XPath をクリップボードにコピーできるようになりました。

于 2012-06-18T16:45:01.633 に答える
9

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

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

于 2010-12-20T12:59:59.757 に答える
6

xpath が必要な要素を右クリックすると、それをコピーするためのメニュー項目が表示されます。これは、OP が投稿したときには存在していなかったかもしれませんが、現在は確実に存在しています。

于 2012-11-11T21:43:14.617 に答える
4

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

于 2010-08-27T18:10:49.597 に答える
1

少し OT ですが、おそらく便利です: Mac Chrome では、開発ツール パネルの検索ボックスから xpath をコピーすることはできませんが (代わりに、コピーによってノードが HTML として取得されます)、テキストを外部エディターにドラッグ アンド ドロップできます。

于 2012-03-30T15:43:00.903 に答える
1

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

ChroPath 拡張リンク

FirePath と同様に、この拡張機能は、[検査] をクリックすると Xpath を直接提供します。

ここに画像の説明を入力

于 2018-05-09T13:49:36.950 に答える