Webフロントエンドエンジニアが開発を進める際に、多くのWebブラウザのなかでGoogle Chromeを選ぶ要因のひとつとして、Chromeの開発者ツールが優れているからだと思います。
そこで、開発者にとって有用なその開発者ツールのなかで、個人的に特に利用頻度の高い機能とその使い方についてを整理しました。
なお、機能の一部についてはユーザインタフェース構築のためのJavaScriptライブラリであるReactで開発してることを前提に説明しています。

Chromeの開発者ツールを開く方法

WebブラウザのGoogle Chromeを開き、「表示」タブをクリックして「開発/管理」を選び「デベロッパーツール」をクリックすると、デフォルトでは開発者ツールがブラウザ下部に表示されます。
例えば、airbnbサイトを開いてる状態で開発者ツールを開くとこのように表示されます。

では次に、各機能の説明について記載します。

Elements

開発者ツールを開くと、デフォルトでElementsタブが選択されます。Elementsタブでは、HTML、CSSのコードの確認、編集ができます。

HTMLの確認と編集

左端の「Select an element」ボタン（矢印アイコン）をクリックし、Webページ上の要素を選択するとハイライトされ、その要素のHTMLコードが確認できます。
さらに、HTMLコードを右クリックで「Edit as HTML」を選択すると、HTMLコードが編集できます。

CSSの確認と編集

左端の「Select an element」ボタン（矢印アイコン）をクリックし、Webページ上の要素を選択すると、そのHTMLタグのStyleが右ペインで確認できます。
その上で、各プロパティの値の編集と、新たにプロパティが追加できます。そのためStyleのデバッグ時によく使う機能で、デバッグした上でcssファイルに落とし込む手順を踏むことがあります。
※これらのHTMLとCSSの編集は実際にサイト編集には直結しません。そのためページをリロードすると元に戻ります。

Console

Consoleタブでは、JavaScriptの実行やデバッグ、エラーメッセージの確認ができます。

開発コードconsole.log()などのコンソールコマンドの結果が表示されます。さらにJavaScriptのコードを入力してEnterキーを押すと、そのコードがリアルタイムで実行されます。
多くの開発者が、このConsoleタブを開いた状態で開発を進めているのではないでしょうか。

Sources

Sourcesタブでは、Webページに関連するファイルがツリー構造で表示されます。

主にJavaScriptのデバッグに利用します。
command + pでデバッグ対象のファイルを選択した上で、ブレークポイントを設定するにはコードの行番号をクリックして、青いマーカーが表示されるまで待ちます。
ブレークポイントが設定されると、コードがその行で一時停止し、変数の値やコールスタック(処理の流れ)を確認できます。
デバッグ中に、右ペイン上部のツールバーにある実行コントロールボタン（再生、一時停止、ステップオーバー、ステップイン、ステップアウトなど）を使って、コードの実行をコントロールします。
なお、デバッグするためにはsourcemapを設定する必要があります。sourcemapを設定するとコンパイル前のファイルが扱えますが、通常は開発環境の場合のみの設定になります。
そのため、添付画像のような本番環境のページは既にコンパイル後のファイルで、デバッグすることができません。

Network

Networkタブでは、Webページに関連するリソースや通信の情報を確認、分析、デバッグができます。
Webページに関連するリソース（HTML、CSS、JavaScript、画像、フォントなど）が順々に読み込まれる状態をリスト形式で表示されます。
さらに、Fetch/XHRタブを選択すると、フェッチした際のリクエストやレスポンスが表示されます。
それに関連して、URL、応答ステータスコード、応答ヘッダー、リソースのプレビュー、応答時間なども確認ができるのでWeb APIを扱った開発時に利用する機能で、サーバーサイドと結合ができているのかを確認することができます。

Application

Applicationタブでは、Webページに関連するLocal StorageやCookie、Cache、そしてマニフェストなどの情報を確認、編集、デバッグができます。
それらのなかで特にLocal Storageの値を確認、編集することが多く、Webアプリケーションを実行する上で必要な値を参照するためです。

Lighthouse

Lighthouseタブでは、Webページの品質の確認ができます。
パフォーマンス、アクセシビリティ、ベストプラクティス、SEO、プログレッシブウェブアプリ（PWA）など、さまざまなカテゴリでWebページを分析し、改善点が提案されます。
分析対象の項目を選択した後、「Analyze page load」ボタンをクリックするとページ分析が開始され、レポートが生成されます。
レポートには各カテゴリのスコアが表示されて、具体的な改善点と推奨される対策が提案されます。

Redux

ここからはユーザインタフェース構築のためのJavaScriptライブラリであるReactで開発してることを前提とした機能と説明になります。
Reduxタブを利用するには、Chrome拡張機能「Redux DevTools」をinstallします。
Reduxタブでは、Reduxを使ったJavaScriptアプリケーションの状態管理をデバッグできます。

主な利用方法は

• 左ペインで「Action」を選択すると、アプリケーションでdispatchされたActionのリストが表示されるので、Actionがdispatchされた時点のアプリケーションの状態や、状態の変化を順番に追ってデバッグができます。
• 右ペインの「Action」タブで、左ペインで選択したActionのtypeやpayloadの情報を確認できます。
• 右ペインの「State」タブで、左ペインで選択したAction時のStoreのStateを確認できます。
• 右ペインの「Diff」タブで、左ペインで選択したActionによって状態がどのように変更されたかを確認できます。変更前後のStateを比較して、Reducerが正しく機能しているかを確認できます。

になります。
Redux Toolkitを利用したときも同様にこのタブでアプリケーションの状態管理を確認することができます。
※Recoilを利用した場合は不明です。

Components

利用するにはChrome拡張機能「React Developer Tools」をinstallします。
Componentsタブでは、Reactのコンポーネントの階層構造をツリー上で視覚的に確認できます。

コンポーネントツリー内の特定のコンポーネントを選択すると、そのコンポーネントのstateやpropsを確認できます。
さらに、左ペインの右上の「設定」ボタンをクリックして、「Highlight updates when components render.」をチェックすると、画面表示やUI操作によってレンダリングされたコンポーネントを確認できます。

最後に

以上となります。
簡単ではありますが、Chromeの開発者ツールで利用頻度の高い機能とその説明でした。
Chromeの開発者ツールは日々アップデートされていくので、その動向に注視しながらも既存の機能を使いこなすことがWebフロントエンドエンジニアにとっては必要なことではないでしょうか。
その一助となれば幸いです。