Chrome DevToolsの便利でおもしろい機能をまとめて紹介！

# はじめに
今回はChrome DevToolsの便利な機能を紹介します！

## 対象
- 雰囲気でDeveloper Toolsを触っている人
- Developer Toolsを使っているが、新機能の情報を追ってない人

# YouTube動画
動画で確認したい方はこちらを利用してください！
[【YouTube動画】 Chrome Developer Toolsの意外と知らない使い方を紹介！](https://youtu.be/9s4TIbgFH_s)
[![Chrome Developer Toolsの意外と知らない使い方を紹介！](https://img.youtube.com/vi/9s4TIbgFH_s/0.jpg)](https://youtu.be/9s4TIbgFH_s)


# ショートカットキー編
まずは知ってると便利なショートカットについて紹介します！
その前に、Developer Toolsは切り離しができるので、場合によっては切り離しておくと使いやすいです。

Developer Toolsの右上にある⁝ (トリコロン) をクリックして、Dock Sideから選択できます。
![スクリーンショット 2021-01-17 18.04.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/241b8156-2af7-850e-03b8-f9e62b11efb9.png)



## 要素選択モードでDeveloper Toolsを起動 (command shift c)
要素選択モードとは、以下のような状態です。
スタイルをいじったりするときに、便利です。

これは ``command  shift c``で起動できます。

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/66a99aeb-997d-5f09-5f53-0986a6877d65.gif' width='550'>

## ファイル検索 (command p)
Developer Toolsを開いた後で、プロジェクトファイルを検索するときに使います。
ブレイクポイントの設置で役立ちます。

これは ``command p`` または ``command o``で起動できます。

![_2020-12-22_15.42.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/9fb69771-74e5-59fb-c1c7-0b03cbfb3797.png)


## コマンド検索 (command shift p)
Developer Toolsを開いた後で、Developer Toolsに用意されているコマンドを調べるときに使えます。
shortcut一覧や画面のスクリーンショットなどもここから実行することもできます。

これは ``command shift p``で起動します。

![_2020-12-22_15.38.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/56bd41aa-7abb-1032-c704-752d4c19724b.png)

## デバイスモードのON/OFF (command shift m)
Developer Toolsを開いた状態で、スマホで見たとき・PCで見たときに、どのような表示になるかを確認するときに使えます。

これは ``command shift m``で切り替えできます。

## Drawerの開閉 (ESC)
画面が小さいと、Drawerが邪魔になることがあります。
ESCで開閉ができるので、ぜひ活用してみてください。

![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/cb3c22c8-629c-2be0-adaf-c89bc1904df3.png)

## その他のショートカット
上記以外のショートカットについてはこちらで確認できます。
日本語版もありますが、日本語版はバージョンが古くなっているので、英語で確認することをオススメします。
https://developers.google.com/web/tools/chrome-devtools/shortcuts

# Networkパネル
Developer Toolsを使い始めの頃はElementパネルやConsoleぐらいしか使わないかもしれませんが、Networkパネルも非常に強力で役立ちます。

## 通信速度を遅くする
ネットワークパネルのOnlineをクリックすることで、通信速度を意図的にいじることができます。
数クリックで、通信速度が遅い環境を用意できるので、便利です。


![_2020-12-22_15.40.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/506d3ff5-065f-85f3-d3bf-57f62161ad88.png)

## キャッシュ無効化, ネットワークログの保持
Preserve logを選択しておくと、リロードやページ遷移時にネットワークのログが消えることを防ぐことができます。
また、Disable cacheでキャッシュを無効化しておくことができます。
![_2020-12-22_15.39.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/30f28e55-fbc1-4fe6-0674-63b84700aaf0.png)

## 通信をCURLやfetchでコピー
ネットワークパネルでは、GETやPOSTをしたときに、どのようなリクエストが返ってきたかを確認できます。
それだけでなく、通信をコピーしてコンソール上で再実行することもできます。
開発時のデバッグで役立ちます。
![_2020-12-22_15.40.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/f5115699-0c6f-0e6a-4914-9d441cc8ba78.png)

## await
fetchをコピーして、consoleに貼り付けた場合、Pendingになって何も返りません。
そこで、await fetchとすることで、Responseを返すことができます。
![スクリーンショット 2021-01-17 18.29.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/28d3c2a6-3bb4-ee0d-a654-1839c4621333.png)

# Console画面
consoleはデバッグ時に重宝します。
単純にlogを見たり、debuggerで止めて、変数の中身を見たりといった使い方ができます。

## ログのレベルを分ける
コンソールはレベルでフィルタリングできます。
コードを書くときに、console.log, console.warn, console.errorを使い分けることで、デバッグが楽になるので、ぜひ活用してください！

![スクリーンショット 2021-01-17 18.37.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/f312b6b1-7170-4562-ad7a-d2d96b88562c.png)

## Live Expression
consoleにある、この目のボタンがLive Expressionです。
このボタンをクリックすると、入力したコマンドの結果を常に表示できます。

例えば、Date.now()を登録すると、刻々と現在時刻を表示してくれます。
使い所は難しいかもしれませんが、面白い機能です。

![スクリーンショット 2021-01-17 18.45.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751408/50c63bfe-346c-bf42-e76d-fcdd2c0e08c7.png)


## $の扱い
consoleでは、jQueryのように、$でDOMにアクセスできます。
例えば、``$('body')``でbodyタグ内の要素を取ることができます。

他にも、``$_``で直前の実行結果を表示したり、``$0``で選択中の要素を表示したりできます。


# Light house
最後にLight houseを紹介します。
自分のウェブサイトのパフォーマンスやSEOを簡単に調べることができるツールです。

改善ポイントも紹介してくれるので、ぜひ使ってみてください！

# まとめ
今回はChrome DevToolsの便利で面白い機能を紹介しました。
Developer Toolsの新機能についてはこちらで追うことができます。
https://developers.google.com/web/updates/capabilities

面白い・役立つ機能を発見された方はぜひ、コメント欄で共有していただけると嬉しいです！！