普段見てるホームページやアプリ。あれの「裏側」が、実はキー1つで全部見えます。

ボタンをどうやって作ってるか。データをどこから持ってきてるか。なんでここでエラーが出るのか。全部、自分の目で確認できます。

ただ、初めて開くと「何これ、どこ見たらいいの？」で固まります。私もそうでした。F12押した瞬間、画面の右半分が謎の英語の海になって、<head> <body> <script>って何の儀式？って思いました。

この記事は、F12（=開発者ツール、DevTools、検証ツール、全部同じものです）を初めて開いた人が、迷子にならないための1枚の地図です。

シリーズ第1回：このQiitaシリーズは、新卒・文系エンジニアと、バイブコーダー（AIにコード書かせてる人）が、F12（DevTools）を1から使えるようになるための連載です。間違いはコメントで遠慮なく指摘してください。

この記事で得られること

F12を開いたときに見える画面の全体像がわかる
各タブが何のためにあるかが指差せるようになる
AIに「DevToolsで〜を確認して」と言われたとき、どこを見ればいいか分かる
自分のアプリで詰まったとき、まずF12を開く習慣がつく

読了目安：約8分

このシリーズのスタンス：新卒・文系エンジニアは「具体→抽象」の逆順で学ぶ

普通の入門書は、こう教えてくれます。

HTTPとは何か → リクエスト構造 → ヘッダーとは → curlで叩いてみよう

抽象から具体に降りていく順番です。理系出身者やCS（Computer Science）の素養がある人にはこれが効きます。

でも、新卒・文系エンジニアには逆が効きます。

F12開いて画面で実物を見る → これが何だったかを後から名付ける

具体から抽象に上がる順番です。AIに「HTTPとは」と説明されても、それが画面のどこと対応するか分からないと知識は定着しません。先に「画面のここに出てるアレ」と知ってから「これがリクエストヘッダーって呼ばれてる」と接続する方が腹落ちします。

私自身、AIにコードを書かせているバイブコーダーで、自分のアプリを作ってるときにF12を何度も開きました。でもソースタブもコンソールタブも何見ていいか分からず、1タブ開くたびに固まっていました。同じ場所で詰まった人と一緒に、F12と仲良くなるのがこのシリーズの目的です。

第1回は、F12全体の「地図」です。各タブが何のためにあるかをざっくり押さえます。第2回以降、Networkタブ・Consoleタブ・Sourcesタブと、1タブずつ深掘りしていきます。

検証環境

項目	バージョン
OS	Windows 11 Home（25H2 / OSビルド 26200.8246）
ブラウザ	Google Chrome（最新版）

MacユーザーやEdge/Firefoxユーザーへ
F12の中身（タブ構成・名称）はChrome系（Chrome / Edge）でほぼ共通です。Firefoxも名称はほぼ同じですが配置が一部違います。本記事はChromeの画面で説明します。

F12を開いてみる

まずは開きます。3通りの方法があります。

OS	方法1	方法2	方法3
Windows	`F12` キーを押す	`Ctrl + Shift + I`	画面で右クリック → 「検証」
Mac	`Fn + F12`	`Cmd + Option + I`	画面で右クリック → 「検証」

どれでもOKです。一番速いのはF12キーですが、ノートPCだとFnキーとの組み合わせが必要な場合もあります。

ノートPCでF12を押しても何も起きない人へ
キーボード上段のFキーが、デフォルトで「音量」「画面輝度」みたいな機能キーに割り当てられている機種があります（特にDELL、HP、Lenovoの一部モデル）。その場合は Fn + F12 を試してください。それでもダメなら Ctrl + Shift + I が最強です。

私はWindowsでF12一発派です。たぶん人類で一番押してるキーがF12です。

開く前に：用語の混乱を最初に解いておく

このツール、呼び方がやたら多いです。全部同じものを指しています。

呼び方	どこで使われる
F12	キー名そのまま
開発者ツール	日本語の正式名（Chrome設定画面など）
DevTools	英語の略称（公式ドキュメント）
検証 / 検証ツール	右クリックメニューでの表記
Inspector	Firefoxでの名称

AIに質問すると、相手がどの呼び方で返してくるかバラバラです。「F12開いてください」「DevToolsで確認して」「検証ツールを見ましょう」、全部同じ場所のことを言ってます。焦らなくて大丈夫。本記事ではこれ以降、「F12」と「DevTools」を文脈に応じて使い分けます。

