WebページのCSSパスを簡単に知る方法

Nokogiri.rbなどのスクレイピングをやるときに、Webページの特定要素のCSSセレクタを調べることが多くあります。

環境

• Mac OSX 10.9.5
• Chrome

やり方

• chromeでは、Command + Option + i でデベロッパーツールが下から表示されます。

• ここで、左上のルーペ部分をクリック。

• CSSパスを見たい要素を選択します。

• 右クリックして「Copy CSSパス」をクリックすると、クリップボードにCSSパスがコピーされます。

結果：

body > div > div > div > article > header > h1

出てきたパスは長すぎるので、あとはこれを適当に削って使うといいですよ。