🛠️ 2026年最新版・完全ガイド

ブラウザ開発者ツール徹底活用術

F12を押すだけで見える、Webページの裏側。デバッグからセキュリティ診断まで、5つのパネルの使い方を一気に解説

🔧 DevTools 💻 Web開発 🔍 デバッグ 🔒 セキュリティ診断

📋 目次

開発者ツールとは何か
Elements｜見た目を確認・書き換える
Console｜エラーを読み、コードを試す
Network｜通信の中身を追う
Sources｜コードの実行を1行ずつ追う
Application｜保存データの中身を見る
レスポンシブ・パフォーマンス確認
セキュリティ診断としての活用と注意点
まとめ・CTFで実践する

🧭 開発者ツールとは何か

ブラウザに標準搭載された、Webページの中身を丸ごと覗ける調査ツールです。

🔧

誰でも無料で使える「Webページのレントゲン」

Chrome・Edge・Firefoxなど主要なブラウザには、追加インストール不要の開発者ツール（DevTools）が標準搭載されています。特別なソフトを入れなくても、いま開いているページの構造・通信・実行中のコードまで、ほぼすべてを見える化できます。エンジニアだけの道具だと思われがちですが、実際にはWebサイトを公開している人なら誰でも一度は開いておくべき「健康診断ツール」です。

🗺️ 開発者ツールの開き方（3通り）

パネル名	見えるもの	主な用途
Elements	HTML構造・CSSスタイル	見た目の確認・その場での書き換え
Console	エラーログ・JS実行結果	エラー確認・簡易的なJS実行
Network	すべての通信内容	API通信・画像・fetchレスポンスの確認
Sources	読み込まれたJSファイル	ブレークポイントを使った実行過程の追跡
Application	Cookie・LocalStorage等	保存データの中身の確認

※ パネル名・配置はブラウザにより多少異なりますが、Chrome/Edge系はほぼ共通です。この記事ではChrome/Edgeでの表記を基準にします。

ブラウザ	呼び方の違い	備考
Chrome / Edge	Elements / Console / Network / Sources / Application	Chromiumベースのため機能・見た目がほぼ共通
Firefox	インスペクター / コンソール / ネットワーク / デバッガー / ストレージ	名称が日本語化されている点が主な違い
Safari	要素 / コンソール / ネットワーク / ソース / ストレージ	初期設定では「開発」メニューを環境設定から有効化する必要がある

呼び方は違っても「見た目・エラー・通信・コード・保存データ」という5つの役割はどのブラウザも共通です。1つのブラウザで使い方を覚えれば、他のブラウザでもすぐに応用できます。

💡

「自分のサイトが正しく動いているか」を確認する道具でもある

開発者ツールはハッキングの道具ではなく、本来はWeb開発者がバグを見つけ、動作を検証するための標準ツールです。自分のサイトを公開する前のチェックにも欠かせません。この記事では5つの主要パネルを1つずつ、実際の使い方とセキュリティ診断の視点の両方から解説していきます。

🎨 Elements｜見た目を確認・書き換える

まず触ってみるべき、いちばん身近なパネルです。

🖌️

HTML/CSSをその場で書き換えて確認する

Elementsパネルでは、表示中のページのHTML構造とCSSスタイルがそのままツリー表示されます。要素をクリックすると、右側にそのスタイル（色・余白・フォントサイズ等）が一覧表示され、数値をクリックしてその場で書き換えると、ページの見た目がリアルタイムに変化します。「このボタンをもう少し大きくしたらどう見えるか」を、コードを保存せずに試作できるのが最大の利点です。

要素を選ぶ

Elementsパネル左上の矢印アイコン（要素選択）をクリックし、ページ上で確認したい部分をクリックする。

スタイルを確認・編集する

右側のStylesパネルに適用中のCSSが表示される。プロパティの値をダブルクリックすると書き換えられる。無効化したいプロパティはチェックボックスを外すだけでよい。

Computedタブで最終結果を見る

複数のCSSルールが競合している場合、Computedタブで「結局どの値が適用されているか」を一括確認できる。余白やサイズが思った通りにならないときの原因調査に便利。

変更はリロードで消える