F12を開いた瞬間に見えるもの

実際に開いてみます。今このQiitaのページでF12を押してみてください。

画面の右側か下側に、もう1つの「画面のような何か」が出てきます。これがDevToolsです。私は最初これを見たとき「勝手に何か始まった」と思ってブラウザを閉じました。落ち着いてください。これが正体です。

最初に見るべきは上部に並んでいるタブです。だいたい以下のタブが横並びになっているはずです。

タブ名	パッと見の印象
Elements	HTMLっぽい何かが大量に表示される
Console	黒い画面 / 赤いエラーメッセージが出てたりする
Sources	フォルダ構造とコードファイル
Network	最初は空。リロードすると何か流れる
Performance	グラフっぽい画面
Memory	グラフっぽい画面
Application	Cookie、Storage、Cacheの文字が並ぶ
Security	鍵マークと証明書情報
Lighthouse	性能スコア計測

「タブ多すぎ」と思ったあなた、正しい感覚です。私も思いました。

でも安心してください。最初に覚えるのは Elements / Console / Sources / Network / Application の5つだけで十分です。残りは「あるんだな」くらいでOK。

5タブだけ覚えればいい理由
プロのエンジニアでも、日常で開くのはほぼこの5タブです。Performance / Memory はパフォーマンスチューニングをする中〜上級フェーズの道具で、入門段階では出番ゼロ。最初から全部覚えようとすると挫折します。

次の章で、この5つを1つずつ「何のためにあるか」だけ押さえます。

タブ別「これ何のためにあるの？」

各タブを「何が見えるか」「いつ使うか」の2点だけ説明します。深掘りは第2回以降。

Elements（要素）：HTMLとCSSの実物

何が見える？
今表示されているWebページのHTMLとCSSが、そのまま表示されています。<div> <script> みたいなタグが入れ子になっているのが見えるはずです。

いつ使う？

「このボタン、なんでここに配置されてるんだっけ」を確認したいとき
「この文字、CSSでどう装飾されてる？」を見たいとき
その場でHTMLやCSSを書き換えて、見た目がどう変わるか実験したいとき

実は書き換えできます。試しに、Elementsタブで適当な文字列をダブルクリックして、別の文字に変えてみてください。画面の表示も変わります。

「あれ、ホームページ書き換えちゃった？」と一瞬ヒヤッとします。

ここで書き換えても、サイト本体は変わりません
自分のブラウザ画面だけが一時的に変わってるだけです。リロード（F5）すれば元に戻ります。実際のサーバー上のファイルは無事です。安心して触ってOK。

Console（コンソール）：エラーとログの出口

何が見える？

JavaScriptのエラーメッセージ（赤字）
console.log() で出力されたログ（白字や青字）
警告メッセージ（黄色）

いつ使う？

自分のアプリが「動かない」とき → 真っ先に開く場所
AIに「エラーが出た」と相談する前に、ここに何が書いてあるか読む
JavaScriptを直接打ち込んで実験したいとき

このConsole、新卒・文系・バイブコーダーの三大初心者にとって実は最重要のタブです。理由をひとつだけ。

「動かない」とAIに丸投げする前に、Consoleを開いてください
Consoleの赤字をそのままコピーしてAIに貼るだけで、AIの回答精度は跳ね上がります。「エラーが出た、直して」と「Consoleにこのエラーが出た：Uncaught TypeError: Cannot read property 'map' of undefined、直して」では、解決スピードが10倍違います。

「英語のエラー、読めない」って思いますよね。読まなくていいです。コピペしてAIに『日本語で説明して』と聞く。それで終わり。バイブコーダーのままで戦えます。

Sources（ソース）：JavaScriptの本体

ここを開いたとき、私は完全に固まりました。

左側に node_modules っていうフォルダがあって、開いてみたら中に何百個もの謎フォルダがズラッと並んでました。さらにその中にもフォルダ。全部開いていったら夜が明けるやつです。

「これ全部読まないとバグ直せないの？」と本気で思いました。

答え：読まなくていいです。

何が見える？
このサイトを動かしているJavaScriptファイルの置き場所です。ただし、自分が書いたコードと、**外から借りてきたコード（npmライブラリ）**が、全部一緒に並んでます。だから多く見える。

いつ使う？

自分のアプリのバグの犯人探しをしたいとき
特定の行で処理を止めて変数の中身を覗きたい（ブレークポイント）
AIが書いたコードがブラウザで実際にどう動いてるか確認したいとき

