Webサイトを作っていると、「この余白どこで設定されてるの？」「画像が読み込まれない理由は？」といった疑問が必ず出てきます。
そんなときに大活躍するのが、Chromeのデベロッパーツール（Developer Tools／略してDevTools）です。
DevToolsの機能はウィンドウ上部のツールバーにまとめられており、各ツールバー項目に対応したパネルを使うことで、HTMLやCSS、JavaScriptの状態をリアルタイムに確認できます。
Developer Toolsは大きく分けて10のグループあり、それぞれが特定のタイプの操作に特化しています。
今回はあまりコアな情報は書かないようにします。（読む気を無くすのと、本が作れそうな量になるので。）
目次
💡DevToolsとは？基本の開き方
まずは、デベロッパーツールの開き方から確認しておきましょう。
【方法①】ショートカットキーで開く
- Windows：
Ctrl + Shift + IまたはF12 - MAC：Chrome Developer Tools ショートカットキー↓
| ショートカットキー | パネル名 | 説明 |
|---|---|---|
| Cmd + Option + C | Elements パネル | 要素（HTML/CSS）を確認・編集できるパネルを開く |
| Cmd + Option + J | Console パネル | JavaScriptの実行結果やエラーを確認するパネルを開閉 |
| Cmd + Option + I | Network パネル | 通信状況（リクエストやレスポンス）を確認するパネルを開閉 |
【方法②】右クリックメニューから開く
- 画面上で右クリック → 「検証（Inspect）」をクリック。
これだけで下または右側にDevToolsパネルが表示されます。
🔍10のツールグループの概要と使い方
ここからは、DevToolsに搭載されている主要な10のツールグループを解説します。
それぞれのパネルはWeb制作の「診断ツール」として役割を分担しており、組み合わせて使うことで強力なデバッグが可能になります。
Chrome Developer Tools パネル一覧
| アイコン / パネル名 | 操作例・主な用途 |
|---|---|
| Inspect | 要素の検証（ページ上の要素をクリックしてDOMを確認） |
| Device | デバイスモードの切り替え（スマホやタブレット表示を再現） |
| Elements | DOM要素の確認、HTML・CSSを編集してレイアウトやデザインを変更 |
| Console | エラー/警告メッセージの表示、JavaScriptのコマンド実行 |
| Sources | ブレークポイントを使用したJavaScriptのデバッグ |
| Network | 通信の内容（リクエスト・レスポンス）の確認 |
| Performance | ページ読み込みや描画などのパフォーマンス計測と最適化 |
| Memory | メモリ使用量の確認、メモリリーク（無駄な消費）の追跡 |
| Application | Cookieやローカルストレージなど、データの管理 |
| Security | HTTPSや証明書などのセキュリティ状態を確認 |
| Audits（Lighthouse） | ページの最適化診断（速度・SEO・アクセシビリティの分析） |
⓪Inspect,DeviceMode
左上にあるので要確認。（Inspect）
左の矢印が、「要素の検証」、選択された HTML の 要素名、スタイル、イベントリスナー などの情報を確認できます。
基本的に要素を選択する用途です。
その右横のマーク（DeviceMode）は、デバイスの確認画面をPCやスマホモデルに変更するためのモノです。
スマホだとどう表示されるかな？って時に見ましょう。
① Elements（エレメンツ）パネル｜HTMLとCSSの構造確認
Webページの構造（DOMツリー）とCSSスタイルを直接確認・編集できるパネルです。
クリックした要素がどのCSSで装飾されているかが一目でわかり、その場で修正も可能。
- inspect（要素の検証）で HTML 要素を選択
- アクティブになった HTML 要素を ダブルクリック（F2）で編集
- CSSは右側のパネル Styles からスタイルのプロパティ名と値を編集
「文字サイズを大きくしたい」と思ったら、font-sizeを編集するだけで即座に反映されます。
反映されるだけで元のcodeは変更されないので、検証用ですね。色変えたりもできるので便利です。
（ワークスペースを作ることで編集情報を保持できますが、しなくて良いと思うので割愛します。）
color プロパティ値の左側の正方形の色は、現在適用されている色です。
Shiftを押しながらクリックすると、現在のカラーフォーマットを 16 進数、RGBA、HSL などに変更可能。
アクセシビリティチェックをするときに非常に便利です。
| パネル名 | 概要 |
|---|---|
| Styles | HTML要素に適用されているCSSスタイルを表示・変更できる |
| Computed | 要素の**ボックスモデル（※1）**や、最終的に適用された全てのスタイルを確認・編集できる |
| Event Listeners | 要素に紐づくJavaScriptのイベントリスナー（クリック・マウスオーバーなど）を表示 |
| DOM Breakpoints | 要素に設定されているブレークポイントを表示し、変化をデバッグできる |
| Properties | 要素に紐づくプロパティ情報（オブジェクトの詳細）を表示 |
| Accessibility | 要素のアクセシビリティ情報（ロール・名前・ARIA属性など）を確認できる |
主な用途
- 要素の余白・ボーダー確認
- クラス名・IDの特定
- レイアウト崩れの原因調査
② Console（コンソール）パネル｜エラー・ログの確認
JavaScriptのエラーや警告をリアルタイムに表示するパネルです。
コードの動作確認にも使え、console.log()で出力した値もここで確認できます。
また、Console パネルには コマンドライン API というコンソール内でのみ利用できる便利な関数が存在しま
す。
（ページ上のスクリプトからは、コマンドライン API にアクセスすることはできませんのでご注意ください。）
JavaScriptをここに直打ち出来ることを知らない人は思いのほか多い。
コンソール履歴をクリアする方法（使用頻度順）
| 手順 | 操作内容 | 説明 |
|---|---|---|
| ① | Cmd + K（Mac） Ctrl + L（Windows） | 最もよく使われるショートカット。ワンキーで即クリアできる |
| ② | clear(); と入力して Enter | コンソール操作中にそのまま入力して履歴を消せる |
| ③ | 右クリック → 「Clear console」 | マウス操作で確実にクリアできる定番方法 |
| ④ | Cmd + Shift + P → 「>Clear console」 | コマンドメニュー（Command Palette）から実行。高度な使い方 |
| ⑤ | 左上の禁止マークをクリック | アイコン操作で消す方法。初心者でもわかりやすい |
| ⑥ | ページをリロード | 履歴だけでなくページ全体を再読み込み（手軽だが処理は重め） |
主な用途
- JavaScriptエラーの確認
- デバッグ出力（console.log）の確認
- DOM要素の操作テスト
③ Sources（ソース）パネル｜スクリプトのデバッグ
サイト内のJavaScriptやCSSファイル、画像ファイルを一覧で確認でき、ブレークポイントを設定して処理の流れを追うことができます。
本格的なデバッグを行いたい場合に欠かせないパネルです。
また、編集して保存することで、ライブビューに変更内容を反映させることができます。
※反映された変更内容はページをリロードすると破棄されます。
その他の機能として、JavaScript や HTML にブレークポイントを貼ってコードをデバッグすることもできます。
あと覚えておくと便利なのは、Ctrl + Shift + F もしくは Cmd + Opt + FでWeb サイトのソースコードを検索できます。
🔍 Webサイトのソースコード検索が便利な理由
| 活用シーン | 目的・便利な点 | 具体的な使い方例 |
|---|---|---|
| ① デザイン・コーディング学習 | 他サイトのHTML/CSS構造を学べる | 「この見出しどうやって作ってる？」→ 右クリック→「ページのソースを表示」して確認 |
| ② SEO（検索エンジン最適化）分析 | metaタグ・タイトル・構造化データを調査 | <meta name="description"> や <h1> タグの使い方を確認 |
| ③ アクセス解析ツールの確認 | どんな解析・広告ツールを導入しているか把握できる | GA4・Tag Manager・Meta Pixel・Hotjarなどのタグを確認 |
| ④ 競合サイト調査 | コード設計・CMS・ライブラリを特定できる | <meta name="generator"> などで「WordPress」や「Wix」と分かる |
| ⑤ エラーやバグ修正時 | 自分のサイトの構文エラーやタグ抜けを確認 | <div>の閉じタグがない、クラスの指定ミスなどを特定 |
| ⑥ 表示速度・構造改善 | 不要なスクリプトや重いリソースを発見 | <script> の読み込み順やCSSファイルの多さを確認 |
| ⑦ リンク切れ・画像パス確認 | 正しいリンク先・画像パスを確認できる | <img src="〜"> や <a href="〜"> をチェック |
主な用途
- スクリプトのブレークポイント設定
- コードのステップ実行
- ファイルのロード状況確認
④ Network（ネットワーク）パネル｜通信状況の監視
Webページを読み込む際に発生するHTTPリクエストとレスポンスを一覧表示します。
画像・CSS・JS・API通信など、どのファイルがどれくらいの時間で読み込まれているかを確認できます。
永続キャッシュなどで CSS の変更などが反映されず開発しづらい場合や、サイトの読み込み速度を計測する際
は、このチェックを入れてキャッシュを無効にしておくと良いでしょう。
（パネル上部 Disable cacheにチェックを入れるだけでOKです。）
ユーザーエージェントを他のブラウザに変更することもできます。
Webデザイナーさん向きの機能ですね。
使う目的
- スマホ版サイトの表示をPCで確認したい
- Safari や Edge での動作をチェックしたい
- 特定のブラウザで表示が崩れる原因を調べたい
使い方
- Esc キーを押してドロワーを表示
- Console の左の三点リーダーから Network conditions を選択
- ユーザエージェントを選択
- リロード
- Select automatically のチェックを入れると元に戻ります。
主な用途
- ページ表示速度のボトルネック分析
- リソースの読み込みエラーの確認
- キャッシュの動作チェック
⑤ Performance（パフォーマンス）パネル｜処理速度の分析
ページの描画やアニメーションなど、ブラウザのパフォーマンスを可視化します。
（ブラウザ内部でのレンダリング処理のアクティビティがグラフとして表示）
どの処理が重いのかを特定できるため、UX改善に直結します。
ページのパフォーマンス状況の記録/確認
- Performance パネルを開き、左上の丸い Recordボタン(●) をクリック
- パフォーマンス計測したい UI を操作する (ex. ダイアログを開く / ログインボタンをクリックする)
- 左上の丸い Record ボタンをクリックして記録終了
※Screenshots のチェックボックスにチェックを入れると、スクリーンショットが Timeline の下に表示されます。
パフォーマンス計測の見方
| 名称 | 説明 | 要チェック項目 |
|---|---|---|
| FPS | 1 秒あたりのフレームレート | グラフ上部の赤いブロック部分 |
| CPU | CPU 稼働状況。CPU リソースを使用している詳細を示します | 塗りの多い部分 |
| NET | ネットワーク処理。各リソースの取得時間 | 棒グラフが長い部分 |
| HEAP | 実行時に使用しているメモリ領域 | グラフが高くなっている部分 |
グラフの色の意味
| 色 | 説明 |
|---|---|
| 青 | HTML |
| 黄 | スクリプト |
| 紫 | スタイルシート |
| 緑 | メディアファイル（text/plain, svg+xml, png, gif, jpeg） |
| 灰 | その他 |
主な用途
- ページ読み込み時間の測定
- レンダリング負荷の確認
- スクロールやアニメのカクつき原因分析
⑥ Memory（メモリ）パネル｜メモリ使用量のチェック
アプリやWebページのメモリ使用状況をグラフで表示します。
長時間動作でのメモリリーク（解放されないメモリ）の発見に役立ちます。
主な用途
- メモリリークの検出
- ヒープスナップショットの比較
⑦ Application（アプリケーション）パネル｜データの管理
ブラウザに保存されるCookie・LocalStorage・IndexedDBなどを確認・削除できます。
ログイン状態の保持や、Webアプリで使われるキャッシュの状態を確認したいときに便利です。
主な用途
- Cookie／キャッシュの確認と削除
- ローカルデータの確認
- PWA（プログレッシブWebアプリ）の管理
Cookie情報の確認項目
| 項目 | 説明 |
|---|---|
| Name | Cookie の名前 |
| [Deplicated] Web SQL | （非推奨）Web SQL 関連情報 |
| Value | Cookie の値 |
| Domain | Cookie のドメイン |
| Path | Cookie のパス |
| Expires / Maximum Age | Cookie の有効期限または残存期間 |
| Size | Cookie のサイズ（バイト） |
| HTTP | チェックが入っている場合、HTTP プロトコルのみ Cookie 情報を送信可能 |
| Secure | チェックが入っている場合、通信が暗号化された場合のみ Cookie 情報を送信可能 |
| SameSite | チェックが入っている場合、同一サイトのみ Cookie 情報を送信可能 |
💡ポイント:
Cookieの設定内容を確認することで、セキュリティ設定（Secure / HTTP / SameSite）や有効期限管理など、Webサイトの安全性と動作の安定性をチェックできます。
Manifest（マニフェスト）の主な項目一覧
| 項目 | 説明 |
|---|---|
| App Manifest | manifest.json のパス |
| Identity | |
| Name | アプリ名 |
| Short name | アプリ短縮名 |
| Presentation | |
| Start URL | アプリ起動時の URL |
| Theme color | テーマカラー |
| Background color | 背景色 |
| Orientation | 画面の向き |
| Display | アプリの表示モード |
| Icons | ホーム画面に追加されるアイコン |
💡この表は、PWA（Progressive Web App） のマニフェスト設定を確認するときによく使われる構成です。
まぁ、普通に使っててココら使うような人は、この記事読んでないと思うので割愛します。
⑧ Security（セキュリティ）パネル｜サイトの安全性チェック
SSL証明書や暗号化通信の状態を確認します。
Security Overview で、ページが安全かどうかすぐに確認できます。
問題ない場合は、This page is secure (valid HTTPS). というメッセージが表示されます。
「このサイトは安全ではありません」と表示される原因の特定にも使えます。
主な用途
- HTTPSの確認
- 証明書の有効期限チェック
- Mixed Content（混在コンテンツ）の検出
⑨ Lighthouse（ライトハウス）パネル｜サイト品質をスコア化
Googleが提供する自動サイト診断ツール。
パフォーマンス／アクセシビリティ／SEO／PWA対応などをスコア化して改善ポイントを提示してくれます。
主な用途
- SEO改善ポイントの発見
- 表示速度スコアの分析
- モバイル最適化の確認
Lighthouseでテストできる5項目
| テスト項目 | 概要 |
|---|---|
| Performance | パフォーマンス（ページの読み込み速度や動作の快適さ） |
| Progressive Web App | PWA（Progressive Web App）対応状況 |
| Best Practice | ベストプラクティス（正しい実装や安全性が守られているか） |
| Accessibility | アクセシビリティ対応（誰でも使いやすい設計になっているか） |
| SEO | SEO 対策（検索エンジン最適化ができているか） |
💡これらは Chrome DevTools の Lighthouseタブ でまとめて確認できます。
特に「Performance」「SEO」「Accessibility」は、Web制作現場で重要な指標です。
SEO以外微妙という結果がツラいです(笑)
⑩ Recorder（レコーダー）パネル｜ユーザー操作を自動再現
ユーザーのクリックや入力などの操作を記録し、同じ操作を再生できます。
テストやデモ制作に非常に便利な機能です。
主な用途
- ユーザーフローの再現
- 繰り返し操作の自動化
- テストシナリオの記録
💻実務での活用シーン
- デザイン調整時：「CSSの余白を確認して即修正」
- JavaScript開発時：「イベントが発火しない原因を特定」
- SEO改善時：「Lighthouseでパフォーマンススコアをチェック」
- 表示崩れ対応：「要素のCSSをリアルタイムで変更して検証」
⌨️初心者が覚えておくと便利なショートカット
| 操作内容 | ショートカットキー（Windows） |
|---|---|
| DevToolsを開く | Ctrl + Shift + I |
| コンソールを開く | Ctrl + Shift + J |
| 要素を選択して検証 | Ctrl + Shift + C |
| デバイスモード（スマホ表示）切り替え | Ctrl + Shift + M |
| パネル検索 | Ctrl + P |
🎨Webデザイナーがよく使うDevToolsパネル4選
① Elements（エレメンツ）パネル
最も使用頻度が高いです。
HTML構造とCSSをリアルタイムで確認・変更できるため、レイアウト崩れの修正や余白の調整に欠かせません。
💡主な活用シーン
- マージンやパディングの確認
- hover時のスタイル確認
- フォントやカラーの確認・変更
- レスポンシブデザインの調整（
@media確認など）
② Styles（右側のCSS編集領域）
Elementsパネルの右側にある「Styles」欄では、指定されたCSSをその場で編集可能。
「ブラウザ上でCSSを直接試してからエディタに反映する」という流れが多くのデザイナーに定着しています。
💡主な活用シーン
display: flexの挙動確認positionやz-indexの調整:hoverや:activeの状態切り替え- 試験的なデザイン変更
③ Device Toolbar（デバイスモード）
Elementsパネル上部のスマホアイコン（📱）をクリックすると切り替わる「デバイスモード」。
各デバイス幅を再現してレスポンシブデザインをチェックできます。
💡主な活用シーン
- iPhone／Android表示の確認
- ブレークポイントの検証
- 画像やボタンサイズの最適化確認
④ Network（ネットワーク）パネル
デザイナーでも「サイトの重さ」を確認したいときに使われます。
特に画像ファイルの最適化や、Webフォントの読み込み速度確認に便利です。
💡主な活用シーン
- 画像が重い／読み込みが遅い原因を特定
- キャッシュ確認
- 外部フォント（Google Fontsなど）の通信確認
＋α：たまに使うパネル
- Lighthouse：SEOやパフォーマンス改善を数値化（デザイン以外でも人気）
- Console：簡単なエラー確認（画像パスミスなど）
デザイナー視点で覚えるべきDevTools
| パネル名 | 主な用途 | 使用頻度 |
|---|---|---|
| Elements | HTML/CSSの構造確認・編集 | ★★★★★ |
| Styles（CSS編集） | デザイン調整 | ★★★★★ |
| Device Toolbar | レスポンシブ確認 | ★★★★☆ |
| Network | 表示速度・画像読み込み確認 | ★★★☆☆ |
| Lighthouse | SEO・パフォーマンス分析 | ★★☆☆☆ |
💻コーダー視点でよく使うDevToolsパネル5選
① Elements（エレメンツ）パネル｜構造とスタイルの整合性確認
HTMLとCSSの対応関係を可視化できる最重要パネル。
クラス指定ミスや構造崩れなど、マークアップ全般のトラブルシューティングに使われます。
💡主な使い方
- CSSの優先順位（Specificity）確認
- 継承されているスタイルの特定
- JavaScriptで動的に追加された要素の確認
- レイアウトのmargin/paddingチェック
💡ポイント
右クリック → 「Copy → Copy selector」で正確なセレクタパスをコピーできるのも便利。
② Console（コンソール）パネル｜JavaScriptのデバッグ
コーダーにとっての“現場監督”。
エラーの内容や変数の値を即座に確認でき、動作検証・修正に直結します。
💡主な使い方
- JavaScriptのエラー確認（赤字で表示）
console.log()の値確認- 簡易的なJSコマンド実行（DOM操作など）
- 未定義エラー・関数の動作テスト
💡ポイント
エラー行をクリックするとSourcesパネルに飛び、該当スクリプトへ即アクセス可能です。
③ Sources（ソース）パネル｜スクリプトデバッグの中心
JavaScriptやCSSファイルを一覧表示し、ステップ実行（Step Over / Step Into）でコードの流れを追えます。
「なぜ動かないのか？」を突き止める最強ツール。
💡主な使い方
- ブレークポイントの設定
- コードの逐次実行で変数確認
- ファイルロード順の確認
- ローカルファイルの一時変更
💡ポイント
再読み込み（F5）してもブレークポイントが保持されるため、長時間の検証にも便利。
④ Network（ネットワーク）パネル｜通信・読み込み状況の分析
ページのリクエスト／レスポンスを一覧化。
CSSやJSが正しく読み込まれていない、API通信が遅い――そんなときに役立ちます。
💡主な使い方
- 外部ファイル（CDN・API）の読み込み確認
- 404エラー・CORSエラーの検出
- キャッシュのON/OFF検証
- 通信時間（Time）の分析
💡ポイント
「Disable cache」にチェックを入れてリロードすると、キャッシュを無効化して実際の通信を再現できます。
⑤ Application（アプリケーション）パネル｜ローカルデータの確認
JavaScriptで利用するLocalStorageやCookieの内容を直接確認できます。
SPAやログイン機能のあるサイトで特に役立ちます。
💡主な使い方
- LocalStorage／SessionStorageの値確認
- Cookieの有効期限・ドメイン確認
- キャッシュの削除でリセットテスト
- Webフォントやmanifest.jsonのチェック
💡ポイント
「Storage」セクションからユーザーIDやトークン情報を確認して、ログイン判定の動作検証にも使えます。
⚙️コーダー向け補助パネル（知っておくと便利）
| パネル名 | 主な用途 | 使用頻度 |
|---|---|---|
| Performance | JavaScriptの処理負荷を分析 | ★★★☆☆ |
| Memory | メモリリークの確認 | ★★☆☆☆ |
| Security | HTTPS通信や証明書確認 | ★☆☆☆☆ |
| Recorder | 操作記録を自動テストに活用 | ★☆☆☆☆ |
コーダー視点でのDevTools活用ポイント
| 目的 | 使用パネル | 活用内容 |
|---|---|---|
| コーディング検証 | Elements | HTML・CSS構造確認 |
| JavaScriptデバッグ | Console / Sources | エラー検出・変数追跡 |
| 通信チェック | Network | 読み込み・API通信確認 |
| ローカルデータ確認 | Application | CookieやStorage操作 |
| 表示最適化 | Performance | 処理速度の測定 |
💬 デザイナーとコーダーの使い方の違い
- デザイナー：見た目（レイアウト・配色・余白）中心
- コーダー：動作（構造・スクリプト・通信）中心
つまり、両者がDevToolsを理解すれば、同じ画面を見ながら原因を共有し、即座に修正が可能になります。
まとめ｜DevToolsを使いこなせばWeb制作が何倍も速くなる
Chromeのデベロッパーツールは、「見えない部分を見える化する最強のツール」です。
最初は難しく感じても、Elements・Console・Networkの3つを押さえるだけで作業効率はぐんと上がります。
慣れてきたら、LighthouseでSEO改善を行ったり、Performanceで速度分析を行ったりと、デザイン＋技術＋マーケティングのすべてを支える力になります。
デザイナーは見た目の調整、コーダーは動作の確認。
一見役割が違っても、両者がDevToolsという共通のツールを使うことで、「なぜ崩れているのか」「どこを直せばよいのか」を同じ視点で共有できます。
特にElements・Console・Networkの3つは、Web制作の現場で最も活躍する機能。
慣れてくると、ブラウザを開くだけで問題を目で見て理解できるようになります。
DevToolsを理解することは、「見えるデザイン」と「動くコード」をつなぐ第一歩。
これからのWeb制作者にとって、欠かせないスキルです。
🧩補足説明：🔍SEO視点でのポイント整理
| パネル名 | 役割 | 主な対象者 |
|---|---|---|
| Elements | HTML/CSS構造の確認・修正 | デザイナー／コーダー |
| Console | JSエラー・ログ確認 | コーダー |
| Network | 通信・読み込み速度の確認 | デザイナー／コーダー |
| Lighthouse | パフォーマンスとSEO分析 | デザイナー／マーケター |
SEO（検索エンジン最適化）を強化するうえでも、DevToolsは非常に役立ちます。
特に以下の観点での分析が重要です。
✅ ページ表示速度（Core Web Vitals）
- 「Performance」や「Lighthouse」パネルで測定
Largest Contentful Paint（LCP）やCumulative Layout Shift（CLS）の数値を確認
✅ モバイル最適化（レスポンシブ対応）
- 「Device Toolbar」でスマホ幅をシミュレーション
- タップ領域・フォントサイズ・画像比率を確認
✅ 画像やスクリプトの最適化
- 「Network」で読み込みの重いファイルを特定
- 不要なJSや未圧縮画像を削減
✅ メタ情報と構造化データ
- 「Elements」で
<title>や<meta description>の確認 - SEOキーワードの入れ忘れや重複を防止
こうした改善を継続的に行うことで、検索上位化とユーザー体験の向上の両方を実現できます。
