【2026年最新版】Chrome DevToolsの使い方入門完全ガイド

公開日：2026/03/11　更新日：2026/03/11　

※本ページにはプロモーション(広告)が含まれています

【2026年最新版】Chrome DevToolsの使い方入門完全ガイド

「Webページのソースコードを見たいけどどうすればいい？」「エラーが出てサイトが表示されないのを自分で調べたい」「スマートフォンの画面サイズでデザインを確認したい」――そんな方のために、本記事ではChromeブラウザに標準搭載されている開発者ツール「Chrome DevTools」の使い方を初心者向けに徹底解説します。

Chrome DevToolsはWebエンジニアや開発者のための強力なデバッグツールですが、エンジニアでない方でも「ページが重い理由を調べる」「デザインを一時的に変更して見た目を確認する」など実用的な使い方ができます。

本記事では主要なパネル（Elements・Console・Network・Lighthouse）の使い方と、モバイルビュー確認の方法を、スクリーンショット解説とともに丁寧に説明します。

この記事でわかること

Chrome DevToolsの概要と開き方
Elementsパネルの使い方（HTML/CSS確認・編集）
Consoleパネルの使い方（エラー確認・JavaScript実行）
Networkパネルの基本（通信速度・リクエスト確認）
モバイルビュー（レスポンシブデザイン確認）の使い方
パフォーマンス計測の基本（Lighthouseの使い方）
よくある問題とFAQ

Chrome DevToolsとは

概要

Chrome DevTools（デブツールズ）は、Googleが提供するChrome・Chromiumブラウザに標準搭載された開発者向けツールセットです。Webページを構成するHTML・CSS・JavaScript・通信データなどをリアルタイムで確認・編集できます。

一般的に「検証ツール」「デベロッパーツール」「開発者ツール」などとも呼ばれます。

Chrome DevToolsでできること

機能	用途	使うパネル
HTML/CSS確認・編集	ページの要素をリアルタイムで変更	Elements
エラー確認	JavaScriptエラーや警告を確認	Console
通信状況の確認	読み込み速度・APIの確認	Network
モバイル表示確認	スマートフォン画面をシミュレート	Device Toolbar
パフォーマンス計測	ページ速度・SEOスコアの確認	Lighthouse
ストレージ確認	Cookie・LocalStorageの確認	Application

DevToolsの開き方

Chrome DevToolsを開く方法は複数あります。状況に応じて使い分けましょう。

方法1: キーボードショートカット（最速）

Windows / Linux: F12 または Ctrl+Shift+I
Mac: Cmd+Option+I

方法2: 右クリックメニューから開く

調べたい要素の上で右クリック
メニューから「検証」を選択
その要素がElementsパネルでハイライト表示された状態で開く

方法3: Chromeメニューから開く

右上の「⋮」メニューをクリック
「その他のツール」→「デベロッパーツール」を選択

DevToolsの表示位置を変える

DevToolsはブラウザウィンドウの右側・下側、または独立したウィンドウとして表示できます。

DevTools右上の「⋮」アイコン→「Dock side（配置）」で変更
「下に固定」「右に固定」「左に固定」「独立したウィンドウ」から選択

Elementsパネルの使い方

Elementsパネルの概要

ElementsパネルはWebページのHTML構造（DOMツリー）とそれに適用されているCSSスタイルを確認・編集できるパネルです。ページのレイアウト崩れや文字の変更を確認したいときに最もよく使われます。

特定の要素を検証する

方法A: 右クリック→「検証」

調べたい要素（テキスト・ボタン・画像など）を右クリック
「検証」を選択するとその要素のHTMLがElementsパネルでハイライト表示される

方法B: 要素選択ツールを使う

DevTools左上の「矢印カーソル」アイコンをクリック（ショートカット: Ctrl+Shift+C）
ページ上のマウスカーソルが選択モードになる
調べたい要素をクリックすると、そのHTMLがElementsパネルに表示される

HTMLを一時的に編集する