新卒・文系が固まるポイント：node_modulesは「他人の家」
自分のファイル名で検索すればOK。Ctrl + P でファイル名検索、Ctrl + Shift + F で全ファイル横断検索（grep感覚）。node_modules配下は触らないのが正解。あれは他人の家です。勝手に上がり込むと壊します。

Network（ネットワーク）：HTTP通信が画面で全部見える

何が見える？
このサイトがサーバーと通信している中身が、1リクエストずつ全部表示されます。最初は空ですが、F12を開いたままページをリロードすると、ザーッと一覧が流れます。

このザーッと流れる感じ、初めて見たときちょっと興奮します。「サイトの裏で、こんなにいっぱい通信してたのか」って。普段見てるQiitaのトップページを開くだけで、画像・CSS・JSのリクエストが何十本も飛んでます。

いつ使う？

「APIを叩いたけど結果が返ってきてない気がする」を確認したいとき
ステータスコード（200 / 401 / 404 / 500）を確認したいとき
どんなヘッダー・どんなボディを送ってるか確認したいとき

Networkタブ開いたのに何も表示されない人へ
F12を開く前にリロードしたサイトは、Networkタブに記録されません。「開いたけど空じゃん！」となったら、F12を開いたまま F5 でリロードし直してください。これは仕様です。私もこれで30分溶かしたことがあります。

次回予告
このタブは特に重要なので、第2回で1記事まるごと使って深掘りします。HTTPの基礎、リクエスト・レスポンス、ステータスコードを画面で全部見ます。AIに「APIを叩いて」と言われて困ってる人は、第2回で全部解決します。

Application（アプリケーション）：Cookie・LocalStorage・キャッシュ

何が見える？
このサイトがブラウザに保存しているデータの中身。Cookie、Local Storage、Session Storage、IndexedDB、Cacheなど、普段見えない場所が全部見えます。

いつ使う？

「ログイン状態ってどこに保存されてるの？」を確認したいとき
「ログアウトしたいけどしつこく残ってる情報」を消したいとき（Storageを直接削除できる）
自分のアプリで localStorage.setItem(...) したデータが、実際に保存されてるか確認したいとき

「認証トークンってどこに置けばいいの？」「Cookieとは何なの？」みたいな疑問、AIに概念を説明してもらうより、ここで実物を見ると一瞬で解決します。「あ、これか」となります。

バイブコーダー向け補足
ログイン機能を作ってるとき、「ログインしたのにすぐログアウトされる」現象が起きたら、まずここを開いてCookie / LocalStorageを見ましょう。トークンが入ってないか、空っぽか、有効期限切れのどれかです。AIに状況を聞かれる前に、ここのスクショを撮って渡せば最強です。

その他のタブ（Performance / Memory / Security / Lighthouse）

このあたりは最初は触らなくていいです。名前だけ覚えておくと、AIに「Performanceタブで〜」と言われたときに「ああ、F12のあのタブね」と思い出せます。

タブ	ざっくり何ができる
Performance	サイトの動作速度を計測（重いサイトの原因調査）
Memory	メモリ使用量を見る（メモリリークの調査）
Security	このサイトのHTTPS証明書を確認
Lighthouse	サイト全体の品質スコアを自動計測

中級者になってから戻ってきます。今は無視でOK。

失敗談：私がF12で詰まった3つの場面

ここまで読んでも、実際に開くと絶対詰まります。私が実際に詰まった3つを共有します。同じ罠を踏まずに済むはず。

失敗談①：ソースタブ開いて30分固まった日

自分で作ってるアプリ（Reactで組んだ個人開発のもの）でバグが出て、AIに「Sourcesタブを開いてコードを確認してください」と言われました。

開きました。左側にズラッと並ぶフォルダ。「assets」「node_modules」「webpack:」……。自分が書いたコードがどこにあるのか分からない。webpack:って何？node_modulesの中、開けば開くほどフォルダが増えていく。

30分くらい無言でファイルツリーを開閉してました。

ここでわかったこと
ファイル数が多いのは「自分のコード + ライブラリのコード」が全部一緒に表示されてるから。本体（自分が書いた部分）は数個しかない。

次にどうしたか
Ctrl + P でファイル名検索ができることを知って、自分のファイル名（App.jsxとか）を直接打ったら一発で出ました。

気をつけるべきポイント
Sourcesタブは「全部読む場所」じゃなく「自分のファイルだけ探す場所」。node_modules は他人の家、勝手に上がり込まない。

