Loading lesson path
Concept visual
Start at both ends
Async bugs are difficult because the code runs later. This chapter shows practical ways to debug fetch(), promises, async and await. Async debugging is about finding where the code stops. Then you find why it stopped.
Async code often fails after your function has already returned. This makes it feel like nothing happened.
Example async function loadData() {
let response = await fetch("missing.json");
let data = await response.json();
console.log(data);
}
loadData();
console.log("Done");Done message prints even if the fetch fails later.
Unhandled promise rejections confuse beginners. Handle errors early and clearly.
Example async function loadData() {
try {
let response = await fetch("missing.json");
let data = await response.json();
console.log(data);
} catch (error) {
console.log(error);
}
}This catches network errors and JSON parsing errors. Rule 2: Check response.ok Fetch does not reject on HTTP errors like 404. You must check response.ok.
Example async function loadData() {
try {
let response = await fetch("missing.json");
if (!response.ok) {
console.log("HTTP Error:", response.status);
return;
}
let data = await response.json();
console.log(data);
} catch (error) {
console.log("Network error");
}
}This separates HTTP errors from network errors.
Logging a promise is not the same as logging the data. Log the response and status first.
Example async function loadData() {
let response = await fetch("data.json");
console.log(response.status);
console.log(response.headers.get("content-type"));
}This tells you if the server returned what you expected.
The Network tab shows every request. This is the fastest way to debug fetch problems. Check the request URL. Check the status code. Check the response body. Check the response content type. Most fetch bugs are not JavaScript bugs. They are URL and server response bugs.
You can set breakpoints on await lines. This lets you inspect values before and after async steps.
Example async function loadData() {
let response = await fetch("data.json");
let data = await response.json();
console.log(data);
}Set a breakpoint on the first await line. Step over and inspect response.
Forgetting await is the most common beginner mistake.
Example async function loadData() {
let response = await fetch("data.json");
let data = response.json();
console.log(data);
}This logs a promise, not the JSON.
Example async function loadData() {
let response = await fetch("data.json");
let data = await response.json();
console.log(data);
}Promises can fail anywhere in the chain. Add logs between steps to find where it fails.
Example fetch("data.json").then(function(response) {
console.log("Got response");
return response.json();
}).then(function(data) {
console.log("Got data");
console.log(data);
}).catch(function(error) {
console.log("Failed");
console.log(error);
});This shows which step is failing.
Check the console for errors. Add try...catch around awaited code. Check response.ok and response.status. Use the Network tab. Use breakpoints on await lines.
The tutorial pages teach the concepts. The reference pages list details and methods.