Elementsパネルで編集したHTMLはブラウザ上だけで適用され、サーバーのファイルは変更されません。ページをリロードすると元に戻ります（確認・テスト用に便利）。

Elementsパネルで編集したいHTML要素をダブルクリック
テキストを直接編集してEnterで確定
または要素を右クリック→「HTMLとして編集」でまとめて編集

CSSを確認・編集する

Elementsパネルの右側（または下側）に「Styles」タブが表示されています。ここで選択した要素に適用されているCSSを確認できます。

CSSを一時的に変更する:

Stylesパネルでプロパティ名またはプロパティ値をクリック
直接値を入力して変更（例: color: red に変更）
矢印キー上下で数値を増減できる

新しいCSSプロパティを追加する:

Stylesパネルのルールセットの中をクリック
新しいプロパティ名を入力してTabキーで値の入力へ
値を入力してEnterで確定

ボックスモデルを確認する:

「Computed」タブでmargin・border・padding・content（ボックスモデル）のサイズを視覚的に確認できる
要素がなぜ予期した位置に表示されないかを調べるのに役立つ

Consoleパネルの使い方

Consoleパネルの概要

Consoleパネルは主に以下の2つの用途で使います。

エラー・警告の確認: JavaScriptのエラーや警告メッセージが表示される
JavaScriptの実行: コードを直接入力して実行できる（開発・デバッグ用）

エラーメッセージを読む

Consoleにはエラーの重要度に応じて色分けされたメッセージが表示されます。

アイコン/色	種類	意味
赤（✕）	Error	重大なエラー。ページや機能が動かない原因になっている可能性が高い
黄（⚠）	Warning	警告。すぐに問題にはならないが対処が望ましい
青（ℹ）	Info	情報メッセージ。開発者が意図的に出力しているログ
白（通常）	Log	console.log() で出力された通常ログ

よくあるエラーメッセージの意味

Uncaught TypeError: Cannot read properties of null: nullのオブジェクトのプロパティにアクセスしようとしているエラー
404 (Not Found): 読み込もうとしたリソース（画像・スクリプト等）が見つからない
CORS error: 別ドメインへのリクエストがセキュリティポリシーでブロックされている
SyntaxError: Unexpected token: JavaScriptの構文エラー（括弧の閉じ忘れなど）

Consoleでコマンドを実行する

ConsoleパネルのプロンプトにJavaScriptを入力してEnterを押すと、そのページのコンテキストで実行されます。

実用的なコマンド例:

// ページのタイトルを取得
document.title

// ページ内のリンクをすべて取得
document.querySelectorAll('a').length

// ページをスクロールする
window.scrollTo(0, 1000)

// 特定のテキストを含む要素を探す
document.body.innerHTML.includes('探したいテキスト')

// ページのロード時間を確認
performance.timing.loadEventEnd - performance.timing.navigationStart

Consoleのフィルタリング

大量のメッセージがある場合、上部のフィルターバーで絞り込めます。

「Errors」のみ表示: Errorsボタンをクリック
テキスト検索: フィルターバーにキーワードを入力
「Clear console」でメッセージをクリア

Networkパネルの基本

Networkパネルの概要

Networkパネルでは、ページを読み込む際にブラウザが行っているすべての通信リクエストを確認できます。

どんなファイル（画像・CSS・JavaScript・API）を読み込んでいるか
それぞれのファイルのサイズと読み込みにかかった時間
エラーが発生している通信がないか
APIのリクエスト内容とレスポンスデータ

Networkパネルの基本的な使い方

DevToolsを開いた状態で「Network」タブをクリック
ページをリロード（F5またはCtrl+R）すると通信リストが表示される
各行が1つのリクエスト。クリックすると詳細が表示される

Networkパネルの見方