ここでの編集はブラウザ上だけの一時的なもの。実際のサイトのファイルは変更されないので、気軽に試せる。

🔓

よく知られる小技：入力欄の種類を書き換える

パスワード入力欄は通常「●●●」で隠れていますが、Elementsパネルでその入力欄のtype="password"をtype="text"に書き換えると、今まさに自分が入力した文字がそのまま見えるようになります。あくまで自分のブラウザ上の表示が変わるだけで、他人には影響しません。CTF初級編⑤で実際に近い体験ができます。

📦 ボックスモデルを理解する

CSSでレイアウトが崩れて困ったときの多くは、この「ボックスモデル」の理解不足が原因です。Elementsパネルの右下（Computedタブの下）に表示される図を見れば、その要素が実際にどれだけのスペースを占めているかが一目でわかります。

📟 Console｜エラーを読み、コードを試す

「動かない」と思ったら、まずここを開きましょう。

📟

エラーメッセージは全部ここに出る

Consoleパネルには、ページ内で発生したJavaScriptのエラーが赤字で表示されます。「ボタンを押しても反応しない」と思ったら、まずConsoleを開いてエラーの有無を確認するのがWeb開発の基本動作です。エラーメッセージには、どのファイルの何行目で問題が起きたかまで表示されるので、原因調査の出発点になります。

基本

console.log()

変数の中身を表示する、最もよく使う出力命令。コード中に仕込んで実行タイミングを追う。

配列・オブジェクト向け

console.table()

配列やオブジェクトを見やすい表形式で出力できる。データの中身をざっと確認したいときに便利。

警告・エラー

console.warn() / error()

通常のlogと違う色（黄色・赤色）で表示され、重要度の高いログを目立たせられる。

計測

console.time() / timeEnd()

2つの命令の間の処理時間を計測できる。処理が遅い箇所を特定したいときに使う。

また、Console自体に直接JavaScriptのコード（例：document.titleやdocument.querySelectorAll('a').length）を入力して実行し、その場で結果を確認することもできます。ページを一切書き換えることなく、ちょっとした計算や情報取得を試せる「その場の電卓」として使えます。

🔗

ElementsとConsoleは繋がっている

Elementsパネルで要素を選択した状態でConsoleに切り替えると、その要素を$0という特殊な変数で参照できます。$0.style.color='red'のように打てば、選択中の要素を直接JavaScriptから操作できます。「見た目の確認」と「コードでの操作」を行き来しながら調査できるのが、2つのパネルを併用する強みです。

📡 Network｜通信の中身を追う

ページの裏側で何が起きているかを、一覧で見る。

📶

すべての通信が記録される

Networkパネルを開いた状態でページを操作すると、発生したすべての通信（HTML・CSS・画像・API呼び出し等）が一覧に記録されます。各行をクリックすると、リクエストの詳細・レスポンスの中身（JSONやHTML）・ステータスコードまで確認できます。「ボタンを押したときに裏で何のAPIが呼ばれているか」「画像が404で読み込めていないか」を調べるときに使います。

200番台

成功

200 OKなど。リクエストが正常に処理された状態。

300番台

リダイレクト

301/302など。別のURLへ転送されている状態。

400番台

クライアントエラー

404（見つからない）・403（権限なし）等、リクエスト側の問題。

500番台

サーバーエラー

サーバー側の処理中に問題が起きている状態。

見る場所	わかること
Headers タブ	リクエスト/レスポンスのヘッダー情報。送信元・送信先・Cookieの有無など
Preview タブ	レスポンス内容を整形して見やすく表示（JSON等はツリー展開できる）
Response タブ	レスポンスの生データをそのまま表示
Timing タブ	そのリクエストが「待機→送信→受信」の各段階でどれだけ時間がかかったか

通信量が多いページでは一覧が埋もれてしまいますが、上部のフィルタ（Fetch/XHR・JS・CSS・Img等）で種類を絞り込めます。「APIの通信だけ見たい」ときはFetch/XHRを選ぶのが定石です。

💾

キャッシュとPreserve log

