はじめに
今回はChrome DevToolsの便利な機能を紹介します！
対象
- 雰囲気でDeveloper Toolsを触っている人
- Developer Toolsを使っているが、新機能の情報を追ってない人
YouTube動画
動画で確認したい方はこちらを利用してください！
【YouTube動画】 Chrome Developer Toolsの意外と知らない使い方を紹介！
ショートカットキー編
まずは知ってると便利なショートカットについて紹介します！
その前に、Developer Toolsは切り離しができるので、場合によっては切り離しておくと使いやすいです。
Developer Toolsの右上にある⁝ (トリコロン) をクリックして、Dock Sideから選択できます。
要素選択モードでDeveloper Toolsを起動 (command shift c)
要素選択モードとは、以下のような状態です。
スタイルをいじったりするときに、便利です。
これは command shift cで起動できます。
ファイル検索 (command p)
Developer Toolsを開いた後で、プロジェクトファイルを検索するときに使います。
ブレイクポイントの設置で役立ちます。
これは command p または command oで起動できます。
コマンド検索 (command shift p)
Developer Toolsを開いた後で、Developer Toolsに用意されているコマンドを調べるときに使えます。
shortcut一覧や画面のスクリーンショットなどもここから実行することもできます。
これは command shift pで起動します。
デバイスモードのON/OFF (command shift m)
Developer Toolsを開いた状態で、スマホで見たとき・PCで見たときに、どのような表示になるかを確認するときに使えます。
これは command shift mで切り替えできます。
Drawerの開閉 (ESC)
画面が小さいと、Drawerが邪魔になることがあります。
ESCで開閉ができるので、ぜひ活用してみてください。
その他のショートカット
上記以外のショートカットについてはこちらで確認できます。
日本語版もありますが、日本語版はバージョンが古くなっているので、英語で確認することをオススメします。
https://developers.google.com/web/tools/chrome-devtools/shortcuts
Networkパネル
Developer Toolsを使い始めの頃はElementパネルやConsoleぐらいしか使わないかもしれませんが、Networkパネルも非常に強力で役立ちます。
通信速度を遅くする
ネットワークパネルのOnlineをクリックすることで、通信速度を意図的にいじることができます。
数クリックで、通信速度が遅い環境を用意できるので、便利です。
キャッシュ無効化, ネットワークログの保持
Preserve logを選択しておくと、リロードやページ遷移時にネットワークのログが消えることを防ぐことができます。
また、Disable cacheでキャッシュを無効化しておくことができます。
通信をCURLやfetchでコピー
ネットワークパネルでは、GETやPOSTをしたときに、どのようなリクエストが返ってきたかを確認できます。
それだけでなく、通信をコピーしてコンソール上で再実行することもできます。
開発時のデバッグで役立ちます。
await
fetchをコピーして、consoleに貼り付けた場合、Pendingになって何も返りません。
そこで、await fetchとすることで、Responseを返すことができます。
Console画面
consoleはデバッグ時に重宝します。
単純にlogを見たり、debuggerで止めて、変数の中身を見たりといった使い方ができます。
ログのレベルを分ける
コンソールはレベルでフィルタリングできます。
コードを書くときに、console.log, console.warn, console.errorを使い分けることで、デバッグが楽になるので、ぜひ活用してください！
Live Expression
consoleにある、この目のボタンがLive Expressionです。
このボタンをクリックすると、入力したコマンドの結果を常に表示できます。
例えば、Date.now()を登録すると、刻々と現在時刻を表示してくれます。
使い所は難しいかもしれませんが、面白い機能です。
$の扱い
consoleでは、jQueryのように、$でDOMにアクセスできます。
例えば、$('body')でbodyタグ内の要素を取ることができます。
他にも、$_で直前の実行結果を表示したり、$0で選択中の要素を表示したりできます。
Light house
最後にLight houseを紹介します。
自分のウェブサイトのパフォーマンスやSEOを簡単に調べることができるツールです。
改善ポイントも紹介してくれるので、ぜひ使ってみてください！
まとめ
今回はChrome DevToolsの便利で面白い機能を紹介しました。
Developer Toolsの新機能についてはこちらで追うことができます。
https://developers.google.com/web/updates/capabilities
面白い・役立つ機能を発見された方はぜひ、コメント欄で共有していただけると嬉しいです！！