ChromeDevツールでJSPathをコピーする機能を伝えたい

3743 ワード
Chrome JavaScript ChromeDevTool JavaScript テキストリンク

はじめに

「特定のページのこの部分を、jsで操作できる形で欲しい...」みたいなケースが時折あります。
そんな時はChromeDevツールでJSPathをコピーしてみましょう!

機能と使い方

こんな機能

  • 画面内のお好みの要素をjsで扱いやすい形で持ってくる機能です。
  • document.querySelector("取得したい要素のXPath")として取得されます。

使い方

  1. ChromeDevツールを開き、 Elements で取得したい要素を選ぶ
  2. 右クリック > Copy > Copy JS path
  3. 完了!

<参考資料> Copyの画面キャプチャ

実際にやってみる

IBJ.Incのアドベントカレンダーのタイトルで試します。

コピーされたJSpath

copied_JSpath.js
document.querySelector("#main > div.adventCalendarJumbotron > div > div > div > div > h1")

consoleに流してみる

コピーできていますね。

加工してみる

querySelectorで取得しているので、簡単に加工できます。

テキスト部分のみ取得してみる
  • コピーしたJSPathのinnerTextを持ってくればOKです。
innerText.js
document.querySelector("#main > div.adventCalendarJumbotron > div > div > div > div > h1").innerText

//console出力
//"IBJ.Inc Advent Calendar 2020"
選択箇所の色を変えてみる
  • コピーしたJSPathにBackground-colorを設定してみます。
Background-color.js
document.querySelector("#main > div.adventCalendarJumbotron > div > div > div > div > h1").style.backgroundColor = 'yellow'

これが嬉しい

  • 探すのが面倒な「画面の特定の場所のパス」を自由に拾ってくることができます
    • パスが分かれば、あとは目的に合わせて自由に加工するだけですね。
  • 応用するとconsoleで動かす簡単なフィルターや集計ツールが作れます。
    • サイト画面上でしか取れない集計データなんかが使い所です。

終わりに

最後まで読んでいただきありがとうございました。
コピーしたJSPathを活かしてできる楽しい作業の具体例は、機会があればご紹介します。