一覧に「(disk cache)」「(memory cache)」と表示される行は、サーバーへ再度取りに行かず、ブラウザに保存済みのデータを使い回した通信です。表示速度の確認では、キャッシュを無視して毎回本当に通信させる「Disable cache」にチェックを入れて計測するのが基本です。またページ遷移をまたいで通信ログを残したい場合は「Preserve log」を有効にしておきます（通常は画面遷移のたびに一覧がリセットされてしまいます）。

🔧 実践例：画像が表示されない原因を調べる

Networkパネルを開いてページを再読み込み

フィルタを「Img」に絞ると、画像関連の通信だけが一覧に並ぶ。

ステータスコードを確認する

該当の画像行が赤字で404になっていれば「そもそもそのURLに画像が無い」と確定できる。

リクエストURLを確認する

Headersタブでリクエスト先のURLを見て、ファイル名のスペルミスやパスの間違いがないか確認する。ここまで分かれば修正は簡単。

🐛 Sources｜コードの実行を1行ずつ追う

本格的なデバッグの主戦場です。

🐛

ブレークポイントで実行を止める

Sourcesパネルでは、ページが読み込んでいるJavaScriptファイルの中身を直接見られます。行番号をクリックしてブレークポイント（一時停止ポイント）を設置すると、その行の実行直前でページの動作が止まり、その時点での変数の中身を確認しながら1行ずつ進めることができます。「なぜこの計算結果がおかしいのか」を追跡する、本格的なデバッグ手法です。

ブレークポイントの種類	止まるタイミング
行ブレークポイント	指定した行が実行される直前（最も基本）
条件付きブレークポイント	指定した条件式が真になったときだけ（右クリックで設定）
DOM ブレークポイント	特定のHTML要素が変更・削除されたとき
XHR/fetch ブレークポイント	特定のURLへの通信が発生したとき

停止中は右側にあるScope（変数の中身）とCall Stack（どの関数から呼ばれてきたか）を確認できます。「1行ずつ進める（Step over）」「関数の中に入る（Step into）」といったボタンで、実行をコントロールしながら原因を追い込めます。

✨

読みにくいコードは「Pretty print」で整形できる

公開されているサイトのJavaScriptは、通信量を減らすために改行やスペースを詰めた「minify（圧縮）」状態で配信されていることがほとんどです。画面下の{ }アイコン（Pretty print）をクリックすると、詰まったコードを人間が読みやすい形に自動整形してくれます。仕組みを読み解きたいときはまずこれを押しましょう。

関連機能	できること
Watch式	停止中に常に監視したい変数・式をあらかじめ登録しておける
Snippets	よく使う調査用コードを保存しておき、どのページでもワンクリックで実行できる
Local overrides	サーバー上のファイルを直接編集しなくても、ブラウザ側でファイルの中身を差し替えて動作確認できる

🗄️ Application｜保存データの中身を見る

ここから先は、セキュリティ診断の視点そのものになります。

🍪

Cookie・LocalStorageが丸見えになる

Applicationパネルでは、そのサイトが保存しているCookie・LocalStorage・SessionStorageの中身を一覧で確認できます。ログイン状態を保持するトークンや、サイトが保存しているちょっとした設定値などが、キーと値のペアでそのまま表示されます。値をダブルクリックすれば書き換えることもできてしまいます。

保存領域	特徴	見るときの視点
Cookie	サーバーにも自動送信される	有効期限・`Secure`/`HttpOnly`属性の有無
LocalStorage	ブラウザ内に半永久保存	機密情報が平文で入っていないか
SessionStorage	タブを閉じると消える	一時的なデータの中身
Cache Storage	オフライン表示用にファイルを保存	古いバージョンが残っていないか

CookieのHttpOnly属性は「JavaScriptからは読み取れない」という保護がかかっているかどうかを示します。ログインセッションを扱うCookieにこの属性が付いていない場合、何らかの理由でページに悪意あるスクリプトが混入した際に、セッション情報を盗み取られるリスクが高まります。Secure属性は「HTTPS通信でしか送信しない」という意味で、これが無いと通信経路の途中でCookieが盗聴される可能性があります。

