Chrome デベロッパーツールの使い方まとめ

# デベロッパーツールで出来ること
Google Chromeのデベロッパーツールは、フロントエンド開発において欠かせないツールです。
他のブラウザにも同様のツールはありますが、Chromeのものが最も使いやすいと感じる人が多いのではないでしょうか。

デベロッパーツールは機能毎にタブで別れています。
まずは使用頻度の高いタブについて簡単に説明をします。


- Elements
 - DOMの確認、編集
 - DOM要素の変更タイミングにブレイクポイントを設定
 - styleの確認、編集
 - hoverなど状態の設定
- Console
 - 任意のJSの実行 
 - JSエラーの確認
- Network
 - 通信内容の確認
- Sources
  - デバッガーの使用
- Application
  - CookieやWeb Storageの確認、編集

なお、タブはドロップアンドドラッグで並び替えが出来ますので、使いやすい順序に並び替えるといいでしょう。

# 環境
- Mac High Sierra
- Chrome 67.0.3396.99

# ショートカットキー
よく使用するショートカットキーについて説明をします。

| 操作       | キー|
|:-----------------|:-----------------|
|デベロッパーツールを開く|Cmd + Alt + i|
|Consoleを開く|Cmd + Alt + j|
|左のタブに移動|Cmd + [|
|右のタブに移動|Cmd + ]|
|要素を選択して検証|Cmd + Shift + c|
|デバイスモードのオンオフ|Cmd + Shift + m|
|全体検索|Cmd + Alt + f|



# Elementsタブ
要素がどんなタグやstyleで構成されているか、確認することが出来ます。
**Cmd + Shift + c** のショートカットを使ったり、要素を右クリックして「検証」をクリックすると、任意の要素を簡単に調べることが出来ます。

<img width="842" alt="スクリーンショット 2018-07-08 0.37.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/101999/d8be61f8-4fcb-aab4-d697-b10ba0e75d33.png">

## 要素を編集する
要素の内容はダブルクリックすることで編集が可能です。
**F2**のショートカットキーを使うと、子要素もまとめて編集が出来ますので、複数の箇所を変更したいときは、ショートカットキーを使うといいでしょう。
また、**Delete**キーを押すことで要素を削除することもできます。**Cmd + z** でアンドゥ、**Cmd + Shift + z**でリドゥも可能です。

## マージンやパディング、サイズを確認する
右側の**Computed**タブを開くと要素自身のサイズや、マージン、パディングを確認することが可能です。
クリックすることで、このまま編集することも可能です。

<img width="447" alt="スクリーンショット 2018-07-08 1.16.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/101999/a3c3e981-dab1-3dfb-2c2e-00e31f78dfc6.png">


## 要素の変更に対してブレイクポイントを貼る
要素のstyleやクラスをJSで変更する処理を書く際に、要素の変更に対してブレイクポイントを使用すると便利です。

要素を右クリックすることで**Break on**という表示が出てきます。

サブツリーの変更、要素の変更、ノードの削除に対して、ブレイクポイントを設定することが出来ます。

<img width="366" alt="スクリーンショット 2018-07-08 1.07.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/101999/f8334a8c-70d1-a334-23c9-10c9240ff535.png">

設定したブレイクポイントは、右側の**DOM Breakpoints**タブで確認が可能です。

ブレイクした場合は、Sourcesタブにフォーカスが移ります。
**DOM Breakpoints**というチェックボックスにて、オンオフの切り替えが可能です。

<img width="219" alt="スクリーンショット 2018-07-08 1.09.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/101999/dd5bdf02-bfbb-225c-b8fb-329502c9a8f4.png">


## styleを編集する
右側の**Styles**タブでstyleの編集が可能です。
各カーソルを当てるとチェックボックスが表示されますので、クリックすることでオンオフを切り替えることが出来ます。

<img width="496" alt="スクリーンショット 2018-07-08 0.52.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/101999/88646755-3a9b-21c8-b974-093d48b12947.png">

Stylesタブにて、他にも以下のようなことが可能です。

- Filterに文字を入力すると、style名で絞り込みが出来ます。
- :hovをクリックすると、要素をマウスオーバーした状態にすることが出来ます。
- .cls をクリックすると、クラスを追加することが出来ます。
- + をクリックすると現在のセレクタ名が挿入されますが、その部分は任意のセレクタに書き換えて使うことが出来ます。例えばspanタグで+を押すと `span` のセレクタが挿入されますが、それ `*` のようにも変更できます。
- element.style の欄に自由にstyleを追加することが出来ます。

