はじめに
こんにちは。フロントエンド担当の鯉田です。
この記事では Google Chrome の DevTools(検証ツール)について解説します。 検証ツールは Web 開発において欠かせないツールであり、デザイン確認、デバッグ、ネットワーク状態、パフォーマンスなどの改善に役立ちます。 本記事ではある程度は検証ツールを使用したことがあるエンジニアに対し改めて便利な機能を解説します。
この記事内で各要素の知っているようで知らなかった機能について、軽く触れているものとなっております。 詳細を知りたい場合は公式ドキュメントにてご確認ください
Elements
Elements は現在のページ内容を HTML で確認できる画面です。 javascript フレームワーク等により追加された画面に表示されている全ての HTML が確認できます。 一時的な HTML の追加やスタイルの編集ができ、現在のブラウザ表示のみ反映されます。
要素の選択と編集
画面に表示されている DOM ツリーの確認したい要素を選択し要素を確認できます。 画面に表示されている要素を選択すると、表示されている HTML の確認ができます。また Edit as HTML を選択することで HTML の修正、削除、追加が可能です。 レイアウト項目から要素に適用されているレイアウトの確認ができます。また CSS の修正、削除、追加が可能です。
Console
Console はログメッセージを確認できる画面です。 API のエラーレスポンスを確認することもできます。 また JavaScript コードを簡易的に実行することも可能です。
コマンドライン API
コマンドライン API を利用して、様々な便利な機能があります。 ここでは一例を紹介します。
- $0 ~$4
- Elements パネルで選択した要素が保存されており、$0 が最後に選択した要素で数字が増えるごとに過去に選択した要素を選択できます。
- inspect()
- inspect()は引数の要素が DOM にある場合、Elements パネルで選択された状態になります。要素の id や class がわかっている場合、早く選択することができます。
Source
Source はブラウザが読み込んだファイルの表示やファイルの詳細、編集ができる画面です。 読み込まれたファイルを閲覧し、必要ファイルが取得できているかの確認 一時的な CSS、Javascript の編集ができ、現在のブラウザ表示のみ反映されます。
ブレークポイント
ブレークポイントとは指定したファイルのコードをクリックし中断したいポイントを設定することができる機能です。 ブレークポイントを用いることでログを仕込まなくても変数値の確認ができます。
Network
Network はブラウザが実行した通信ログの確認ができる画面です。 初回アクセス時や API 送信時のネットワーク状況を確認することができます。 通信のタイミングや順番、通信にかかった時間を確認することができます。
ネットワークの詳細を確認
確認したい通信をクリックすることで詳細が確認できます。 ここではブラウザから送信した Header 情報や返却されたリソースを確認することができます。 また通信が開始から終了のタイミングと何に時間が時間が使われたのかを確認できます。
ネットワーク切り替え
オンライン状態での挙動の確認のほか、3G 回線相当でのページ読み込み速度やオフライン状態ではどのような挙動を取るのかシミュレートすることができます。 またスマホ向けのネットワークを確認することもできるため、スマホでの挙動の確認も可能です。 スマホ向けのネットワークは PC 向けページの Cookie やキャッシュ情報が保存されていることがあり、スマホ向けページが正しく動作しないことがあります。 この場合はシークレットモード等でアクセスした方が正しく動作させることができます。
Performance
Performance はページ読み込みを遅くしている要因や Core Web Vitals の指標に影響を与えている要因を詳細に調べることができる画面です。 ページの読み込み速度やスクリプトの実行速度、レンダリング速度などを計測し、パフォーマンスのボトルネックを特定することができます。 スロットリングを使用し CPU やネットワークを調整することができ、ネットワーク環境やマシンスペックが低い場合のパフォーマンスを確認することができます。
Memory
Memory はメモリリークを発見するために使う画面です。 JavaScript はガベージコレクションの処理により、使用されなくなったメモリを自動的に開放します。 すべてのパターンでメモリを自動的に開放してくれるわけではないため、エンジニアが解放をする必要がある場合があります。
Application
Application ページ内でやり取りされる可能性があるブラウザが保持している Cookie や localStorage 等の内容を確認・編集・削除することができる画面です。
Service Workers
ブラウザとサーバとの通信に介在しプロキシサーバーのような振る舞いをします。 通信のリクエストやレスポンスの修正や、オフライン時にキャッシュした内容を返却することができます。 https か localhost のみ動作します。
Lighthouse
Lighthouse ページ品質評価テストを行うことができる画面です。PageSpeed Insights と異なり非公開状態のページでも実行可能です。 ページが表示までの速度の高速化やアクセシビリティの改善に使用する 「パフォーマンス」「アクセシビリティ」「ベストプラクティス」「SEO」「Progressive Web App」5 項目があり、 それぞれに問題点が指摘されるため、どのようなプロセスで各指標の評価の向上を図れるかを確認することができます。
終わりに
検証ツールの 1 要素で記事にできるくらい多くのことができます。 このためここで紹介しきれていない機能も多くあるため、改めて知らなかった機能について知ることができたら幸いです。
参考文献
Chrome DevTools とほほの DevTools 入門 覚えておきたい DevTools のコマンドライン API まとめ Chrome Devtools による フロントエンドパフォーマンスの計測 Chrome デベロッパーツールの使い方 Network パネルを使い倒す Chrome DevTools を使ったフロントエンドパフォーマンス改善 Chrome DevTools の Allocation instrumentation timeline でメモリリークを見つける Service Worker について調べたのでメモ Google による Web サイトパフォーマンス測定ツール「Lighthouse」入門