chrome devtools の tips N連発
はじめに
最近社内でフロントエンド会なるチーム内チームを結成して活動している
本日はそこで培った知見を共有します
今回のテーマ: chrome devtools
chrome devtools
皆さんご存知chromeについてるデバッグツール
便利な機能が沢山ある
DOMのデバッグをしたり、Network Requestの様子が見れたり、プロファイルが取れたり
使いこなせれば開発効率が大きく向上する
一方で、よく使われているのはほんの一部
もったいない
多くの機能は使いこなすのに事前知識はそこまでいらなくて、知っていればすぐ使える
沢山知っておけると便利
という訳で、いざという時に役立つ tips をひたすら紹介していきます
「そういえばが紹介していたあのテクニック使えるかも！」となれば良いなと思ってます
あんまりかっちりした話はしません
Elementタブ
Scroll into view
Elementを右クリックして出てくるボタン
その要素がある位置にスクロールできる
この要素どこにあるんだっけ、という場面で便利
Force state
hover状態やfocus状態を維持できる機能
hover状態のスタイルを調整したい時に便利
Store as global variables
要素をグローバル変数に代入できる
Consoleから参照可能
Elementタブ (Toggle device toolbar)
ここのボタンのこと
モバイルデバイスなどのエミュレートができる
Emulate device
画面サイズやUAを特定のモバイルデバイスに偽装してくれる
モバイルで見た時にどう見えるかを調査するのに便利
Capture screenshot
スクリーンショットを撮れる
拡張機能不要
ちなみに要素単位でも撮れます
DPR
Responsive にすると出てくるメニューDevice Pixel Ratioのエミュレートができる
img要素のsrcset属性での画像出し分けのデバッグに便利
DPR 1 のデバイスではこの画像、2ではこの画像が出るというのを確認できる
Consoleタブ
Preserve logs
遷移時にログを維持する機能
遷移直前に出力されるログがあるけど、すぐ消えてしまって見れない…という時に便利
Store XXX as global variables
Consoleに流れてきた値をグローバル変数に代入できる機能
ロガーが吐いた値を加工して見たい時に便利
Applicationタブ (Service Worker)
Update on reload
ページリロードする度に最新のSWをインストール (更新) する機能
通常SWは24時間経過しないと更新されない
気づかずに古いSWを使い続けたまま開発してしまう
ONにしておくと毎回最新のSWが使われてトラブル防止になる
Bypass for network
SWのキャッシュを利用せず、毎回ネットワークからリソースをfetchする機能
SWのキャッシュが機能しているかの動作確認したい場面はそうそうないので、基本ONにするのがオススメ
余談: その他のキャッシュ無効化機能
Network タブの Disable cache : HTTPキャッシュを無効化できるPerformanceタブ
CPU Throttling / Network Throttling
CPUやNetworkのパフォーマンスを意図的に制限できる
CPUのパフォーマンスを1/4、1/6に下げたり...
3G相当の回線速度に落とせたり
CPU Throttingは多分内部でビジーループしてる
モバイルデバイスにおけるパフォーマンスをシュミレーションする時に使う
モバイルのパフォーマンスを測定する時は実際のデバイスのスペックに近づけてから測定することが重要
素朴にプロファイルを取ると誤った分析をしたり、効果のない対策を打つことになる
Element > Toggle device toolbar > Emulate device からiPhoneを選択 CPU Throttling : 6x slowdown Network Throttling : Fast 3G注意点
throttling適用後のパフォーマンスはホストデバイス(devtoolsを動かしているデバイス)のスペックに依存する
同じ6x slowdownでもホストデバイスのスペックが高いほうが速くなる
厳密にスペックを合わせたい、という用途には全く向かない
Start profiling and reload page
ページをリロードしつつプロファイルを取ってくれる
リロードしてからページの読み込みが落ち着くまでを自動で計測してくれる
Web Vitalsも出してくれる
左隣にもプロファイル取るボタンがあるが、こちらは手動で計測開始・終了のタイミングを制御したい時に使うもの
こちらはWeb Vitalsを出してくれない！
Web Vitalsを算出するにはページアクセス直後からの測定が必要なため
気をつけよう
Save profile / Load profile
生成したプロファイルをファイルに保存したり、保存したものを読み込んだりできる
また前回のプロファイルが見たくなった時に見れる
後は複数人でパフォーマンスを分析したい時に、誰か一人がプロファイルを取る => ファイルに保存 => ファイルを他の人に配る、みたいな感じで複数人で同じ分析結果を眺めるためにも使ってます
ただのJSONなので扱いやすい
よくGoogle Driveに置いてそのリンクをIssueに貼ってます
ScrapboxはD&Dするだけで良くて最高
Renderingタブ
右上のケバブメニュー > More tools > Rendering から開けます分かりにくい！！！
Layout Shift Regions
Layout Shiftを発生させている要素をハイライトしてくれる
ガタツキを調査するのに便利
Frame Rendering Stats
FPSを測定できる
パフォーマンスの低下により描画がスキップされたフレームが赤で表示される
CPU Throttlingと組み合わせるとモバイルでのFPSの落ち込みをシュミレーションできて便利
Animationsタブ
これも
More tools から開けるタブSet speed
CSSアニメーションの速度を遅くすることができる
アニメーションをゆっくり見たい時に便利
JSによるアニメーションは遅くできない
setTimeout や requestAnimationFrame を使ったやつ逆手に取ると...
JSとCSSどちらでアニメーションをしているのかを切り分けるのにも利用できる
その他
コマンド横断検索:
Cmd+Shift+P あの機能ONにしたいけどボタンどこにあったかな〜という時に使う
fps と入力してFPSメーターを出すとか
Cmd+Shift++ Cmd+Shift+- devtoolsの拡大縮小
複数人で画面共有しながらパフォーマンス分析するのに便利
おわり
この機能あの場面で使えそう、となってれば嬉しいです
質問何かあればどうぞ
想定質問: どうやってdevtoolsの便利機能探してますか
何が起こるか分からなくても、とりあえず押してみて様子を見ている
押すだけで面白機能が発動するので楽しいし、取っ掛かりやすい
その他だとChrome開発チームのリリースノートから情報を仕入れるとか
devtoolsの新機能だけをまとめた記事が存在する
丁寧な解説も付いている
新機能の使い方が分からなければここを見れば良い
昔からある機能の使い方を知りたければGoogle Developersから調べる
devtoolsの使い方をまとめたドキュメントがある
古い機能はだいたいここで解説されているはず
質問: イチオシの機能はなんですか
ゴミ箱アイコンを押すと強制的にGCを発動させられる
期間A-Bでメモリ使用量がどれくらい増えたかを調査する時に使う
ゴミ箱ボタン押す => トレース開始(A) => メモリの変化がある操作をする => ゴミ箱ボタン押す => トレース終了(B)
点A・BはGCが走った直後なので、ゴミがメモリ上に殆ど残っておらず、真のメモリ使用量を計測することができる
GC走らせないともう参照されていないゴミが使用量にカウントされて、使用量の比較が正確にできなくなる
合わせて読みたい
開運研修_2020Chrome Developer_Toolsの使い方 / How_to_use_Chrome_Developer_Tools_Training_2020 - Speaker Deck