豆知識
Ctrl + Shift + F でファイル横断のテキスト検索もできます。grepと同じ感覚。「この関数、どこから呼ばれてるんだっけ？」を一瞬で調べられます。これ知ってからSourcesタブが急に味方に見えました。

失敗談②：Consoleの赤字を直訳して詰んだ

別のとき、Consoleに英語の赤字エラーが出ました。意味不明だったので、自分でGoogle翻訳に貼って読みました。

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

翻訳結果：「未定義のプロパティを読み取ることができません（'map'を読み取り中）」

……日本語にしても意味分からんじゃん。

「mapって地図？」って真顔で考えました。違います。配列の .map() メソッドです。

ここでわかったこと
プログラミングのエラーは、直訳しても意味が通らない。専門用語が混ざってるので、コンテキスト込みの解説が必要。

次にどうしたか
エラー全文をコピーして、AIに「このエラーの意味と原因と直し方を、初心者向けに教えて」と投げました。3秒で完璧な解説が返ってきました。

気をつけるべきポイント
Google翻訳は使わない。AIに直接コピペで聞く。差はほぼ翻訳の精度じゃなく、プログラミングの文脈理解です。

豆知識
このエラーの正体は「配列じゃないものに .map() を使った」です。たとえばAPIから取ってくる前のデータ（undefined）に .map() を呼ぶと出ます。Reactで一番遭遇するエラーかもしれません。

失敗談③：Networkタブが空っぽで「壊れた」と思った日

「APIの通信を見たい」と思ってF12を開きました。Networkタブを選択。何も表示されない。

「壊れた？」と思って、F12を閉じて開き直し。それでも空。Chromeを再起動。空。PCを再起動しました。空。

ここでわかったこと
F12は「開いた後の通信しか記録しない」仕様だった。私はずっと「F12を開く前」の通信を探していました。

次にどうしたか
F12を開いたまま、F5 でページをリロード。ザーッと一覧が流れました。「これか！」と。

気をつけるべきポイント
Networkタブは先にF12を開いてからリロード。順番が逆だと記録されません。

豆知識
タブの上の方に「Preserve log」っていうチェックボックスがあります。これにチェックを入れると、ページ遷移しても通信ログが消えません。デバッグするときは入れっぱなしが便利です。

このシリーズの全体像（次回以降の予告）

このシリーズは、F12の各タブを1つずつ深掘りしていく構成です。

回	テーマ	学べること
第1回（今回）	F12全体の地図	各タブの役割を1記事で押さえる
第2回	Networkタブ深掘り	HTTPリクエスト/レスポンスを画面で全部見る
第3回	Consoleタブ深掘り	エラーの読み方・console.logの使い方
第4回	Sourcesタブ深掘り	ファイル構造・ブレークポイント・デバッグ
第5回	Elementsタブ深掘り	HTML/CSSをその場でいじる
第6回	Applicationタブ深掘り	Cookie・LocalStorage・認証情報の保存場所

全部読み終わる頃には、自分のアプリで詰まったときに、まずF12を開いて自力で原因を特定できるようになります。AIへの質問も「何が起きてるか分からない」から「Consoleにこのエラーが出てて、Networkで401返ってる」に変わります。

この差、バイブコーダー卒業の最初の1歩です。

まとめ

F12 / DevTools / 開発者ツール / 検証は全部同じもの
最初に覚えるタブは Elements / Console / Sources / Network / Application の5つだけ
動かないとき真っ先に見るのは Console（赤字をコピーしてAIへ）
Networkタブが空なら、F12を開いたままリロード
Sourcesタブの node_modules は他人の家、触らない
AIへの質問は、F12で見た具体的な情報を添えると精度が跳ね上がる

F12を開く習慣ができれば、それだけでバイブコーダーの卒業に1歩近づきます。

次回：Networkタブを開いて、HTTP通信の中身を画面で全部見ます。AIに「APIを叩いて」と言われて困ってる人は、次回で全部解決します。

このシリーズについて

新卒・文系エンジニアと、バイブコーダー（AIにコード書かせてる人）が、F12（DevTools）を1から使えるようになるための連載です。第2回以降、Networkタブ・Consoleタブ・Sourcesタブを順番に深掘りしていきます。一緒にF12と仲良くなりましょう。

※シリーズ内容は変更の可能性があります。

Written with heavy AI assistance. Reviewed and published by a human.