普段見てるホームページやアプリ。あれの「裏側」が、実はキー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.