極めろ！！Google Chrome Devtools 52の関節技

[転職ナビ](https://job.j-sen.jp/)のフロントエンドを担当しています、@sueshinです。
[Livesense - 関 Advent Calendar 2017](https://qiita.com/advent-calendar/2017/livesense-kan)、22件目をお送りします。
どうぞ宜しくお願いします。

## はじめに
フロントエンドでよく注目されるJavaScriptではなく、
地味で渋いまるで関節技のような、Google Chrome Devtoolsを使った技術をtipsの形式でまとめました。

## 免責事項
* ショートカットなどは全てMacのキーボード操作にしています。Windowsユーザーは適宜読みかえてください。
* Chromeのバージョンは63系に基づいて紹介しています。

## 52の関節技！！

### Elements

#### 1.hover時のコンポーネントのCSSルールを表示
![hover時のコンポーネントのCSSルールを表示](https://qiita-image-store.s3.amazonaws.com/0/146426/99d06998-6390-3142-2271-ab616bbf4a94.jpeg)

**使い方**
①DOM要素を選択
②Stylesペインを開く
③:hovをクリック
④hoverフィルタを適用

#### 2.対応するCSSファイルを開く
![対応するCSSファイルを開く](https://qiita-image-store.s3.amazonaws.com/0/146426/d107079c-f55e-ad79-7990-23aaca3ffeef.gif)

**使い方**
①DOM要素を選択
②Stylesペインを開く
③ルールの右側にあるファイル名をクリック

#### 3.ボックスモデルを表示してライブ編集
![ボックスモデルを表示してライブ編集](https://qiita-image-store.s3.amazonaws.com/0/146426/fd03c9bc-88eb-c034-0396-7ee129851920.jpeg)

**使い方**
①DOM要素を選択
②Computedペインを開く
③任意の値をクリック

#### 4.スタイルのライブ編集で値を0.1刻みで変更する
![スタイルのライブ編集で値を0.1刻みで変更する](https://qiita-image-store.s3.amazonaws.com/0/146426/4dd20f18-91e9-cda1-bbcd-5dd3b87b9a8d.jpeg)

**使い方**
①DOM要素を選択
②Stylesペインを開く
③任意の値をクリック
④`option`を押しながら矢印キーをクリック

※`shift`を押しながらだと、10px刻みになります。

#### 5.カラーピッカーで色を変更する
![カラーピッカーで色を変更する](https://qiita-image-store.s3.amazonaws.com/0/146426/b1299cc7-0aa8-0879-64bd-79fcf5370778.jpeg)

**使い方**
①DOM要素を選択
②Stylesペインを開く
③色付きの正方形をクリック

#### 6.transition-timing-functionをGUIで調整
![transition-timing-functionをGUIで調整](https://qiita-image-store.s3.amazonaws.com/0/146426/f24f6bd0-d0e0-d6c1-d062-dae453f5a49a.jpeg)

**使い方**
①DOM要素を選択
②Stylesペインを開く
③プロパティ値左の正方形をクリック

#### 7.最終的に適用されているCSSを表示
![最終的に適用されているCSSを表示](https://qiita-image-store.s3.amazonaws.com/0/146426/31429877-1b75-5402-5af3-fd6ad1dab533.jpeg)

**使い方**
①DOM要素を選択
②Computedペインを開く

#### 8.パンくずで親要素をたどる
![パンくずで親要素をたどる](https://qiita-image-store.s3.amazonaws.com/0/146426/b2bc6e85-a2f8-fe3c-a6d8-5addf7702222.gif)

**使い方**
①ノードをクリック
②パンくずリストをクリック

#### 9.DOMの変更を検知
![DOMの変更を検知](https://qiita-image-store.s3.amazonaws.com/0/146426/9a993da5-e0b9-0f19-bf81-d3997c2d8f6b.jpeg)

**使い方**
①DOM要素を選択
②右クリックして監視したいブレークポイントを設定
③JavaScriptで任意の操作

※サブツリーの変更、属性の変更、ノードの削除に紐付けられます。

#### 10.DOM要素に登録されているイベントリスナーを確認
![DOM要素に登録されているイベントリスナーを確認](https://qiita-image-store.s3.amazonaws.com/0/146426/851dea3c-9d82-a7d9-68df-cb6da122f824.jpeg)

**使い方**
①DOM要素を選択
②Event Listenersペインを開く

#### 11.DOM要素の祖先に登録されているイベントリスナーを含めて確認
![DOM要素の祖先に登録されているイベントリスナーを含めて確認](https://qiita-image-store.s3.amazonaws.com/0/146426/5a8ef893-c8e9-e832-4d4d-6d2446aeb25f.jpeg)

**使い方**
①DOM要素を選択
②Event Listenersペインを開く
③Ancestorsチェックボックスをクリック

#### 12.jQueryなどで定義した関数の宣言場所を調べる
![jQueryなどで定義した関数の宣言場所を調べる](https://qiita-image-store.s3.amazonaws.com/0/146426/0c2ce217-3bd6-d167-14e3-7f1d229030b4.jpeg)

**使い方**
①DOM要素を選択
②Event Listenersペインを開く
③Framework Linstenersチェックボックスをクリック

#### 13.DOMノードをドラッグで移動
![DOMノードをドラッグで移動](https://qiita-image-store.s3.amazonaws.com/0/146426/9d697353-3e27-0204-efcd-0923aaa8a15c.gif)

**使い方**
①ノードをクリック
②ドラッグする

#### 14.宣言毎にコメントアウト
![宣言毎にコメントアウト](https://qiita-image-store.s3.amazonaws.com/0/146426/fff45922-5505-b643-c3f9-2332ce9bf1c4.jpeg)

**使い方**
①DOM要素を選択
②Stylesペインを開く
③Stylesペインをhoverする
④チェックボックスを押下

### Console

#### 15.リロードしてもコンソールの履歴を保持する
![リロードしてもコンソールの履歴を保持する](https://qiita-image-store.s3.amazonaws.com/0/146426/72b1a971-29aa-10bb-fc19-096ed8b5a470.jpeg)

**使い方**
①歯車アイコンを押下
②preserve logのチェックボックスをクリック

#### 16.iframe内のDOMを操作する
![iframe内のDOMを操作する](https://qiita-image-store.s3.amazonaws.com/0/146426/11b09943-2dcf-d6a8-d043-f461c156b3ef.jpeg)

**使い方**
①iframe要素を選択
②実行コンテキスト(画像ではcdn.api.b.hatena.n...)がtop以外になっていることを確認
③任意のJavaScriptを実行

#### 17.コンソールメッセージにタイムスタンプを表示
![コンソールメッセージにタイムスタンプを表示](https://qiita-image-store.s3.amazonaws.com/0/146426/0e23bdd8-7474-d3c4-ee67-48dc06505372.jpeg)

**使い方**
①歯車アイコンをクリック
②show timestampsのチェックボックスをクリック

#### 18.コンソールからElementsパネルのエレメントを指定
![コンソールからElementsパネルのエレメントを指定](https://qiita-image-store.s3.amazonaws.com/0/146426/554553f7-89a2-7132-4f4b-0a0c7a182de3.gif)

**使い方**
①inspect()の引数に任意のDOM要素を指定

#### 19.Elementsパネルで指定した要素をコンソールで取得
![Elementsパネルで指定した要素をコンソールで取得](https://qiita-image-store.s3.amazonaws.com/0/146426/53010d7a-7462-61d4-d83e-6e7ffb395277.jpeg)

**使い方**
①コンソールで`$0`と入力

#### 20.表形式でオブジェクトを表示する
![表形式でオブジェクトを表示する](https://qiita-image-store.s3.amazonaws.com/0/146426/96e91ab1-bcca-4add-3b41-ad2064275f1d.jpeg)

**使い方**
①`console.table()`の引数に任意のオブジェクトを指定

#### 21. リスト形式でオブジェクトを表示する
![リスト形式でオブジェクトを表示する](https://qiita-image-store.s3.amazonaws.com/0/146426/c8a0473b-f48a-8376-afc3-4eb522c9810b.jpeg)

**使い方**
①`console.dir()`の引数に任意のオブジェクトを指定

#### 22.履歴をクリア
![履歴をクリア](https://qiita-image-store.s3.amazonaws.com/0/146426/3c6bacb4-624a-9c52-971a-d7eccb54606e.gif)

**使い方**
①コンソールで`clear();`と入力

### Sources

#### 23.コードを自動整形
![コードを自動整形](https://qiita-image-store.s3.amazonaws.com/0/146426/0711f3f9-c799-ecd1-0f8a-8e0dc6960edc.gif)

**使い方**
①任意のJavaScriptコードを開く
②{}を押下

#### 24.ブレークポイントを使ってデバッグ
![読み込み途中のオブジェクトの状態を確認](https://qiita-image-store.s3.amazonaws.com/0/146426/9d57a5cf-c377-24e3-c3d1-e3632c6f47a9.jpeg)

**使い方**
①確認したい行番号をクリック
②該当行のJavaScriptを実行する

#### 25.読み込んだファイルを開く
![読み込んだファイルを開く](https://qiita-image-store.s3.amazonaws.com/0/146426/10c4a8a3-3d8b-4574-0154-97177cffd8e4.jpeg)

**使い方**
①`cmd + o`で入力フォームを表示
②任意のファイル名を選択

### Network

#### 26.ネットワークアクティビティを記録
![ネットワークアクティビティを記録](https://qiita-image-store.s3.amazonaws.com/0/146426/99317777-d8a9-1c6d-d75d-30dfb2b48787.gif)

**使い方**
①Networkパネルを開いた状態でリロード

#### 27.Filmstrip(表示箇所のスクリーンショット)を時間毎に取得
![Filmstrip(表示箇所のスクリーンショット)を時間毎に取得](https://qiita-image-store.s3.amazonaws.com/0/146426/d424d661-82c5-a670-8de2-bec00d8dc707.jpeg)

**使い方**
①カメラアイコンをクリック
②リロード

#### 28.HTTPヘッダーを表示
![HTTPヘッダーを表示](https://qiita-image-store.s3.amazonaws.com/0/146426/1f464523-7b55-b2ef-7d7e-b6cc7d96ca14.jpeg)

**使い方**
①リソース名をクリック
②Headersタブを選択

#### 29.リソースのプレビューを表示
![リソースのプレビューを表示](https://qiita-image-store.s3.amazonaws.com/0/146426/62346425-f6eb-c94d-d3a0-2fbac4049176.jpeg)

**使い方**
①リソース名をクリック
②Previewタブを選択

#### 30.リソース依存関係を表示
![リソース依存関係を表示](https://qiita-image-store.s3.amazonaws.com/0/146426/79479e6e-6a8b-ab03-4aa4-abc573fc9bb9.jpeg)

**使い方**
①shiftを押しながらリソース名をhoverする

#### 31.列見出しを追加
![列見出しを追加](https://qiita-image-store.s3.amazonaws.com/0/146426/954cd2df-12f9-0415-a2c4-fb0f4cffba70.jpeg)

**使い方**
①列見出し上で右クリック

#### 32.各リソースを2行で表示
![各リソースを2行で表示](https://qiita-image-store.s3.amazonaws.com/0/146426/63ae79b9-0cdf-f5d6-a5f7-09e3b0a52cdb.jpeg)

**使い方**
①アイコン(Use large request rows)をクリック

#### 33.各リソースを読み込みにかかった時間順に並び替え
![各リソースを読み込み時間順に並び替え](https://qiita-image-store.s3.amazonaws.com/0/146426/245f9707-960c-3702-419e-03c04aa51e42.jpeg)

**使い方**
①列見出し上で右クリック
②WaterfallのTotal Durationをクリック

#### 34.リソースを種類ごとにフィルタリング
![リソースを種類ごとにフィルタリング](https://qiita-image-store.s3.amazonaws.com/0/146426/3176e32d-95b3-1318-7339-4fe5199161e0.jpeg)

**使い方**
①Filterボタンをクリック
②フィルタリングしたい種類のテキスト名をクリック

#### 35.ファイルサイズを指定してフィルタリング
![ファイルサイズを指定してフィルタリング](https://qiita-image-store.s3.amazonaws.com/0/146426/572489e0-a3f2-426b-be3c-2fe37da63bbe.jpeg)

**使い方**
①Filterボタンをクリック
②表示されてテキストボックスに`larger-than:10k`と入力

#### 36.ネットワーク速度を変える
![ネットワーク速度を変える](https://qiita-image-store.s3.amazonaws.com/0/146426/793e787b-dec2-f81d-6944-b895eedb30dc.jpeg)

**使い方**
①パネル上部の矢印をクリック
②任意の値を選択

#### 37.キャッシュを無効にする
![キャッシュを無効にする](https://qiita-image-store.s3.amazonaws.com/0/146426/0623d2c6-b061-53b7-69c8-9824af5b00b4.jpeg)

**使い方**
①Disable cacheチェックボックスをクリック

### Performance

#### 38.Filmstrip(表示箇所のスクリーンショット)を時間毎に取得
![Filmstrip(表示箇所のスクリーンショット)を時間毎に取得](https://qiita-image-store.s3.amazonaws.com/0/146426/4b2113c6-774e-9f63-faf1-f4552a7485e8.jpeg)

**使い方**
①Screenshotsチェックボックスを押下
②記録開始

#### 39.読み込み時のパフォーマンス情報を取得
![読み込み時のパフォーマンス情報を取得](https://qiita-image-store.s3.amazonaws.com/0/146426/98daf1c8-9d9f-3b2e-0b11-630529fb18f7.gif)

**使い方**
①左上のアイコンを押下し、画面を再読込

#### 40.ペイントプロファイラを表示
![ペイントプロファイラを表示](https://qiita-image-store.s3.amazonaws.com/0/146426/25e8dba6-fd34-ba8e-ecc9-89b5a8c7ce08.jpeg)

**使い方**
①右上の歯車アイコンを押下
②Enable advanced paint instrumentationチェックボックスをクリック
③パフォーマンス情報を再取得
④paintをクリック
⑤paint profilerタブを開く

### Application

#### 41.Cookie情報を編集
![Cookie情報を編集](https://qiita-image-store.s3.amazonaws.com/0/146426/a3bb3793-35e2-ad08-7e22-bcd17240506f.jpeg)

**使い方**
①Cookies横の矢印をクリック
②任意のドメイン名をダブルクリック
③任意の値をダブルクリック

#### 42. Cookie情報を削除
![Cookie情報を削除](https://qiita-image-store.s3.amazonaws.com/0/146426/1422a5c6-29cc-2ec0-ecbf-583b0966c919.jpeg)

**使い方**
①Cookies横の矢印をクリック
②任意のドメイン名を右クリック
③Clearを選択

### Audits

#### 43.主要コンテンツの表示速度を表示
![主要コンテンツの表示速度を表示](https://qiita-image-store.s3.amazonaws.com/0/146426/2459a6fb-2c04-c0fe-4677-f137afe6b082.jpeg)

**使い方**
①Perform an auditをクリック
②Run Auditをクリック
③Performanceアイコンをクリック

### Other

#### 44.フルスクリーンショットをとる
![フルスクリーンショットをとる](https://qiita-image-store.s3.amazonaws.com/0/146426/38acf80f-0f93-fd3e-cc83-aeb56e2839c6.jpeg)

**使い方**
①`cmd + shift + p`で入力フォームを表示
②`Capture full`と入力

#### 45.コンポーネントのキャプチャーをとる
![コンポーネントのキャプチャーをとる](https://qiita-image-store.s3.amazonaws.com/0/146426/06abe993-3a05-4ab3-addf-8530607a4b8b.gif)


**使い方**
①DOM要素を選択
②`cmd + shift + p`で入力フォームを表示
③`Capture node`と入力

#### 46.fpsメーターを表示
![fpsメーターを表示](https://qiita-image-store.s3.amazonaws.com/0/146426/198ba47e-c1e6-f3e1-fd20-7576df620b15.jpeg)

**使い方**
①escクリック
②左のメニューボタンからRenderingを選択
③FPS meterのチェックボックスをクリック

#### 47.画面上の描画をハイライト表示
![画面上の描画をハイライト表示](https://qiita-image-store.s3.amazonaws.com/0/146426/2c89c4e6-80bc-d4e7-2bcb-a17491723239.gif)

**使い方**
①escクリック
②左のメニューボタンからRenderingを選択
③Paint flashingのチェックボックスをクリック

#### 48.アニメーションのデバッグ
![アニメーションのデバッグ](https://qiita-image-store.s3.amazonaws.com/0/146426/5003d05e-768f-7a4b-5182-660f29d3193d.jpeg)

**使い方**
①escクリック
②左のメニューボタンからAnimationsを選択
③アニメーションを実行

### Device Mode

#### 49.スマートフォンのデバイスを変更してシミュレート
![スマートフォンのデバイスを変更してシミュレート](https://qiita-image-store.s3.amazonaws.com/0/146426/c3a59205-86c6-2aff-4036-0f2e5a4bcf26.jpeg)


**使い方**
①左上のスマートフォンアイコンをクリック
②リロード
③デバイス名をクリック

#### 50.スマホのデバッグでマシンパワーを変えてみる
![スマホのデバッグでマシンパワーを変えてみる](https://qiita-image-store.s3.amazonaws.com/0/146426/6f0bb993-b0a9-27fe-d139-8d56db23539e.jpeg)

**使い方**
①左上のスマートフォンアイコンをクリック
②リロード
③Onlineをクリック

#### 51.エミュレート対象のデバイスを追加
![エミュレート対象のデバイスを追加](https://qiita-image-store.s3.amazonaws.com/0/146426/af44cbbd-4e74-1bdf-02b9-c5e37a049c7f.jpeg)

**使い方**
①`?`を入力し、Settingsを開く
②Devicesをクリック
③任意のデバイス名を選択

#### 52.デバイスピクセル比を変更
![デバイスピクセル比を変更](https://qiita-image-store.s3.amazonaws.com/0/146426/26a0bb73-e4d6-008f-1631-eba6bbe0fef8.jpeg)

**使い方**
①左上のスマートフォンアイコンをクリック
②リロード
③メニューアイコンをクリック
④Add device pixel ratioを選択

## あとがき
テーマは「**関**」ときいて「52の**関**節技」を思いつき、執筆を頑張ったのですが、
出来上がってみるとネタとの**関**連がわかりにくい、ただ長いだけの記事になってしまいました(・ω<) てへぺろ
この辺が今の僕にとっての**関**の山かもしれません。
長文にお付き合いいただきまして、ありがとうございました。
来年はもっと頑張りたいです(・∀・)
元ネタをご存知の方、マッスルエンジニアはいいねを押してくれると幸いですmm
良いお年を！！


## 参考
[Chrome DevTools  |  Tools for Web Developers  |  Google Developers](https://developers.google.com/web/tools/chrome-devtools/?hl=ja)