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

はじめに

「特定のページのこの部分を、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を活かしてできる楽しい作業の具体例は、機会があればご紹介します。