では、実務レベルでの API 連携＋エラー処理のデバッグ手順を、ブラウザ開発ツールを使った具体例とともにまとめます。
非同期処理＋Promise＋fetch＋try…catch を組み合わせた典型的なパターンです。
1. サンプルコード（実務風 API 連携）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>API連携デバッグ実践</title>
</head>
<body>
<h1>API連携デバッグ実践</h1>
<button id="runBtn">API取得開始</button>
<script>
// ---------------------------
// 1. 非同期 fetch API 呼び出し関数
// ---------------------------
async function getUserData(userId) {
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log("getUserData success:", data); // ← ブレークポイント
return data;
} catch (err) {
console.error("getUserData error:", err); // ← ブレークポイント
throw err; // 上位で再度キャッチ可能
}
}
// ---------------------------
// 2. 複数 API を順番に呼ぶ処理
// ---------------------------
async function mainTask() {
console.log("mainTask start");
try {
const user = await getUserData(1);
// 2つ目の API を呼び出す（存在しない URL でエラー想定）
const postsResponse = await fetch(`https://jsonplaceholder.typicode.com/invalid_endpoint`);
if (!postsResponse.ok) throw new Error(`HTTP error! status: ${postsResponse.status}`);
const posts = await postsResponse.json();
console.log("Posts data:", posts); // ← ブレークポイント
} catch (err) {
console.error("mainTask catch:", err); // ← ブレークポイント
}
console.log("mainTask end");
}
// ---------------------------
// ボタンイベント
// ---------------------------
document.getElementById("runBtn").addEventListener("click", mainTask);
</script>
</body>
</html>
2. 実務的デバッグ手順まとめ
① ブレークポイントの設置
- Sources タブで下記にブレークポイントを置く：
console.log("getUserData success:", data);console.error("getUserData error:", err);console.log("Posts data:", posts);console.error("mainTask catch:", err);
- 目的：成功／失敗どちらも値を確認して原因を特定できる
② Pause on exceptions の活用
- Sources タブ右上の「⏸」アイコンをオン
- これで catch される例外も含めて自動停止
- 非同期処理のどの箇所でエラーが発生しているか一目で確認可能
③ Scope / Watch で変数追跡
- Watch に
user/posts/errを追加 - ブレーク時にリアルタイムで中身を確認
- async 関数のネストでも Scope タブで呼び出し元を追跡可能
④ Call Stack で処理の流れを理解
- 非同期処理でも Promise や async 関数が呼ばれた順序が表示される
- エラー発生箇所や、どの API 呼び出しで止まったかを正確に把握できる
⑤ ステップ実行で原因追跡
- Step over：現在の行を実行して次へ
- Step into：関数の中に入り詳細確認
- Step out：関数の外に戻る
- 非同期関数に対しても
Step into async callを使うと、await 以降の処理を追える
⑥ エラーの再現と確認
- 存在しない URL やネットワーク切断などを意図的に作る
- 「Pause on exceptions」でどの行でエラーが発生しているか確認
- Scope / Watch / Call Stack を使って変数や処理の流れを理解
⑦ Promise.all / 並列処理の場合
- 並列 API 呼び出しで Promise.all を使う場合も、ブレークポイントを then / await 後に置く
- エラーがどの Promise で発生したかを Scope や Call Stack で確認
⑧ 実務的Tips
- console.log() は簡易チェック用、Scope / Watch が本格デバッグ
- ブレークポイントは catch だけでなく成功処理にも置く
- 非同期チェーンの途中でエラーが起きると、上位 try…catch でまとめて確認できる
💡 まとめると：
- ブレークポイントで成功/失敗の両方を確認
- Pause on exceptionsで例外を見逃さない
- Scope / Watch / Call Stackで変数・呼び出し順を追う
- Step over / Step intoで処理を1行ずつ追う
- 意図的なエラーで原因を理解・再現
これで 実務レベルの API 連携＋非同期エラーのデバッグ が体系的に練習できます。