DevTools の使い方を可能な限りスクショ付きで解説してみる
mizchi以下の公開計測会でやったものを個別に解説してみる。
細かいテクニックが多いのだが、それを可能な限りテキストとスクショで解説したい。使い方の解説が中心で、どういう意味があるかは解説しない。
Chrome131時点のスクリーンショットで、後で読む場合は頻繁にUIが変わっている点に注意。大事なのは意図。
宣伝: これを御社のサイトで解説する仕事をやっています。
デモのURL
これに意味はなく、今日偶然見ていただけで意図はない。関係ないがエッジランナーズは最高のアニメ。
DevTools を開く
F12 or 右クリックから「検証」
DevTools > Lighthouse
この状態で計測
このとき、新しいプロファイルを作ったりして、可能な限り Chrome拡張が入ってない状態にすること。Chrome拡張による処理も計測に含まれてしまう。
Lighthouse レポートの読み方
点数部分にマウスオーバーすると、内訳が見える
See Calculator をクリックすると、Google側の現在のスコアの重みがわかる
View Treemap で簡易なJSチャンクのサイズ比率と、実行された行のカバレッジが見える。
Lighthouse 計測環境の再現の仕方
レポート末尾に設定がある。この状態に合わせると再現できる
Lighthouse Dignosticsの読み方
上からスコア影響が大きいものが並んでいる。Show audits relevant to ... で絞り込める
クリックすると詳細が見える。これはLCPがいつ確定したかのレポート（大事）
複数のLighthouseレポートを比較
- で追加できる。
DevTools > Performance
読み込み時間を取りたい場合、 Record ではなく Record and Reload を押す。
この時、CPUやNetwork を低速化して、Lighthouse計測環境に合わせることができる
計測するとこうなる
大事なのは Network と Main(Thread)
マウスホバーしてレンダリング状態を確認
そのタイムラインではどういう状態だったか、ここのマウスオーバーで確認できる
Network
Network をクリックして展開する。LCP タイミングを意識しながらウォーターフォール図をみる。
マウスドラッグで移動できる
範囲指定のボタンをドラッグすると、詳細な区間を絞り込むことが出来る
区間はマウスホイールでも操作できる。
右上に赤いオーバーレイ表示があるのはレンダーブロッキングコンテンツで、順序指定があり他の読み込みを止める可能性がある。
マウスホバーでリクエストの状態がわかる。たとえばこれは画像が初期表示に含まれることがわかって、画像の読み込みプライオリティが Low -> High に上がっているところ。
各リクエストは右クリックして Networkの詳細に飛ぶこともできる。
Main
主に CPU で行われている=(ユーザー操作に割り込む)操作。
赤いロングタスクがフレームに割り込んでる超過している部分になる。
ドラッグや範囲操作はNetworkと同じ。
タスクをクリックすると、下のタブで詳細がみえる。
下のタブから Bottom Up を選ぶとそのコールスタックの内訳がみえる。
mizchiDevTools Network
主にネットワークを中心としたデータがみえる。
この画面を開いてからロードしたものが見えるので、この状態でリロードして確かめる。
タブを右クリックすると表示内容を制御できる。
クリックするとその軸でソートできる。
個人的にはここでもWaterfallを表示しておくのを推奨。
表示内容を絞り込める
リクエストにホバーでタイミングの詳細が取れる。
クリックで詳細
ホバーしているときにでてる Timing の詳細
Initiator で発火のチェーンがわかる
mizchiSource でリクエストを書き換える
準備として、 DevTools > Source > Overrides で + Select folder to overrides を選択
なんでもいいので、適当なディレクトリを作って(新規作成して)選択する
Chrome でこのポップアップが出るので許可する。
キャッシュを保存するディレクトリができた。ここで Enable Local Overrides しておく。
ここまでやってから、ネットワークタブから右クリックして Override Content
ここでプレビューが編集可能になる。ここを書き換えると、そのリクエスト対象の内容を書き換えることができる。
これは Lighthouse の計測時や再ロードで反映される。
書き換えたものは紫でマークが付く。
書き換えた内容は、強制的に HTTP1.1 扱いになるので注意。HTTP/2のストリーム処理にならずに、点が悪化したことがある。
mizchiNetwork Blocking した状態でLighthouseを計測
Network から右クリックで、Block request URL(Domain) できる
現在のブロック状態は、下側の Network Request Blocking で確認できる
この状態で再度ロードすると、 1 blocked と確認できる(実際にはGTMの後段の他のリクエストも消えている)
実際のリクエスト本数や転送量は、Network タブのここで確認できる。ブロック前後を比較する。
このブロッキングの状態は、Lighthouseにも反映される。
mizchiMemory Profiler
Take Snapshot で現在のメモリ使用量が取れる
詳細
一つだけとってもろくな調査は出来ない。
基本的には2つとって比較する。
Snapshot2 から Comparison Snapshot1 を選択