一覧の左側にはService WorkersやManifestという項目もあります。Service Workerはページを閉じた後もバックグラウンドで動き続ける特殊なスクリプトで、オフライン対応やプッシュ通知の裏側で使われています。意図せず古いService Workerが残り続けて「更新したはずのサイトが反映されない」というトラブルの原因になることもあり、その場合はこのパネルから登録解除できます。

📱 レスポンシブ・パフォーマンス確認

Web開発を始めたばかりの人にこそ使ってほしい機能です。

📱

Device Toolbar：スマホ表示をPCで再現する

画面左上のスマホ・タブレットのアイコン（Device Toolbar）をクリックすると、iPhoneやAndroidなど様々な画面サイズでの表示をPC上でそのまま確認できます。実機を持っていなくても「スマホで見たときにレイアウトが崩れていないか」を確認できるため、Web制作では欠かせない機能です。

⚡

Lighthouse：サイトの健康診断

開発者ツールの「Lighthouse」タブでは、表示速度・アクセシビリティ・SEOなどの観点からサイトを自動採点してくれます。ボタン1つで診断が走り、改善点まで具体的に提示してくれるため、自分のサイトの弱点を客観的に把握するのに役立ちます。

Performance

表示速度

ページが表示され切るまでの速さを採点。画像の重さ等が主な減点要因になりやすい。

Accessibility

アクセシビリティ

色のコントラストや代替テキストの有無など、誰にとっても使いやすいかを採点。

SEO

検索エンジン対応

検索エンジンがページ内容を正しく理解できる構造になっているかを採点。

🔒 セキュリティ診断としての活用と注意点

「見えるもの」を知ることは、そのまま「守るべきもの」を知ることに繋がります。

🔎

自分のサイトの”うっかり”を発見する

もしあなたがサイト運営者なら、公開前にApplicationパネルとSourcesパネルを一通り確認する習慣をつけましょう。JavaScriptファイルの中にAPIキーやパスワードをそのまま書いてしまっていないか、LocalStorageに個人情報を平文で保存していないかは、開発者ツールを開くだけで誰にでも見つけられてしまいます。

🎯

「フロントエンドだけの制限」は簡単に外せてしまう

例えば「割引クーポンは1000円以上の購入で有効」という制限をJavaScript側だけでチェックしている場合、Sourcesパネルでそのチェック処理そのものを見つけて無効化したり、Consoleから直接クーポン適用の関数を呼び出したりすれば、条件を満たさなくても割引を適用できてしまいます。フロントエンドの入力チェックは「親切なユーザーへの案内」に過ぎず、悪意ある操作を防ぐ壁にはなりません。価格計算・権限確認・購入条件などの重要なロジックは、必ずサーバー側でも同じチェックを行う必要があります。

項目	❌ 危険な実装	✅ 安全な実装
APIキー	JSファイルに直接記述	サーバー側の環境変数で管理
ログイン情報	LocalStorageに平文保存	`HttpOnly`付きCookieで管理
権限チェック	フロントエンドのJSのみで判定	サーバー側でも必ず再検証
個人情報の通信	URLパラメータに含める	POSTボディ＋HTTPS化

🚨 重要

開発者ツールで見えるものは、あなただけでなくサイトを訪れた全員が同じように見られます。「フロントエンドのコードだから大丈夫」という油断は禁物です。パスワード・APIキー・秘密鍵など、絶対に見られてはいけない情報は、クライアント側（ブラウザで動くコードやLocalStorage）ではなく、必ずサーバー側で管理してください。

⚠ 注意

他人が運営するサイトの開発者ツールで見つけた情報を悪用したり、無断で書き換えた画面をSNS等に投稿して混乱を招いたりする行為は、内容によっては不正アクセス禁止法などの法令に触れる可能性があります。開発者ツールはあくまで自分のサイトの検証・学習目的で使いましょう。

✅ 対策済み確認

サイト公開前のチェックリスト：①Sourcesであなたのソースコードを開き、パスワード・APIキーが直書きされていないか確認する ②ApplicationでLocalStorage/Cookieの中身を確認し、機密情報が平文保存されていないか確認する ③Networkで通信内容を確認し、不要な個人情報が送信されていないか確認する ④重要な権限チェックがサーバー側でも行われているか確認する。

Q&A