Chrome DevToolsの活用術【Overrides／Network／Performance】

はじめに

Webフロント担当であれば触れる機会も多いであろう、ブラウザのDevTools（開発者ツール）ですが、よくある使い方としては、CSSの調整やブレークポイントを使ったデバックなどが多いと思います。

今回はもう少し踏み込んで上記の機能以外に、個人的によく使っている機能や、本記事の作成にあたり新たに学んだ機能などを、いくつか紹介できればと思います。

基本操作や特徴・使いどころなどを交えた内容としているので、参考になれば幸いです。

Overrides (オーバーライド)

Overrides機能はブラウザが読み込んでいるリモートファイル（CSS, JS, 画像など）を、PCのローカルに保存したファイルを使い、一時的に上書きできる機能です。

特徴としては、ページをリロードしても変更が保持されるため、本番環境のデバッグやデザイン調整などに最適かと思います。

▼ 基本的な使い方
①Sources > Overrides タブの「Select folder ～」から、更新用ファイルの保存先（ローカルフォルダ）を作成・指定します。
※作成時にファイル編集の許可が求められるアラートがでるので、問題なければ「許可する」ボタンを押下

②「Page」タブへ移動し、編集したいファイルを右クリックし「Override content」を選択します。

③「Overrides」タブと①で保存したローカルフォルダへ、②で選択したファイルが配置されます。これで設定は完了です。
あとは上記のファイルをブラウザから直接、もしくは配置先のファイルを編集・保存・リロードすれば、変更内容が画面へ反映されます。

④「Overrides」での確認を解除する際は「Enable Local ～」のチェックを外します。
※設定したのを忘れて予期せぬ動作とならないよう、確認時のみＯＮ、通常時はＯＦＦとしておくのがベターかと思います。

Network Throttlingは、インターネット回線の通信速度を意図的に遅延・制限させる機能です。
これにより、通常速度の開発環境にいながら、ユーザーが利用する低速なWi-Fi環境や不安定なモバイル回線環境をシミュレーションする事ができます。

個人的には、JSでタイムアウト処理を設けた際（主にタイムアウト時）の画面確認や、リリース後に不具合報告を受けた際の調査手段の1つとしても利用しています。

▼ 基本的な使い方
使い方は簡単で、「Network」タブ内にあるプルダウンメニュー内から、任意のものを選択しリロードするだけで完了です。

個人的にはプリセットされているもので十分事足りていますが、例えば3G以下の環境を見たい（極端に長いタイムアウト値が設定されている）場合などは、プルダウンの Custom > Add… から任意の値を設定する事で確認可能です。

Performanceタブでは、文字通りサイトパフォーマンスの測定および評価を行う事が可能で、「なぜこの部分がもたついているのか」「どの処理がボトルネックになっているのか」などについて、原因の可視化や特定を行う事ができます。

サイトの更新頻度に合わせ、定期的にチェックしておくと、一定のパフォーマンスが担保できると思います。

▼ 基本的な使い方
計測方法は二通りあり、ファーストビューのみでの測定、または任意の操作（ページスクロールやボタン押下等）を含めた測定が可能です。

①ファーストビューの確認方法
以下赤枠を押下するとページがリロードされ、ファーストビュー内の要素を対象に測定が開始されます。

②任意の操作を含めた確認方法
以下赤枠を押下すると記録が開始されます。確認したい操作が完了したのち、ポップアップで表示されているSTOPボタンを押すと、その間に行った操作を含めた計測が行われます。

上記①②、いずれかを操作し計測が完了したのち、結果が以下のように表示されます。

情報がたくさん並びますが、まず気にすべきは左カラムにある「Insights」タブの評価値で、上記のケースではCLSの評価が低い（画面描画後にガクつきが発生している）ことが確認できます。

次に赤枠箇所で、低評価の原因と思われるレイアウトシフト（ガクつき）の発生が確認できます。
さらにここを押下する事で、下部にある「Summary」タブ > Shift score値から、当該がCLS低下の原因であると予測できます。

あとは、同じタブ内にあるElements shifted項目から修正すべき具体の要素が確認できるので、必要に応じて修正を行う、といった流れになります。

今回はChromeのDevToolsの活用術について書かせていただきました。

多機能なぶん取捨選択が難しくなりますが、今回初めて知った「オーバーライド」の機能などは早速業務で役立っていて、作業効率も上がりました。
自分が分かっていないだけで実用的な機能がまだまだ埋もれていそうななので、また時間を見つけて掘り下げてみたいと思いました。