ここでは ブラウザで実際に試せる HTML + JS のサンプル を作り、fetch を使った非同期処理の 例外処理 と ステップ実行でデバッグ を一緒に体験できる形で紹介します。
1. 実演コード：fetch + try/catch + ステップ実行
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Fetch デバッグ実演</title>
</head>
<body>
<h1>Fetch + 例外 + ステップ実行</h1>
<button id="loadBtn">データを取得</button>
<pre id="output"></pre>
<script>
const output = document.getElementById("output");
async function loadData() {
try {
// ここにブレークポイントを置く
output.textContent = "データ取得開始…";
// わざと存在しないURLにアクセス（例外発生用）
const response = await fetch("https://invalid.example.com/data.json");
// ここもブレークポイント可
if (!response.ok) {
throw new Error("HTTPステータスエラー: " + response.status);
}
// JSONパース（失敗すると例外）
const data = await response.json();
output.textContent = JSON.stringify(data, null, 2);
} catch (err) {
// ここにブレークポイントを置くと例外を確認できる
console.error("例外発生:", err);
output.textContent = "エラー発生: " + err.message;
} finally {
console.log("処理終了（成功/失敗に関わらず実行）");
}
}
document.getElementById("loadBtn").addEventListener("click", loadData);
</script>
</body>
</html>
2. デバッグの手順（ステップ実行）
- Chrome または Edge でこの HTML を開く
- F12 → Sources タブ
- 左ペインでこのファイルを選ぶ
- JS 内の以下の行にブレークポイントを置く：
output.textContent = "データ取得開始…";const data = await response.json();console.error("例外発生:", err);
- ページ上の 「データを取得」ボタン をクリック
- 実行がブレークポイントで停止 → DevTools 上でステップ実行可能
- ステップオーバー（1行ずつ進める）
- ステップイン（関数呼び出し内部に入る）
- Scope / Watch で変数の値を確認
3. デバッグ時に確認したいポイント
| チェック項目 | 方法 |
|---|---|
| fetchのレスポンス | response オブジェクトを Watch に追加 |
| HTTPエラー | !response.ok で条件分岐を確認 |
| JSONパース失敗 | await response.json() のブレークで停止 |
| 例外内容 | catch ブロックで err.message / err.stack を確認 |
| 最終処理 | finally が必ず実行されるか確認 |
4. ブラウザでの便利な操作
- Pause on exceptions をONにすると、catchに入る前に自動停止
- Console から直接変数を評価できるので、
response.statusやdataの値をその場で確認可能 - 条件付きブレークポイントで、特定のHTTPステータス時だけ停止させることも可能
5. ポイントまとめ
async/await+try/catchで非同期エラーを安全に扱える- DevTools のブレークポイントで「止めて観察」することで原因がすぐ分かる
- finally は成功/失敗に関わらず必ず実行される → ログ出力やUI更新に便利
- Watch/Scope/CallStack を組み合わせると、非同期でもエラー発生箇所を追跡できる
💡 応用アイデア
- 既存のAPIや自分のサーバーURLに置き換えて、実際のデータ取得を試す
- 条件付きブレークポイントで、特定のユーザーIDやステータスのときだけ停止
- fetch→JSON→UI表示の流れをステップ実行して、非同期の理解を深める