## 子要素を一気に展開する
要素の左の矢印を押すことで子要素を展開できますが、孫要素までは展開されません。
階層が深い要素の場合、1つ1つクリックして要素を展開するのは大変です。
altを押しながら→を押すと、一気に展開することが出来ます。
もしくは右クリックして、**Expand Recursively**でも可能です。

# Consoleタブ
JSのエラーやconsole.logを表示する以外に、任意のJSを入力して実行することが出来ます。
関数やプロパティについては、タブで補完が可能です。
JSを実行する際は、ブレイクポイントと併用することが多いです。

<img width="720" alt="スクリーンショット 2018-07-08 2.05.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/101999/adf937a4-a05b-c7e9-b94a-201e580ddd85.png">

他には以下のような使い方が可能です。

- 左から2番目の丸のボタンでクリアが可能です。
- topの↓矢印を展開すると、iframeに切り替えが可能です。この場合、iframe内でJSを実行できます。
- Filterで絞り込みが可能です。
- Default levelsの↓矢印を展開することで、表示レベルの切り替えが可能です。

# Networkタブ
JSや画像など、ページを開いた際に行われた通信を確認することが出来ます。
APIのAjax通信のリクエストやレスポンスも確認することが出来ます。

<img width="830" alt="スクリーンショット 2018-07-08 3.17.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/101999/0960c1ff-67da-4586-1a5b-0bbcefc38978.png">

よく使う機能を紹介します。

- 左から2番目の丸のアイコンでクリアが出来ます。
- 漏斗のアイコンでFilterが出来ます。`/aaa|bbb/` のように正規表現も可能ます。
- **Disable cache**にチェックを入れるとブラウザキャッシュを無効に出来ます。

通信をクリックをすると、**Headers** や **Preview**のタブが表示されます。

右側の**Headers**を下にスクロールすることで、リクエストヘッダやレスポンスヘッダ、クエリ文字列の確認が可能です。

**Preview**では、JSONなどのAPIレスポンスを整形された状態で確認が可能です。

<img width="359" alt="スクリーンショット 2018-07-08 3.28.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/101999/fb1cafce-b487-a019-ad33-08805fad7276.png">



# Sourcesタブ
デバッガーを起動することで、ＪＳのデバッグをすることが出来ます。

## ミニファイの解除

多くのサービスでは、ＪＳはサイズ減少のためにミニファイされていて、そのままだとデバッグが難しいため、まずはミニファイを解除します。

左のツリーからＪＳファイルを選択すると、ソースの左下に **{}** と表示された箇所があります。
ここをクリックすると、ミニファイを解除して整形をして表示をしてくれます。


<img width="433" alt="スクリーンショット 2018-07-08 14.42.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/101999/bfa69dac-76b5-3c02-929a-54bf48f98694.png">

## ブレイクポイントの設定
左のツリーからＪＳファイルを選択し、ファイルの行数部分をクリックすることでブレイクポイントを設定できます。

<img width="565" alt="スクリーンショット 2018-07-08 13.40.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/101999/5db71fba-b66f-e98a-0a8d-0dfa23e80fcf.png">

ブレイクさせた状態にて、変数の値を確認したいことはよくあります。
変数の値を確認するには、以下の方法があります。

- 代入された変数は、その行の右側に値が表示されるのでそれを見る。
- 変数にカーソルをあてる。
- Watchに変数を追加する（後述）。
- Consoleタブに移動して表示したい変数をタイプする。

Watchに変数を追加するには、**+**をクリックして、変数名を入力します。

<img width="228" alt="スクリーンショット 2018-07-08 14.50.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/101999/639c4546-54d7-0886-2895-f184f74d5e29.png">

## ステップ実行

ブレイクポイントから1行進めたり、次のブレイクポイントまで進める処理は、ボタンで行うことが出来ます。

<img width="228" alt="スクリーンショット 2018-07-08 14.50.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/101999/639c4546-54d7-0886-2895-f184f74d5e29.png">

ボタンにカーソルを当てると、ショートカットキーが表示されます。

| 操作       | キー|
|:-----------------|:-----------------|
|次のブレイクポイントまで進む|F8|
|ステップ実行(関数に入る)|F9|
|ステップオーバー(関数に入らない)|F10|
|ステップイン(関数に入る、ステップ実行との違いはよく分かっていない)|Cmd + ;|
|ステップアウト(関数から抜ける)|Cmd + Shift + ;|


# Applicationタブ

CookieやWeb Storageの中身を確認したり、編集することが可能です。

<img width="386" alt="スクリーンショット 2018-07-08 15.31.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/101999/d5a6614d-fd5c-c1f5-ed3e-4dd6370310c7.png">

なお、Cookieを編集するなら、[EditThisCookie](https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg)というアドオンを使うと便利です。


# そのほかの機能

