XPathの動作結果を確認する方法(Chrome版)

PCサイトの要素をXPathで指定しようとしても取得がうまくいかず、
結果XPathの記述が誤っていて要素自体取れていなかった、ということはありませんか。
その間違いに気がつくのが実装するタイミングだと、作業が後手に回り不便です。
そうならないためには、予めXPathの記述は正しいと分かっている必要があります。
そんな時に便利なのが、Google Chromeのデベロッパー・ツールです。

デベロッパー・ツールは、

Windows : 右クリックから要素の検証

Mac : Command + alt + i

で起動することができます。

このデベロッパー・ツールにあるconsoleパネルを使用してXPathの確認ができます。

なお、初期表示の場合はconsoleパネルが非表示になっている場合があります。
その際は、"Elements","Network"などの項目と同じ列にある">_"をクリックしてください。

consoleパネルにXPathを記述すると、サイト内で取得できたものが表示されます。
記述をする時は、XPathを $x(' ') で囲むようにしてください。

例1. body

bodyをXPathで取得できるか記述してみましょう。

エンターを押すと、きちんとbodyが取得できているのがわかります。
逆に、ここで記述が誤っていると…

何も取得できません。


例2. header

このページはheaderにidがついているので、それで指定します。

問題なく取得できました。


例3. 表示されている画像の中の一つ

一番左端にある画像を取得してみます。
右側に表示されているDOMを見ながらXPathを記述していきます。

記述してみましたが、画像は複数取れてしまいました。
どこがダメだったのか、少しずつ絞っていきます。

これで一個だけが取得できるようになりました。


このように、サイト上でXPathがあっているかそうでないか、
確かめながら記述を行うことができます。
書き方に不安がある方や、取得できているか確認したい場合は、
ぜひこのツールをご活用ください。

他にご質問がございましたら、リクエストを送信してください
Powered by Zendesk