Web 開発者の必携ツール、ブラウザの DevTools を使いこなそう。
HTML/CSS の確認、JavaScript デバッグ、ネットワーク監視まで解説します。
開発者ツール（DevTools） は、Chrome・Edge・Firefox などのブラウザに標準搭載されているデバッグ・調査ツールです。Web サイトの HTML/CSS 構造の確認、JavaScript のエラー調査、通信の監視などができます。
Firefox でも同様の機能が使えますが、UI が若干異なります。Chrome または Edge で試してみましょう。
開発者ツールを開く方法は 3 つあります。どれを使っても同じツールが開きます。
F12 キーを押すだけです。
または Ctrl + Shift + I（Mac は ⌘ + Option + I）でも開けます。
特定の要素（ボタン、テキスト、画像など）を調べたいときは「検証」から開くのが一番効率的です。目的の HTML がすぐ見つかります。
Chrome の場合：右上の「⋮」→「その他のツール」→「デベロッパー ツール」
Ctrl + Shift + J（Mac: ⌘ + Option + J）で Console タブを直接開けます。
Elements タブでは、ページの HTML 構造と各要素に適用されている CSS スタイルをリアルタイムで確認・編集できます。
Styles ペインで値をクリックすると直接編集できます。変更はページリロードまで有効です。
color: red → 値をクリックして書き換えるElements タブでの編集はページをリロードすると消えます。実際のコードには反映されません。「デザインを試す場所」として活用しましょう。
Styles ペインを下にスクロールすると Box Model が表示され、margin・padding・border・サイズを視覚的に確認できます。
Console タブは JavaScript の実行環境です。エラーメッセージの確認と、JavaScript コードの動作テストに使います。
ページで JavaScript エラーが発生すると赤いメッセージが表示されます。
Uncaught TypeError: Cannot read properties of null (reading 'textContent')
at main.js:15:30TypeError、ReferenceError などmain.js:15:30 → ファイル名：行：列コードの途中に console.log() を書くことで変数の値を Console に出力して確認できます。
// 変数の値を確認
const user = { name: "太郎", age: 20 };
console.log(user);
// Console: {name: "太郎", age: 20}
// 条件分岐のどちらを通っているか確認
if (isLoggedIn) {
console.log("ログイン済み");
} else {
console.log("未ログイン");
}Console の入力欄に JavaScript を直接打ち込んで実行できます。
// DOM を操作する例
document.title
"コードクエスト"
// 要素の背景色を変える
document.body.style.background = "lightblue"| メソッド | 説明 |
|---|---|
console.log() | 値を出力する（最もよく使う） |
console.warn() | 黄色の警告メッセージを出力 |
console.error() | 赤いエラーメッセージを出力 |
console.table() | 配列・オブジェクトを表形式で表示 |
console.clear() | Console の出力をクリア |
Network タブでは、ページを開いたときにブラウザが行うすべての通信（HTML・CSS・JS・画像・API など）を確認できます。
fetch や axios などで API を叩いているとき、実際に返ってきたデータを確認できます。
fetch または xhr タイプのリクエストをクリックします。一覧上部のボタンで「Fetch/XHR」「JS」「CSS」「Img」などのタイプに絞り込めます。API 通信だけ見たいときは「Fetch/XHR」を選択しましょう。
開発者ツールは HTML/CSS・JavaScript の学習と並行して使うことで本当に役に立ちます。コードクエストの関連コースで実力を伸ばしましょう。
DevTools はすべての Web 開発者が毎日使う必須ツールです。
実際に好きなサイトを開いて、要素を「検証」してみましょう！