では、ブラウザ上で非同期処理のブレークポイントとウォッチを練習できるサンプルを作ります。
下記のHTMLファイルを作り、ブラウザで開くとすぐ練習できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>非同期デバッグ練習</title>
</head>
<body>
<h1>非同期デバッグ練習用サンプル</h1>
<button id="timeoutBtn">setTimeout デバッグ</button>
<button id="fetchBtn">fetch デバッグ</button>
<script>
// ---------------------------
// 1. setTimeout 練習
// ---------------------------
function timeoutTask() {
console.log("timeoutTask: start");
let count = 0;
const timer = setTimeout(() => {
count += 1;
console.log("timeoutTask inside setTimeout, count =", count);
let message = "タイマー完了！";
console.log("message:", message); // ← ここにブレークポイント
}, 2000);
console.log("timeoutTask: end");
}
// ---------------------------
// 2. fetch 練習
// ---------------------------
async function fetchTask() {
console.log("fetchTask: start");
try {
const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
const data = await response.json();
console.log("Fetched title:", data.title); // ← ここにブレークポイント
} catch (err) {
console.error("fetchTask error:", err);
}
console.log("fetchTask: end");
}
// ---------------------------
// ボタンにイベント設定
// ---------------------------
document.getElementById("timeoutBtn").addEventListener("click", timeoutTask);
document.getElementById("fetchBtn").addEventListener("click", fetchTask);
</script>
</body>
</html>
練習手順
- このコードを
async_debug.htmlなどの名前で保存 - ブラウザで開く → F12 → Sources タブを開く
- 下記の行にブレークポイントを置く
console.log("message:", message);（setTimeout 内）console.log("Fetched title:", data.title);（fetch 内）
- ページ上のボタンをクリック
- ブレークポイントで停止 → Scope / Watch / Call Stack で値を確認
- ステップ実行（Step over / Step into）を使って処理の流れを追う
追加の練習ポイント
- Watch に
countやmessage/data.titleを追加して、値の変化を確認 - Step into で fetch の
.then()や Promise の流れを追う - setTimeout のタイマーを複数作って、非同期処理の順番を確認
💡 このサンプルは 非同期処理＋ブレークポイント＋ウォッチ の基礎練習用です。
ブラウザ開発ツールに慣れるまで何度も試すと、非同期の挙動が自然に理解できるようになります。