列名	意味
Name	リクエストしたファイル名またはURL
Status	HTTPステータスコード（200=OK、404=Not Found、500=サーバーエラーなど）
Type	ファイルの種類（document/stylesheet/script/xhr/fetch/imageなど）
Size	ファイルサイズ（キャッシュの場合はdisk cacheと表示）
Time	リクエスト完了までにかかった時間（ミリ秒）
Waterfall	通信のタイムライン（どの順番でいつ読み込まれたか）

通信のフィルタリング

All: 全リクエストを表示
Fetch/XHR: APIリクエストのみ表示（JSONデータのやりとりを確認したいときに便利）
Img: 画像のみ表示
JS: JavaScriptファイルのみ
CSS: CSSファイルのみ

通信速度をシミュレートする（スロットリング）

Networkパネルの上部にある「スロットリング」ドロップダウンから通信速度を制限できます。

「Fast 4G」「Slow 4G」「3G」「Offline」などから選択
低速回線での表示をテストするときに使う
テスト後は必ず「No throttling（制限なし）」に戻す

モバイルビュー（レスポンシブデザイン確認）の使い方

Device Toolbar（デバイスツールバー）の開き方

DevToolsを開いた状態で、上部ツールバーのスマートフォン/タブレットアイコンをクリック
ショートカット: Ctrl+Shift+M（Mac: Cmd+Shift+M）
ブラウザのビューポートがデバイス表示モードに切り替わる

デバイスの選択

上部に表示されるドロップダウンから様々なデバイスを選択できます。

iPhone SE、iPhone 15 Pro、Samsung Galaxy S20等の実機サイズ
iPad、iPad Pro等のタブレット
「Responsive」モードでスライドバーを使って自由にサイズ変更

Device Toolbarで確認できること

画面サイズの確認: 異なる端末サイズでデザインがどう変わるかを確認
タッチイベントのシミュレート: マウス操作をタッチ操作として扱う（スワイプ操作の確認）
DPR（デバイスピクセル比）の確認: Retinaディスプレイでの表示確認
ユーザーエージェントの確認: スマートフォンのUserAgentで動作するページを確認

パフォーマンス計測の基本（Lighthouseの使い方）

Lighthouseとは

LighthouseはChromeに内蔵されているWebサイトの品質分析ツールです。パフォーマンス・アクセシビリティ・SEO・ベストプラクティスの4つの観点でWebサイトを自動分析し、スコアと改善提案を提供します。

Lighthouseの使い方

DevToolsのタブ一覧で「Lighthouse」タブを選択（見当たらない場合は「>>」から選択）
分析するカテゴリを選択（Performance・Accessibility・Best Practices・SEO）
デバイスを「Mobile」または「Desktop」に設定
「Analyze page load」ボタンをクリック
30秒〜1分ほど待つと分析結果が表示される

Lighthouseスコアの読み方

スコア	評価	色
90〜100	優秀	緑
50〜89	改善の余地あり	オレンジ
0〜49	要改善	赤

主要な計測指標:

LCP（Largest Contentful Paint）: ページの主要コンテンツが表示されるまでの時間（2.5秒以下が理想）
FID / INP（Interaction to Next Paint）: ユーザー操作への応答速度（200ms以下が理想）
CLS（Cumulative Layout Shift）: ページ読み込み中にレイアウトがどれだけズレるか（0.1以下が理想）
FCP（First Contentful Paint）: 最初のコンテンツが表示されるまでの時間

よくある問題と解決方法

問題1: DevToolsを開いたらページのレイアウトが崩れた

原因: DevToolsが開くことでブラウザウィンドウの幅が変わり、レスポンシブデザインが変化した。

解決策:

DevToolsを独立したウィンドウに分離する（「⋮」→「Undock into separate window」）
または「下に固定」にするとページ幅が変わらない

問題2: Networkパネルに通信が表示されない

原因: DevToolsを開く前に通信が完了していた場合、過去の通信は表示されない。

解決策:

Networkタブを開いた状態でページをリロードする
「Preserve log」チェックボックスをオンにするとページ遷移をまたいでログを保持できる

問題3: Consoleにたくさんのエラーが出ているが何が原因かわからない

