JavaScript
Chrome
google
Web
DeveloperTool

Chrome デベロッパーツールの Console を使いこなす

Chrome デベロッパーツールの Console には Web 画面を解析するための便利な機能が備わっています。
この便利機能を覚えておくと Web 画面からの情報抽出 や、 Chrome Extension 開発 がとても捗ります。
※ 筆者はこの機能を利用して、 ウェブスクレイピング時のDOMセレクタを調べたり、 Q Accelerator などの Chrome 拡張機能を開発しています。

本記事では、次の3つを解説します。
1. Console の便利機能
2. 実際に Qiita の画面を解析する手順
3. リアルタイムで評価結果を返す Eager Evaluation (Google IO 2018 で発表されました)

便利機能(コマンドライン API)

コマンドライン API は デベロッパーツール の Console 内で使える便利関数のことです。
リファレンスにはたくさんの関数がありますが、本記事では筆者がよく使うものを抜粋して解説します。

参考:コマンドライン API リファレンス  |  Tools for Web Developers  |  Google Developers

$$(selector)

document.querySelectorAll と似ていますが、 NodeList ではなく 配列 を返すのがポイントです。

$$は配列を返す
$$('img')  // Array

document.querySelectorAll('img') // NodeList

$$ を使うことで配列に変換する手間が省けます。
※ NodeList ではなく配列が必要なのは、 Array#splice, Array#map, Array#filter などを使用するためです。

参考: 配列 · JavaScriptの入門書 #jsprimer

$$を使用する場合としない場合
// $$を使用すると短くかける
$$().map

// $$を使用しないと次のような配列変換が必要になり面倒
Array.from(document.querySelectorAll()).map 
[...document.querySelectorAll()].map

$(selector)

document.querySelector と使い勝手は同じですが、短く書くために使用します。

同じ結果だけど短く書ける
// $を利用すると短く書ける
$('title')  

// $$を使用しないとちょっと面倒
document.querySelector('title')

$ は Web サイトに設置された jQuery で既に定義されていることが多いです。
その場合は、$$()[0] で代用すると良いでしょう。

$$()[0]で代用した例
$$('title')[0] // <title>Chrome デベロッパーツールの Console を使いこなす - Qiita​</title>​

document.querySelector('title') // <title>​Chrome デベロッパーツールの Console を使いこなす - Qiita​</title>​

$_

直前の実行結果 が格納されています。

$_は直前の実行結果が格納されている
$$('title')[0]  // <title>Chrome デベロッパーツールの Console を使いこなす - Qiita​</title>​

console.log($_) // <title>Chrome デベロッパーツールの Console を使いこなす - Qiita​</title>​

$_ が既に定義されているサイトがたまにあります。
その場合、$_ を使わずに1行で書いてしまうか、var で退避させると良いでしょう。

copy(object)

とても便利な関数です、必ず覚えましょう。
クリップボードに実行結果をコピーする事ができます。

クリップボードにコピー
copy($$('title')[0]) // copy自体は値を返さないが、実行するとクリップボードにコピーされている
// 貼り付けると次の値が表示される
// <title>Chrome デベロッパーツールの Console を使いこなす - Qiita​</title>​

clear()

Console をクリアすることができますが、ショートカットキーの方が便利です。
macOS だと Ctrl + L または Cmd + K で消せます。

table(data[, columns])

console.tableのエイリアスです、配列をテーブル表示します。
また、第二引数の columns で絞り込みが可能です。

次の画像はとあるオブジェクトを table で表示した例です。
image.png

inspect(object/function)

Elements パネルの当該要素を選択状態にします。

次の画像は inspect で Qiita の title 要素 を選択状態にした例です。
image.png

dir(object)

オブジェクトのプロパティを表示します。

次の画像は dir で Qiita の title 要素 のプロパティを表示した例です。
image.png

Qiita のトレンド記事一覧のタイトルと URL を取得する手順

コマンドライン API についていくつか解説しましたが、ここでは実際にそれらを使い、 Qiita のトレンドページから 人気記事の タイトルURL を抽出する手順を解説します。

1. 取得したい画面要素を Web インスペクタで選択

インスペクタを使って、取得したい画面要素を選択します。

image.png

2. クラス名やタグ名でセレクタのあたりをつける

クラス名やタグ名などでセレクタを推測します。
今回はクラス名を使い $$('.tr-Item_title') で取れないかを試します。

要素を抽出
$$('.tr-Item_title')

image.png

3. 選択要素を確認する

展開して、マウスカーソルを合わせることで自動で inspect が動くような動作をします。
これを利用して選択要素が合っているかを確認します。

image.png

4. 選択要素のプロパティを確認する

要素を展開して必要なプロパティを探します。
今回は、textContenthref を使うこととします。
image.png

5. Array#map でプロパティを絞った結果を確認

このままではプロパティが多すぎるので Array#map で必要なプロパティ(textContent, href)だけを返すようにします。

プロパティを絞る
$$('.tr-Item_title')
.map(e => ({textContent: e.textContent, href: e.href}))

textContenthref だけになっていることが確認できます。

image.png

tableでも確認可能

table を利用することで縦が揃うので見やすいです。
たくさんのプロパティを取得するときは使うと便利です。

テーブル表示で確認
table(
  $$('.tr-Item_title')
  .map(e => ({textContent: e.textContent, href: e.href}))
)

image.png

6. JSONでコピーする

copy を利用して抽出結果をコピーしましょう。
JSON でコピーをしたいときはそのまま copy で囲うだけです。

JSONでコピー
copy(
  $$('.tr-Item_title')
  .map(e => ({textContent :e.textContent, href: e.href}))
)

image.png

7. TSVでコピーする

TSV で copyをするときは、次のような変換処理を入れます。

TSVでコピー
copy(
  $$('.tr-Item_title')
  .map(e => [e.textContent, e.href].join('\t'))
  .join('\n')
)

image.png

TSV なのでそのままスプレッドシートなどに貼ることが可能です。
image.png

おまけ

Google IO 2018 で Eager evaluation という新機能が Console に追加されることが発表されました。
これを利用するとかなり便利になるので覚えておきましょう。

参考: Google IO の Eager Evaluation の動画
https://www.youtube.com/watch?v=Ay-mdLMDtbs&feature=youtu.be&t=953

Eager evaluation

リアルタイムで結果を下部に表示する機能です。
Chrome Canary で既に利用できます。
Eager evaluation の設定を ON にする必要があります。

image.png

あとがき

フロントエンド勉強会でこのネタについて話したところ、評判が良かったので記事にしてみました。