では、非同期エラー（fetch 失敗・Promise reject）を DevTools で追跡する練習用サンプルを作ります。
このサンプルでは：
- fetch が失敗する場合を再現
- setTimeout 内で意図的にエラーを投げる
- try…catch でエラーをキャッチ
- DevTools のブレークポイントや「Pause on exceptions」で処理を追跡
まで練習できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>非同期エラー デバッグ練習</title>
</head>
<body>
<h1>非同期エラー デバッグ練習</h1>
<button id="runBtn">非同期エラー処理実行</button>
<script>
// ---------------------------
// 1. setTimeout 内でのエラー
// ---------------------------
function timeoutErrorTask() {
console.log("timeoutErrorTask: start");
setTimeout(() => {
console.log("timeoutErrorTask inside setTimeout");
// 意図的にエラーを投げる
throw new Error("Timeout内でのエラー！"); // ← ブレークポイント
}, 1500);
console.log("timeoutErrorTask: end");
}
// ---------------------------
// 2. fetch 失敗のエラー
// ---------------------------
async function fetchErrorTask() {
console.log("fetchErrorTask: start");
try {
// 存在しない URL で fetch エラーを発生
const res = await fetch("https://jsonplaceholder.typicode.com/invalid_url");
const data = await res.json();
console.log("Fetched data:", data);
} catch (err) {
console.error("fetchErrorTask catch:", err); // ← ブレークポイント
}
console.log("fetchErrorTask: end");
}
// ---------------------------
// 3. Promise reject の例
// ---------------------------
function promiseRejectTask() {
console.log("promiseRejectTask: start");
Promise.reject(new Error("意図的な Promise reject")).catch(err => {
console.error("Promise catch:", err); // ← ブレークポイント
});
console.log("promiseRejectTask: end");
}
// ---------------------------
// ボタンにイベント設定
// ---------------------------
document.getElementById("runBtn").addEventListener("click", () => {
timeoutErrorTask();
fetchErrorTask();
promiseRejectTask();
});
</script>
</body>
</html>
練習手順
- ファイルを
async_error_debug.htmlとして保存 - ブラウザで開き、F12 → Sources タブ
- 下記の行にブレークポイントを置く：
throw new Error("Timeout内でのエラー！");console.error("fetchErrorTask catch:", err);console.error("Promise catch:", err);
- 「非同期エラー処理実行」ボタンをクリック
- ブレークポイントで停止 → Scope / Watch / Call Stack を確認
- Step over / Step into でエラー発生の流れを追う
DevTools の便利機能
- Pause on exceptions
- Sources タブ右上の「⏸」アイコン
- これをオンにすると、catch される例外も含めて自動で停止
- Watch に
errを追加して、エラーオブジェクトの内容を確認 - Call Stack で「非同期のどの関数でエラーが発生したか」を追跡
💡 このサンプルで、非同期処理での エラー発生 → キャッチ → ブレークポイントで追跡 → 変数の中身確認 まで一通り練習できます。