解決策:

赤色のエラーを優先して確認する（警告より重要度が高い）
エラーメッセージをクリックするとエラーが発生した行番号が表示される
Googleで「エラーメッセージ + サイト名または使っているライブラリ名」を検索すると解決策が見つかることが多い

問題4: ElementsパネルでCSSを編集しても変化しない

原因: より優先度の高いCSSルールが上書きしている（取り消し線が付いているプロパティ）。

解決策:

Stylesパネルで取り消し線が付いているプロパティは上書きされているので確認
Computedタブで最終的に適用されているスタイルを確認する
より具体的なセレクタのCSSや !important が優先されている可能性がある

問題5: DevToolsが日本語で表示されない

解決策:

DevToolsの「⋮」→「Settings」→「Language」から日本語を選択
ChromeブラウザのUIとDevToolsのUIは言語設定が別の場合がある

問題6: モバイルビューで表示が実機と違う

解決策:

DevToolsのデバイスシミュレーターは完全な実機再現ではない。特にフォントレンダリングやスクロール挙動は異なる場合がある
重要なテストは必ず実機でも行う
Chrome for Androidの「リモートデバッグ」機能を使えば実機をPCから操作しながらDevToolsで確認できる

よくある質問（FAQ）

Q1. DevToolsを使うとサイトのデータが盗めますか？

A. DevToolsはあなた自身のブラウザ上での動作を確認するツールです。他のユーザーの通信を盗み見ることはできません。ただし、自分がアクセスしているページに送信されているCookieやトークンはNetworkパネルで見ることができるため、公共のPCでは使用に注意が必要です。

Q2. DevToolsで変更した内容は保存されますか？

A. いいえ、DevToolsでHTMLやCSSを変更しても、ページをリロードすると元に戻ります。DevToolsの変更はブラウザのメモリ上のみに適用されるため、サーバーのファイルは一切変更されません。永続的な変更はサーバーのファイルを直接編集する必要があります。

Q3. Chrome以外のブラウザにも同様のDevToolsはありますか？

A. はい、主要ブラウザには同様の開発者ツールが搭載されています。Firefox（Firefox Developer Tools）・Safari（Safari Web Inspector）・Edge（Edge DevTools）など。操作感はやや異なりますが基本機能は同様です。EdgeはChromiumベースのためChromeと非常に似た操作感です。

Q4. Lighthouseのスコアはどの程度信頼できますか？

A. Lighthouseのスコアは参考値として有用ですが、毎回実行するたびに若干スコアが変わることがあります。ネットワーク状況やPC負荷の影響を受けるためです。より正確な計測には「3回実行して平均を取る」「シークレットウィンドウで実行する（拡張機能の影響を排除）」ことが推奨されます。

Q5. DevToolsでスマートフォンのChromeを操作・デバッグできますか？

A. はい、Androidデバイスに限り「リモートデバッグ」が可能です。USB接続したAndroidスマートフォンのChromeを、PCのChromeのDevToolsから操作・デバッグできます。DevToolsの「⋮」→「More tools」→「Remote devices」から設定します。iOSはSafariのリモートデバッグが利用可能です。

Q6. DevToolsで使えるショートカットキーを教えてください。

A. 主なショートカットは以下の通りです。DevToolsを開く（F12）、要素選択モード（Ctrl+Shift+C）、デバイスツールバー切り替え（Ctrl+Shift+M）、DevToolsの検索（Ctrl+Shift+F）、設定を開く（Shift+?）。全ショートカット一覧はDevToolsの「⋮」→「Shortcuts」から確認できます。

Q7. DevToolsのConsoleで実行したコードをファイルに保存できますか？

A. DevToolsの「Sources」タブにある「Snippets」機能を使うと、JavaScriptコードを保存して再利用できます。Sources→Snippets→「+ New snippet」から作成でき、右クリック→「Run」で実行できます。よく使うスクリプトをスニペットとして保存しておくと便利です。