F12キーで見るWebの裏側｜開発者ツール（DevTools）完全ガイド

でじぼうです。

開発エンジニアには、切っても切り離せない開発ツール（DevTools）についてまとめました。

でじぼう

この記事は下記の方がおすすめ！

F12の開発者ツール（DevTools）とは？

Webサイトの構造や動作を確認・調査・デバッグするための機能がまとめられたツールです。

多くのブラウザ（Chrome、Edge、Firefoxなど）で、キーボードの「F12」キーを押すことで起動できます。

下記に、フロントエンドエンジニアがよく使うタブと活用例をまとめました。

タブ名	役割	活用例
Elements	HTML構造の確認・変更	・要素構造確認・クラスの確認・ボタンが押せない原因調査
Styles / Computed （Elementsタブの配下）	CSSの確認・変更	・スタイルの確認・スタイル競合や未反映の原因調査
Console	JSエラー＆ログ	・JavaScriptエラーの確認・console.log() 出力の確認・関数テスト
Device Mode （「スマホ＋タブレット」アイコン）	レスポンシブ表示切替	・スマホ表示確認・モバイル検証の必須機能

下記に、バックエンドエンジニアがよく使うタブと活用例をまとめました。

タブ名	役割	活用例
Network	通信・APIレスポンス確認（サイトがどんなデータを読み込んでいるかを見る）	・ボタンを押しても動かないとき、サーバーに正しく送れているか確認する・Web API（外部のデータ）と通信している内容をチェックしたい・どの画像やCSSが読み込まれているかを見たい
Application	Cookie・Storage・Token確認（ログイン情報や保存されたデータを見る）	・ログイン状態がうまくいかないとき、保存された「ログイン情報（Cookieやトークン）」を確認する・ページに保存されているデータ（localStorageなど）を見たいとき
Privacy and　Security	SSLや認証状態確認（サイトの安全性をチェックする）	・URLが「https」なのに鍵マークが出ないとき・セキュリティ関連のエラーが出ているときにチェックする

フロントエンド・バックエンドのどちらの立場でも使える、一歩進んだ開発者向けタブをまとめました。
デバッグ力やパフォーマンス改善の精度がグッと上がります。

タブ名	役割	活用例
Sources	ブレークポイントデバッグ	・ボタンを押しても動かないとき、変数に何が入っているか確かめたい・「ページ遷移がうまくいかない」などのバグを詳しく調べたい（SPA開発時によく使う）
Performance	表示速度やCPU負荷の分析	・ページがカクカクする、表示が遅いなどの原因を調べたい・どの操作に時間がかかっているかを見たい（例：スクロール、画像表示）
Memory	メモリ使用量の分析	・SPA（シングルページアプリケーション）で画面遷移後にメモリが解放されていない場合　・長時間使うWebアプリで、次第に動作が重くなる原因を調べたいとき
Lighthouse	SEO・パフォーマンス診断	・「スマホに対応しているか？」「表示スピードは速いか？」などをレポート形式で教えてくれる・SEOやアクセシビリティの基準を満たしているか調べたい

よくあるトラブルごとに開くべきタブとチェックポイントをまとめ、さらにフロントエンド／バックエンドの視点での活用例もあわせて紹介します。

確認したいこと	タブ	チェックポイント
ボタンを押しても何も起きない	Console / Network	JavaScriptエラーが出ていないか（Console） API通信が発生しているか（Network）
外部APIと通信しているか見たい	Network	通信のURL、送信データ、返ってきたレスポンス
ログイン状態がうまく保持されない	Application	Cookie や localStorage に正しく保存されているか
ページが重い・表示が遅い	Performance	読み込みや描画に時間がかかっていないか
スマホで表示が崩れる	Device Mode（📱アイコン）	スマホ表示でCSSが崩れていないか
通信がhttpsなのに鍵マークが出ない	Privacy and Security	SSL証明書のエラーや混在コンテンツ（http）がないか
JavaScriptの中身を途中で止めて確認したい	Sources	ブレークポイントを使って変数の中身を確認
サイトの品質・SEO・表示速度を改善したい	Lighthouse	自動で改善ポイントを診断してくれる