【Chrome】デベロッパーツール（開発者ツール）を開く方法
ブラウザ「Google Chrome」のデベロッパーツール（開発者ツール）は、Web開発やデバッグを支援するツールとなり、WebページのHTMLやCSS、JavaScriptの動作をリアルタイムで確認・編集できるため、Web制作やWebアプリの開発に役立ちます。
今回は、そのデベロッパーツールの起動方法と主な機能の説明となります。
【Chrome】デベロッパーツール（開発者ツール）を開く方法
デベロッパーツールを開く方法は、以下のようにいくつかあります。
ショートカットキーで開く
Windowsでの方法
F12 または Ctrl + Shift + I
Macでの方法
F12またはCommand + Option + I
メニューから開く
- Chromeの右上にある 三点メニュー（︙）をクリック
- その他のツール」 → 「デベロッパーツール」 を選択
右クリックから開く
Webページの任意の要素を 右クリック し、「検証」 を選択
デベロッパーツールの主な機能と使い方
Elements（要素）パネル
HTMLとCSSの構造を確認・編集
使い方の例
- Webページの要素を右クリックし、「検証」を選択
Elementsタブで選択した要素のHTMLとCSSを確認- CSSを変更すると即座に見た目が変わる
Console（コンソール）パネル
- JavaScriptのエラーログや実行結果を確認
コマンドを入力してJavaScriptを試せる
使い方の例
Consoleタブを開くconsole.log("Hello World");などのコードを入力して実行
Network（ネットワーク）パネル
ページの読み込み速度や通信状況を確認
使い方の例
Networkタブを開く- ページを再読み込み (
Ctrl + R/Cmd + R) - どのリソースが読み込まれているか確認
Sources（ソース）パネル
- JavaScriptファイルをデバッグ
- ブレークポイントを設定し、ステップ実行可能
使い方の例
Sourcesタブを開く.jsファイルを選択- 行番号をクリックしてブレークポイントを設定
- ページを操作してコードが止まるか確認
Application（アプリケーション）パネル
ローカルストレージ、セッションストレージ、クッキーの確認
使い方の例
Applicationタブを開く- 左のメニューで
Local StorageやCookiesを選択 - 保存されているデータを確認・編集・削除
Performance（パフォーマンス）パネル
ページのパフォーマンスを測定し、ボトルネックを特定
使い方の例
Performanceタブを開くRecordボタンを押して記録開始- ページを操作し、
Stopして結果を分析
Lighthouse（ライトハウス）パネル
サイトのパフォーマンス、SEO、アクセシビリティを分析
使い方の例
Lighthouseタブを開くGenerate reportボタンを押して分析開始- 改善点を確認し、サイトの最適化を行う