Chrome Developer Toolsことはじめ

## はじめに
本記事は[コネヒト Advent Calendar 2020](https://qiita.com/advent-calendar/2020/connehito)の6日目の記事です。

こんにちわ！フロントエンジニアの黒田です。
今年も残すところあとわずかになってきましたが、年内やり残しがないよう気張っていきましょう！
（と言いたいところですが、筆者気温差に負けて現在進行形でKO中！！！）
コロナもそうですが皆さん体調管理には気をつけてくださいね！

ところで、特にフロントエンドの実装をする際、皆さんブラウザの開発者ツールをお使いだと思いますが、
本記事では、Chrome Developer Toolsについて、各種パネルの機能を(パネル数がそれなりにあるので)超絶ざっくり説明していきたいと思います。
※執筆時点でのバージョンは87.0になります
![chrome_version.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143841/84a20a20-340e-519f-8c69-f71a19c2ae51.png)

## Chrome Developer Toolsとは
Google Chromeに搭載されている純正のデバッグツールで、閲覧しているWebページのレイアウトやHTML,CSS,JSといったソース、APIリクエストやレスポンスといった通信、ひいてはパフォーマンスなど様々な情報を閲覧・操作できるツールです。
Macの場合だと、「右クリック→検証」で開くことができるほか、ショートカットとして「Cmd+option+I」「Cmd+option+C」「Cmd+option+J」などいくつか表示させる方法が存在します。

## Inspect
まずは、Inspect機能です。
一番左上にあるInspectアイコンをクリックしてアクティブにしてみます。
するとWebページの**各要素をマウスオーバーすることによって、そのHTML、CSS、イベントなどの情報が一目で確認**することができます。
![inspect.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143841/c1d5683c-719c-0ed8-77e7-31bfa655b654.png)

## Device Mode
次は、Device Mode機能です。
これをアクティブにすることによって、スマホやタブレットといった**Mobileデバイスでどう表示されるか**について確認することができます。
「Responsive」のプルダウンメニューで主要デバイスが選択でき、確認したい端末でどう表示されるか、崩れていないかをチェックできます。
![device_mode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143841/f6c59d14-ba9a-34ed-ad3d-bc15c58d3b57.png)

## Elementsパネル
ここからは各パネルについて見ていきます。
最初は皆さんおそらくよくご存知のElementsパネルです。
ここではWebページのHTML、CSSといった**要素を確認したり編集したりしてリアルタイムに検証**することができます。
![elements.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143841/1dec6d7d-4123-6765-031d-05b3a9ea4061.png)

## Consoleパネル
ConsoleパネルにはWebページをロードした際の**errorやwarningなどのログメッセージ**が表示されます。
また、**コマンドラインAPI**というこのコンソール内でのみ利用できる関数が用意されています。
[コマンドラインAPI リファレンス](https://developers.google.com/web/tools/chrome-devtools/console/utilities)
![console.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143841/768bdcf2-451f-ff7f-0736-32c3d61bccbc.png)

## Sourcesパネル
Sourcesパネルでは、Webページで使用されている**CSSやJavaScript、画像などの静的リソースが確認**できます。
ここでも編集・保存することによってリアルタイムに内容を変更することができます。
大抵の場合、ソースがminifyされていて見にくいかと思われますが、左下にある`{}`をクリックすることで見やすく展開して表示することができます。
![sources.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143841/5a2fb131-2e92-ad35-abf1-ba613399fc72.png)

## Networkパネル
Networkパネルでは、ダウンロードされたリソースやHTTPリクエスト・レスポンスなど**タイムライン軸でネットワークでやりとりされた情報**が確認できます。
サイズが大きいリソースの特定や画像が正常にダウンロードされているか、APIからのレスポンスが異常値を返していないかなど、不具合原因の洗い出しによく利用することが多いと思います。
![network.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143841/6811e159-087b-bcaa-f260-031d546390d0.png)

## Perfomanceパネル
一昔前まではTimelineという名前だったPerfomanceパネルです。
ここでは**レンダリング処理上のアクティビティがタイムライン上でグラフ表示**されます。
右上が赤くなっているイベントに問題箇所が存在している場合が多いので、該当コード行を確認してみるとよいでしょう。
![performance.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143841/5c98ae55-99db-8647-9e32-0dc5ec1b935f.png)

## Memoryパネル
Memoryパネルは**ヒープ情報やブラウザ内部のメモリ状態を確認**できます。
![memory_statics.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143841/d7d37ac9-b9f9-0406-a720-839a28226898.png)
![memory_summary.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143841/8644a5e9-7ccd-cea6-5d56-4387f7d28de6.png)

## Applicationパネル
このパネルでは、**マニフェストや、ローカル/セッションストレージ、クッキー、Service Workerなど読み込まれたデータ**が確認できます。
また、**PWAに対応したアプリはここで各種設定**を確認できるので利用することが多いと思います。
![application.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143841/fd3cb5d2-bf20-fa2e-3840-2996fbb3f084.png)

## Securityパネル
Securityパネルは**サイト証明書などセキュリティ関連の情報**が確認できます。
Overviewでページが安全かどうかすぐに確認できるので、`This page is secure (valid HTTPS).`というメッセージが表示されているかどうか見てみるとよいでしょう。
![security.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143841/7079b31a-7fa2-817b-e67a-b91e0a1378b9.png)

## Lighthouseパネル
つい最近までAuditsという名前だったパネルです。
Lighthouseは**Google謹製のパフォーマンス計測ツール**で、このタブでそのツール自体を実行できます。
アプリの性質によって追うべき評価スコアは様々でしょうが、定期的に数値を計測してフロントエンド監視していくとよいと思います。
![lighthouse.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143841/b1b2f3b8-c415-c25a-750f-70f179c5b8b9.png)

## 終わりに
今回はChrome Developer Toolsの各機能についてざっくり見ていきました。
次回の13日目では実務でよく使うTipsについていくつかご紹介する予定です（あくまで予定です、心変わりするかも）ので、Chrome Developer Toolsについてもう少し知りたい、確認したい方は引き続き次回も読んでいただけると幸いです！