今回はChromeのデベロッパーツールについて、普段よく使う機能に絞ってまとめていきます。
デベロッパーツールを起動する
何らかのサイトを開いた状態で、F12を押すとデベロッパーツールが開きます。
Winの場合、Ctrl+Shift+IでもOKです。
個人的によく使うデベロッパーツールの機能
Elements
Elementsタブを選択すると表示中のWebサイトのHTMLが表示されます。
各DOM要素をクリックするとその要素に適用されているスタイル情報も確認が可能です。
このツールの便利なところはツール上でスタイル編集もできてしまうところです。
試しに上記のスクリーンショットでは当ブログのCSSのfont-sizeを変えてみました。
ブログ記事のタイトル文字を30pxに変更しています。
font-sizeの値をダブルクリックすれば、ツール上からCSSを編集できます。 変更はすぐに反映されます。 また、CSSと同時に表示されているHTMLも同様にダブルクリックすれば編集が可能です。
手っ取り早くCSSの修正をしたい時は、よくツール上で修正をしてから修正したCSSをコピーしたりして、実際のプロダクト側のソースコードへペーストしたりします。
フロントエンドフレームワーク等で動的にHTMLを消去・生成が実行された場合、ツール上で編集した内容は破棄されることがありますので注意です。
Console
console.log等で出力した内容や例外が表示されるエリアです。
何らかの理由でIDEのデバッガが使えない時にはconsole.logで検証したりするので、そういう時によく使いますね。
あとは非同期処理のsettimeout()やjsフレームワークのRxJS等の非同期処理の実行タイミングでここにログを表示させたりして、全体の挙動を把握したりする時に見たりもします。
（非同期処理の意図しない重複の検証のベストプラクティスが分からず、結局console.logを入れまくってしまうんですよね…🤤）
余談: console.logでドハマリした仕様
console.logの引数に参照型の変数を指定した場合、console.logの詳細を閲覧しようとすると、 実行時点の値ではなく、ツールで詳細を閲覧した時点での値が表示されるという仕様になっていますので、デバッグ時は要注意です。
↓の記事にて詳しく解説されています。 analogic.jp
Network
HTTPリクエストの実施と結果の詳細を閲覧できます。 スクリーンショットはGoogleの検索結果のページのものです。
各リクエストの行をクリックするとリクエストとレスポンスの詳細を確認できます。
自分で組んだフロントエンドとバックエンドが意図する通信ができているかどうかを確認する為にはもはやなくてはならない機能です。 YoutubeやTwitter等のリアルタイム通信を伴うサイトでここの情報を見ると、矢継ぎ早にリクエストが飛び交う様子が見れるので面白いです。
Performance
左上の録画マークのボタンを押すと計測が始まり、計測中はウェブページ上で起こったあらゆる処理をスクリーンショット付きで記録してくれます。
クリックイベント、メソッドの実行、非同期処理の実行といったJavaScriptのイベントを拾えますので、 やけに重たい処理があった場合は、何が原因なのかを突き止める為に使ったりしています。 アプリのビルド後の環境で実施した場合は、表示されるイベントの名前が分かりづらかったりするのですが、そこはある程度名前から連想される処理の予想を付けながら調べていきます。
録画マークを自分で押さないと記録しないので、押すタイミングが案外ムズかしかったりします。
Application
主にlocalStorage, sessionStorageといったウェブストレージで保持されている値を確認したい時に使います。
他にもService workerを使っているならステータスを確認することも出来ます。
Lighthouse
表示中のウェブページのパフォーマンスやSEO、セキュリティといった項目別の評価をしてくれます。
Web上でパフォーマンス計測ができるPageSeed Insightsはパフォーマンスのみの計測ですが、Lighthouseはさらに計測項目が増えたものとなります。
ただしLighthouseはローカル環境で計測する為、環境の影響を受けるのでパフォーマンス計測の正確性でいうとサーバサイドで計測をするPageSeed Insightsの方に軍配が上がるようです。
↓試しにAppleの適当なぺージで計測してみたところ、割と辛口評価で返ってきました。私も開発アプリがこれくらいの点数だったので正直ホッとしたところがあります。
↓さらに気になったので爆速サイトで名高い阿部寛のページでも計測したのですが、エラーが返ってきました。https化されてないからでしょうか？早すぎて計測できないのか？
あとがき
デベロッパーツールも知らないうちにどんどん機能が追加されていっているようですので、時間があるときにもっと試して活用していきたいですね。
