スリ飯屋Malankaのフリーエンジニアな日々

IT実務未経験から約1年、東京でフリーランスのRuby on Railsエンジニアに転職。約2年半、大阪中崎町でスリランカカレーの間借りしてました。フリーランスエンジニアになるためのノウハウ、スリランカの事を発信していきます。

【CSSセレクタ】超便利! chromeでCSSセレクタを1クリックで取得

【CSSセレクタ】超便利! chromeでCSSセレクタを1クリックで取得

スクレイピングの際、CSSセレクタを絞り込むのがかなり面倒。

  • この要素だけ欲しい!

  • ピンポイントで指定出来たらいいのに!

f:id:mah666hhh:20200130074537p:plain

と思い、ググっていると見つけました。

超感激です。

Chrome デベロッパーツールの隠し機能が便利!CSSのセレクタ・プロパティ・値を1クリックで見つける方法 | コリス

超便利 && やり方は超簡単です。

手順

  1. opt + cmd + i でchromeのdevtoolを起動します。

  2. 一番左上の角のボタンをクリックします。

  3. CSSセレクタを取得したい要素の上で、右クリックします。

  4. 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

これを目視で追っていくと思うとゾッとしますね...笑

同じようにxpathCopy XPATH でコピー出来ます。

コピーしたCSSセレクタやXPATHを使って、

  • スクレイピング

  • style適用

など、サクッとやっちゃいましょう。

chromeにはまだまだ知らない便利機能が隠れていそうですね。




初めての方は下記のオススメ記事もどうぞ


www.malanka.tech


www.malanka.tech


www.malanka.tech


www.malanka.tech


www.malanka.tech




最後までお読み頂きありがとうございました★


もしよかったらTwiiterのフォローもお願いします★