Chrome DevToolsの使い方｜デバッグ手順と便利機能一覧

Chrome DevTools（デベロッパーツール）とは、Chromeに標準で入っている、Webページの HTML・CSS・JavaScript・通信・保存データをその場で調べて書き換えられる開発用ツールです。 F12 キー（Mac は Command + Option + I）で開けます。

この記事では、まず「どのパネルで何ができるか」「よく使うショートカット」「Console で使える便利関数」を早見表でまとめます。そのうえで、コピペで動くバグ入りサンプルを用意し、ブレークポイント → 条件付きブレークポイント → ログポイント → Watch → Call Stack → fetch ブレークポイント → DOM 変更ブレークポイントの順に、原因を特定するまでの手順を番号付きで説明します。各手順で DevTools に表示される値は、Playwright から Chrome DevTools Protocol（CDP：DevTools が内部で使っている通信の仕組み）を呼び出して実際に取得した値を載せています。

Chrome DevToolsの早見表

パネル一覧と用途

ショートカット一覧（Windows / Mac）

Consoleユーティリティ一覧（Console でだけ使える便利関数）

これらは Console（と DevTools の評価）専用の機能で、ページの JavaScript ファイルの中では使えません。 コードに書くと ReferenceError になります。

DevToolsを開く方法と最初の設定

開き方は3通りあります。 キーボード（F12 / Command + Option + I）、ページを右クリックして「検証」、Chrome メニュー →「その他のツール」→「デベロッパー ツール」です。

最初に整えておくと便利な設定です（右上の歯車アイコン → Preferences）。

迷ったらコマンドメニュー（Ctrl + Shift + P）で機能名を入力するのが最短です。 「screenshot」「disable javascript」「coverage」などと打てば、メニューを探さずに呼び出せます。

コピペで動くバグ入りサンプルを用意する

