では、複雑な非同期処理の流れをブラウザで追跡する練習用サンプルを作ります。
このサンプルでは、
- 複数の
fetchを順番に呼ぶ setTimeoutを使って非同期処理を遅延させるPromise.allで並列処理の結果をまとめる
という流れを体験できます。
ブレークポイントとウォッチを組み合わせて、非同期の呼び出し順や変数の変化を追いながらデバッグできます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>非同期デバッグ応用サンプル</title>
</head>
<body>
<h1>非同期デバッグ応用サンプル</h1>
<button id="runBtn">非同期処理実行</button>
<script>
// ---------------------------
// 1. setTimeout + 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 mainAsyncTask() {
console.log("mainAsyncTask: start");
// ① fetch を順番に実行
const title1 = await fetchTodo(1);
const title2 = await fetchTodo(2);
// ② setTimeout の遅延処理
const delayed = await delay(1000, "Delayed Value");
// ③ Promise.all で並列 fetch
const titles = await Promise.all([fetchTodo(3), fetchTodo(4)]);
console.log("All fetched titles:", titles); // ← ブレークポイント
console.log("mainAsyncTask: end");
}
// ---------------------------
// ボタンにイベント設定
// ---------------------------
document.getElementById("runBtn").addEventListener("click", mainAsyncTask);
</script>
</body>
</html>
練習手順
- このコードを
async_debug_advanced.htmlなどで保存 - ブラウザで開く → F12 → Sources タブを開く
- 下記の行にブレークポイントを置く
console.log("delay resolved:", value);console.log(Fetched Todo ${id}:, data.title);console.log("All fetched titles:", titles);
- ページ上の「非同期処理実行」ボタンをクリック
- ブレークポイントで停止 → Scope / Watch / Call Stack で変数の状態を確認
- ステップ実行で処理の順番を追う
追加の練習ポイント
- Watch に
title1/title2/delayed/titlesを追加して値を追跡 Step intoでfetchTodoやdelayの中に入り、非同期処理の呼び出し順を確認Promise.allの中の並列処理がどの順番で解決されるか観察
💡 このサンプルを繰り返し操作すると、
- 非同期処理の呼び出し順
awaitで順番待ちする挙動Promise.allで並列処理する挙動
が自然に理解できるようになります。