【CSSセレクタ】超便利! chromeでCSSセレクタを1クリックで取得
スクレイピングの際、CSSセレクタを絞り込むのがかなり面倒。
この要素だけ欲しい!
ピンポイントで指定出来たらいいのに!
と思い、ググっていると見つけました。
超感激です。
Chrome デベロッパーツールの隠し機能が便利！CSSのセレクタ・プロパティ・値を1クリックで見つける方法 | コリス
超便利 && やり方は超簡単です。
手順
opt + cmd + iでchromeのdevtoolを起動します。一番左上の角のボタンをクリックします。
CSSセレクタを取得したい要素の上で、右クリックします。
Copyにカーソルを合わせると、Copy selector という項目が出てくるのでそれをコピーします。
これで対象要素のCSSセレクタをコピー出来たので、貼り付けして確認します。
はてなブログの記事編集タイトルだとこんな感じです。
#admin-main > section > div.main-box > table > tbody > tr:nth-child(3) > td.td-entry-title > div > div.entry-table-cell > div.entry-table-entry-title > a
これを目視で追っていくと思うとゾッとしますね...笑
同じようにxpathも Copy XPATH でコピー出来ます。
コピーしたCSSセレクタやXPATHを使って、
スクレイピング
style適用
など、サクッとやっちゃいましょう。
chromeにはまだまだ知らない便利機能が隠れていそうですね。