ここからは、わざとバグを入れた「カート合計」ページでデバッグの流れを体験します。3ファイルを同じフォルダに保存し、ローカルサーバーで開いてください（fetch は file:// で開くと動かないため）。

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>カート合計デモ</title>
  <style>
    body { font-family: sans-serif; margin: 2rem; }
    .item { display: flex; gap: 1rem; }
    .sale { color: #c00; }          /* 使われないルール（Coverage確認用） */
    #total { font-weight: bold; }
  </style>
</head>
<body>
  <h1>カート合計デモ</h1>
  <ul id="list"></ul>
  <label>送料 <input id="fee" type="number" value="500"></label>
  <button id="calc">合計を計算</button>
  <p>合計: <span id="total">-</span> 円</p>
  <script src="app.js"></script>
</body>
</html>

app.js（行番号は下の手順で使います。1行目がコメントです）

// カート合計デモ（わざとバグ入り）
let cart = [];

async function loadItems() {
  const res = await fetch('items.json');
  const items = await res.json();
  console.log('items loaded:', items.length);
  return items;
}

function render(items) {
  const list = document.getElementById('list');
  list.innerHTML = '';
  for (const item of items) {
    const li = document.createElement('li');
    li.className = 'item';
    li.textContent = `${item.name} ${item.price}円 × ${item.qty}`;
    list.appendChild(li);
  }
}

function calcTotal(items) {
  let total = 0;
  for (const item of items) {
    const line = item.price * item.qty;
    total += line;
  }
  const fee = document.getElementById('fee').value; // ← 文字列のまま
  return total + fee;                                // ← バグ: 文字列連結になる
}

function onCalcClick() {
  const total = calcTotal(cart);
  document.getElementById('total').textContent = total;
  console.log('total =', total, typeof total);
}

function unusedHelper() {   // 使われない関数（Coverage確認用）
  return cart.map((i) => i.name).join(',');
}

document.getElementById('calc').addEventListener('click', onCalcClick);
loadItems().then((items) => { cart = items; render(items); });

items.json

[
  { "name": "ノート", "price": 300, "qty": 2 },
  { "name": "ボールペン", "price": 150, "qty": 4 },
  { "name": "付箋", "price": 200, "qty": 1 }
]

起動コマンド（Python 3 が入っていれば追加インストール不要です）

python3 -m http.server 7840
# ブラウザで http://localhost:7840/index.html を開く

「合計を計算」を押すと、期待値は 600 + 600 + 200 + 送料500 = 1900 円です。ところが実際の表示はこうなります（Chromium 141 で確認）。

#total = 1400500
[log] items loaded: 3
[log] total = 1400500 string

合計が「1400500」という文字列になっています。 ここから DevTools で原因を追っていきます。

ブレークポイントでバグの原因を特定する手順

手順1：通常のブレークポイントで止めて値を見る

1. DevTools を開き、Sources パネルを選びます。
2. Ctrl + P（Mac は Command + P）で app.js と入力して開きます。
3. 29行目 return total + fee; の行番号をクリックします。青いマーカーが付けばブレークポイントの設定完了です。
4. ページの「合計を計算」を押します。29行目で処理が一時停止します。
5. 右側の Scope（変数の一覧）で total と fee を確認します。行内の変数にマウスを乗せても値が表示されます。

CDP で同じ位置に止めて値を評価した結果は次のとおりです。

paused: calcTotal line 29
  total => 1400
  fee => "500"
  typeof fee => "string"
  total + fee => "1400500"
  total + Number(fee) => 1900

fee が "500"（文字列）なので、+ が足し算ではなく文字列の連結になっていた、と特定できます。<input> の value は type="number" でも常に文字列です。止まっている間は Console で total + Number(fee) のように直した式を試せるので、修正方針もその場で確かめられます。

ステップ実行の使い分けも押さえておきましょう。

手順2：条件付きブレークポイントで「特定のときだけ」止める

ループの中にブレークポイントを置くと、全件で止まって確認が大変です。条件付きブレークポイントなら、条件が true のときだけ止まります。

1. 25行目 const line = item.price * item.qty; の行番号を右クリックします。
2. 「Add conditional breakpoint（条件付きブレークポイントを追加）」を選びます。
3. 条件に item.qty > 1 と入力して Enter を押します（マーカーがオレンジ色になります）。
4. 「合計を計算」を押します。

実際に止まったのは次の2件だけでした。

conditional bp (item.qty > 1) hits: ["ノート qty=2","ボールペン qty=4"]

数量1の「付箋」では止まらないので、確認したいデータに絞り込めます。

手順3：ログポイントで「止めずに」値を出す

コードに console.log を書き足さずに、ログだけ出したいときはログポイントを使います。

1. 26行目 total += line; の行番号を右クリックし、「Add logpoint（ログポイントを追加）」を選びます。
2. 'line', item.name, line と入力して Enter を押します（マーカーがピンク色になります）。
3. 「合計を計算」を押すと、処理は止まらずに Console に出力されます。

[log] line ノート 600
[log] line ボールペン 600
[log] line 付箋 200
[log] total = 1400500 string

1件ずつの小計（600・600・200）は正しく、合計 1400 までは数値で計算できていることがわかります。原因が最後の送料の加算に絞り込めました。ログポイントはソースファイルを変更しないので、確認後に消し忘れる心配もありません。

手順4：Watchで式を見張る

1. Sources パネル右側の Watch を開き、「+」を押します。
2. typeof fee と total + Number(fee) を追加します。
3. 手順1と同じ29行目で止めると、Watch 欄に "string" と 1900 が並びます。

Watch は「止まるたびに毎回確かめたい式」を登録しておく場所です。 Console の目のアイコン（Create live expression）を使うと、止めなくても常に評価し続ける「ライブ式」も作れます。

手順5：Call Stackで呼び出し元をたどる

29行目で止まっているとき、右側の Call Stack には次のように表示されます。

call stack: calcTotal <- onCalcClick

一番上が今いる関数、下に行くほど呼び出し元です。 onCalcClick をクリックすると、呼び出し元の行と、その時点の変数に切り替わります。「この関数に変な引数を渡しているのは誰か」を調べるときに使います。

手順6：fetchブレークポイントで通信の直前に止める

「どこから API を呼んでいるのかわからない」ときは、URL で止めます。

1. Sources パネル右側の XHR/fetch Breakpoints を開き、「+」を押します。
2. items.json と入力します（URL にこの文字列を含む通信で止まります）。
3. ページを再読み込みします。

XHR {"breakpointURL":"items.json","url":"http://localhost:7840/items.json"} @ loadItems:5 <- (anonymous):43

loadItems の5行目（fetch('items.json')）で止まり、43行目から呼ばれていることがわかります。

手順7：DOM変更ブレークポイントで「誰が書き換えたか」を探す

画面の要素が知らないうちに変わるときは、要素側にブレークポイントを置きます。

1. Elements パネルで <ul id="list"> を右クリックします。
2. 「Break on」→「subtree modifications（サブツリーの変更）」を選びます。
3. ページを再読み込みします。

DOM {"insertion":true,"type":"subtree-modified"} @ render:18 <- (anonymous):43

render 関数の18行目（list.appendChild(li)）で止まります。 DOM ブレークポイントは3種類あります。

修正する（直す前と後）

// 直す前
const fee = document.getElementById('fee').value;
return total + fee;               // 1400 + "500" → "1400500"

// 直した後
const fee = document.getElementById('fee').valueAsNumber || 0;
return total + fee;               // 1400 + 500 → 1900

valueAsNumber は数値型の <input> の値を数値で返します（空欄だと NaN になるため || 0 を付けています）。Number(...) で変換してもかまいません。

ほかの止め方の一覧

ライブラリの中に入ってしまうときは、ファイルを右クリックして「Add script to ignore list」を選ぶと、ステップ実行でそのファイルを飛ばせます。

Consoleユーティリティの使い方と実行結果

サンプルページを開いた状態で、Console に入力した結果です（CDP の Runtime.evaluate に includeCommandLineAPI: true を付けて取得）。

$$('li').length = 3
$('#total').textContent = 1400500
Object.keys(getEventListeners($('#calc'))) = ["click"]
getEventListeners($('#calc')).click[0].listener.name = onCalcClick

getEventListeners で「このボタンを押すと onCalcClick が動く」とすぐわかります。 Elements パネルの「Event Listeners」タブでも同じ情報を見られます。

よく使う組み合わせです。

// 選択中の要素のクリックを監視（Elementsで要素を選んでから）
monitorEvents($0, 'click');

// 配列を表で見る → JSONでコピーしてエディタに貼る
table(cart);
copy(cart);

// calcTotal が呼ばれたら自動で停止
debug(calcTotal);

copy() は API の結果をテストデータとして保存したいときに便利です。 オブジェクトは整形された JSON 文字列としてコピーされます。

Networkパネルの便利機能

通信一覧の見方

サンプルを開いたときの通信は3件でした。

GET index.html (document)
GET app.js (script)
GET items.json (fetch)

Fetch/XHR フィルタで API 通信だけに絞り、行をクリックして Headers・Payload・Preview・Response・Timing タブを確認するのが基本の流れです。

よく使う機能の一覧

スロットリングとブロックの効果（実測）

CDP の Network.emulateNetworkConditions で、キャッシュ無効にして一覧が表示されるまでの時間を測りました。

no throttling ms: 76
Slow 3G-like (400ms RTT, 50KB/s) ms: 1987

同じ3ファイルでも、遅延 400ms の回線では約2秒かかります。 通信を直列に待っている処理（HTML → JS → fetch）ほど遅延の影響が大きくなることが体感できます。

items.json をブロックした場合は次のとおりでした。

[pageerror] Failed to fetch
li count: 0

ブロックすると fetch が失敗し、エラーを受け止める処理がないので一覧が空のままになります。 「通信失敗時にメッセージを出す」などの改善点が、サーバー側を止めなくても確認できます。

Copy as cURL / Copy as fetch の使い分け

cURL には Cookie や認証ヘッダーが含まれることがあるので、共有する前に中身を確認しましょう。

Applicationパネルで保存データを確認する

「ログイン状態がおかしい」「古い画面が出る」ときは、Application → Storage → Clear site data で一度まっさらにするのが近道です。 Service Worker を使うサイトで修正が反映されないときは、Service workers の「Update on reload」をオンにして再読み込みすると、新しいワーカーがすぐ有効になります。

Cookie の確認ポイントです。

Coverageで使われていないコードを見つける

コマンドメニュー（Ctrl + Shift + P）で「coverage」と入力し、「Show Coverage」を開いて記録ボタンを押すと、読み込んだ JS・CSS のうち実行・適用されなかった部分が赤く表示されます。

サンプルで「合計を計算」まで操作したときの結果です（Playwright の Coverage API で取得）。

JS app.js: total 1176 bytes, unused(approx) 97 bytes
JS 未実行の関数: unusedHelper
CSS inline: total 193 bytes, used 111 bytes

未使用の関数 unusedHelper と、未使用の .sale ルールが検出されています。 ただし「その操作で使われなかった」だけなので、別の画面で使うコードを消さないよう、操作を変えて何度か確認しましょう。

PlaywrightでDevToolsの値を自動で取得する

DevTools の画面で見ている値の多くは、Chrome DevTools Protocol（CDP）を通じてプログラムからも取得できます。 本記事の数値は、次のスクリプトで取得しました（Node.js 22、playwright 1.56、同梱 Chromium 141 で確認）。

npm install playwright@1.56
npx playwright install chromium   # ブラウザ未導入の場合のみ

// probe.mjs（サンプルを http://localhost:7840 で配信した状態で node probe.mjs）
import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
const logs = [];
page.on('console', (m) => logs.push(`[${m.type()}] ${m.text()}`));
let requestCount = 0;
page.on('request', () => requestCount++);

await page.coverage.startJSCoverage();
await page.goto('http://localhost:7840/index.html');
await page.waitForSelector('#list li');
await page.click('#calc');
const js = await page.coverage.stopJSCoverage();

console.log('#total =', await page.textContent('#total'));
console.log('requests =', requestCount);
logs.forEach((l) => console.log(l));
const app = js.find((e) => e.url.endsWith('app.js'));
console.log('未実行の関数:', app.functions
  .filter((f) => f.ranges[0].count === 0).map((f) => f.functionName).join(', '));

// Consoleユーティリティを CDP 経由で評価
const cdp = await page.context().newCDPSession(page);
const r = await cdp.send('Runtime.evaluate', {
  expression: "getEventListeners($('#calc')).click[0].listener.name",
  includeCommandLineAPI: true, returnByValue: true,
});
console.log('click listener =', r.result.value);

// 29行目にブレークポイントを置き、止まった時点の fee を評価
await cdp.send('Debugger.enable');
await cdp.send('Debugger.setBreakpointByUrl', { urlRegex: '.*app\\.js$', lineNumber: 28 });
const paused = new Promise((res) => cdp.once('Debugger.paused', res));
page.click('#calc');
const p = await paused;
const v = await cdp.send('Debugger.evaluateOnCallFrame', {
  callFrameId: p.callFrames[0].callFrameId, expression: 'typeof fee', returnByValue: true,
});
console.log('typeof fee =', v.result.value);
await cdp.send('Debugger.resume');
await browser.close();

実行結果です。

#total = 1400500
requests = 3
[log] items loaded: 3
[log] total = 1400500 string
未実行の関数: unusedHelper
click listener = onCalcClick
typeof fee = string

CDP の lineNumber は0始まりなので、29行目は 28 を指定します。 同じ仕組みで Network.setBlockedURLs（ブロック）、Network.emulateNetworkConditions（スロットリング）、Performance.getMetrics（DOM ノード数など）も呼び出せます。E2E テスト全般の書き方は Playwright 入門の記事で詳しく扱っています。

最新のChrome DevToolsの新機能

公式ブログ「What's new in DevTools」で確認できた範囲をまとめます（2026年10月1日時点）。

コーディングエージェント向けの「Chrome DevTools MCP サーバー」も継続的に機能が追加されています。 新機能は DevTools を開いたときの「What's new」タブにも表示されます。

よくある質問

Q. DevToolsでページを書き換えたら、元のファイルも変わりますか？ A. 変わりません。再読み込みすると元に戻ります。変更を残したいときは、Sources →「Overrides」でローカルフォルダを指定するか、「Workspace」で作業フォルダを紐付けると、編集内容をファイルに保存できます。

Q. ブレークポイントを置いたのに止まりません。 A. ①その行が実際に実行されているか（ログポイントで確認）、②「Deactivate breakpoints」（Ctrl + F8）が有効になっていないか、③ビルド後のファイルとソースマップの対応がずれていないか、を順に確認しましょう。行番号のマーカーが灰色の場合は、そのブレークポイントが無効化されています。

Q. ページ遷移するとConsoleやNetworkの記録が消えます。 A. Console の設定と Network パネル上部にある Preserve log をオンにすると、遷移後も記録が残ります。フォーム送信後のリダイレクトを調べるときに必須の設定です。

Q. 本番サイトの圧縮されたJSを読みやすくできますか？ A. Sources でファイルを開き、左下の {}（Pretty print）を押すと整形表示されます。ソースマップが公開されていれば、元のファイル名と行番号でブレークポイントを置けます。

まとめ

• Chrome DevToolsは F12（Mac は Command + Option + I）で開く、Chrome 標準の開発ツールです。
• パネルは目的で選ぶ：見た目は Elements、値の確認は Console、処理の流れは Sources、通信は Network、保存データは Application。
• デバッグは「ブレークポイント → 条件付き → ログポイント → Watch → Call Stack」の順に絞り込むと、原因に早くたどり着けます。
• fetch ブレークポイントと DOM 変更ブレークポイントで「誰が呼んだか・誰が書き換えたか」を逆にたどれます。
• Console ユーティリティ（$$・copy()・getEventListeners・debug() など）で調査の手数が減ります。
• Network のスロットリング・ブロック・Copy as cURL / fetch で、失敗時や遅い回線の動きを再現できます。
• CDP を使えば、DevTools で見ている値を Playwright から自動で取得できます。

株式会社RJCでは、Chrome DevToolsを使ったデバッグの勘所を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。