Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

技術書典5 で本記事をさらにパワーアップさせた本を書いたのでよかったらどうぞ
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

あとがき

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした