では、より実務に近い複雑な非同期デバッグシナリオ用サンプルを作ります。
このサンプルでは：
- fetch → setTimeout → fetch → Promise.all → async 関数ネスト
- ブレークポイントを使ったステップ実行
- Call Stack の確認
- Watch を使った変数追跡
を同時に練習できる構成になっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>複雑非同期デバッグシナリオ</title>
</head>
<body>
<h1>複雑非同期デバッグシナリオ</h1>
<button id="runBtn">処理実行</button>
<script>
// ---------------------------
// 1. 遅延処理用 Promise
// ---------------------------
function delay(ms, value) {
return new Promise(resolve => {
setTimeout(() => {
console.log("delay resolved:", value); // ← ブレークポイント
resolve(value);
}, ms);
});
}
// ---------------------------
// 2. fetch 関数
// ---------------------------
async function fetchTodo(id) {
const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`);
const data = await res.json();
console.log(`Fetched Todo ${id}:`, data.title); // ← ブレークポイント
return data.title;
}
// ---------------------------
// 3. ネストされた非同期処理
// ---------------------------
async function nestedAsyncTask() {
console.log("nestedAsyncTask: start");
// ① fetch → setTimeout → fetch
const title1 = await fetchTodo(1);
const delayed = await delay(1500, "Step1 delayed");
const title2 = await fetchTodo(2);
console.log("After first sequence:", { title1, delayed, title2 }); // ← ブレークポイント
// ② Promise.all で並列 fetch
const titles = await Promise.all([fetchTodo(3), fetchTodo(4)]);
console.log("All parallel fetched titles:", titles); // ← ブレークポイント
// ③ async function ネスト
async function innerTask() {
const innerDelayed = await delay(1000, "Inner task delayed");
console.log("Inner task done:", innerDelayed); // ← ブレークポイント
}
await innerTask();
console.log("nestedAsyncTask: end");
}
// ---------------------------
// ボタンにイベント設定
// ---------------------------
document.getElementById("runBtn").addEventListener("click", nestedAsyncTask);
</script>
</body>
</html>
練習手順
- ファイルを
complex_async_debug.htmlとして保存 - ブラウザで開き、F12 → Sources タブを開く
- 下記の行にブレークポイントを置く：
console.log("delay resolved:", value);console.log(Fetched Todo ${id}:, data.title);console.log("After first sequence:", { title1, delayed, title2 });console.log("All parallel fetched titles:", titles);console.log("Inner task done:", innerDelayed);
- 「処理実行」ボタンをクリック
- ブレークポイントで停止 → Scope / Watch / Call Stack を確認
- Step over / Step into で処理の流れを追う
練習ポイント
- Watch に
title1/delayed/title2/titles/innerDelayedを追加 - Call Stack を見ながら、ネスト関数の呼び出し順を理解
Promise.all内の fetch が並列で動くことを確認delayで非同期遅延処理を理解
💡 このサンプルは 実務レベルの非同期処理デバッグ練習 に最適です。
- ブレークポイントをどこに置くか
- Call Stack を追って非同期の流れを把握する
- Watch で変数を追跡する
まで一通り体験できます。