## デバイスを切り替える
スマホやタブレットなど、他のデバイスのエミュレートも可能です。
左から2番目のデバイスボタン、または **Cmd + Shift + m** を実行します。

<img width="280" alt="スクリーンショット 2018-07-09 0.20.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/101999/69f9087d-340f-2fa4-64ef-eeca57d2922b.png">

デバイスはプルダウンで選択が可能です。
<img width="449" alt="スクリーンショット 2018-07-09 0.19.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/101999/8fbd6966-2d9d-b79a-d1c4-43ee1abae2e7.png">

また、一番右の回転ボタンを押すことで、ポートレート(縦)とランドスケープ(横)を切り替えることも出来ます。
`orientationchange` イベントも発火します。

## デバイスの追加

デバイスのプルダウンに、主要なiPhoneやiPadは用意されていますが、他のデバイスを追加したい場合は、デベロッパーツールの右にある**Settings**を開き、**Devices**をクリックすることで追加が可能です。

<img width="274" alt="スクリーンショット 2018-07-08 15.45.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/101999/081d644f-3215-cf76-1c92-a8d4ee479092.png">

## 全リソースから検索

**Cmd + Alt + f** を押すことで、全リソースファイルの中から任意の文字列を検索出来ます。
例えば、ライブラリがどのＪＳファイルによって実行されているかを調査したい場合などに重宝します。

<img width="421" alt="スクリーンショット 2018-07-08 23.46.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/101999/49de8b2c-d71a-a5d0-e0f0-9db8fa1e7423.png">

また、Networkタブの虫メガネボタンを押すと、同様に全リソースから検索が出来ます。

こちらは見つかった要素をクリックすると、Networkタブの通信がフォーカスされるのに対して、上記の検索はSourcesタブで開きます。

<img width="318" alt="スクリーンショット 2018-07-08 23.48.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/101999/57e19975-98a7-659b-31b4-8ca63cb19e90.png">


## コマンドを実行
**Cmd + Shift + p** を押すことで、コマンドを実行することが出来ます。
色々な使い方が出来ますが、例えば目的のタブに移動をする場合にも使えます。netと入力すると **Show　Network** が候補に出ますので、EnterでNetworkタブに移動が出来ます。
![スクリーンショット 2020-11-29 14.35.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101999/fc0fa800-33e8-5de2-0d7b-cd3a913a43b7.png)





## テーマを黒にする

デベロッパーツールのテーマは白ベースがデフォルトですが、黒ベースに切り替えも可能です。
Settingsを開き、PreferencesのThemeで**Dark**が選択出来ます。

<img width="274" alt="スクリーンショット 2018-07-08 15.45.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/101999/081d644f-3215-cf76-1c92-a8d4ee479092.png">

<img width="412" alt="スクリーンショット 2018-07-09 0.26.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/101999/15a64511-3e5a-3742-0e6b-97e2c7651288.png">

こちらがDarkに切り替えた状態です。
<img width="589" alt="スクリーンショット 2018-07-09 0.28.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/101999/8b5e3cef-db49-bda0-17d2-06645f9e1b9b.png">



## AndroidのChromeをデバッグする

AndroidとPCをUSBケーブルでつなぐことで、AndroidのChromeで表示したページをPCのデベロッパーツールでデバッグすることが出来ます。

まずは、Androidの設定に**開発者向けオプション**を表示させる必要があります。
以下の手順を実行します。なお、Androidは端末により操作方法が異なりますので、適宜読み替えて下さい。

1. 設定をタップ
1. 端末情報をタップ
1. ソフトウェア情報をタップ
1. ビルド番号を連打

これで開発者向けオプションが表示されるようになりました。
開発者向けオプションを開き、**USBデバッグ**をオンにします。

この状態でAndroidにてChromeで任意のページを開き、USBケーブルでPCと接続します。

次にPCのChromeを開き、 ロケーションバーに `chrome://inspect` と入力します。
以下のようにAndroid端末と、Chromeで開いたページのURLが表示されます。
**inspect**をクリックすることで、デベロッパーツールが起動します。

<img width="544" alt="スクリーンショット 2018-07-09 0.49.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/101999/4ad954c5-d25d-2a23-7ea6-5159da02b437.png">

アプリのビルド時に設定が必要ですが、**WebView**についてもデバッグが可能です。

なお、iPhoneのChromeのデバッグ方法は分かりません。


## 各種フレームワークのための拡張
拡張機能により、**React**や**Vue.js**などのフレームワークの開発を支援してくれる機能が追加可能です。

- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
- [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
- [MobX Developer Tools](https://chrome.google.com/webstore/detail/mobx-developer-tools/pfgnfdagidkfgccljigdamigbcnndkod)
- [Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=es)