Network Debugging

What is network debugging?

Network debugging monitors requests and responses between your application and servers to identify communication problems.

Benefits of network debugging?

• See all network requests
• Check response status and data
• Identify failed requests
• Monitor performance
• Debug API issues

// Fetch data from API
fetch('/api/game/level/1')
    .then(response => {
        // Check response status
        console.log("Response status:", response.status);
        
        if (!response.ok) {
            console.error("Request failed with status:", response.status);
        }
        
        return response.json();
    })
    .then(data => {
        console.log("Data received:", data);
    })
    .catch(error => {
        console.error("Network error:", error);
    });

What does this code do?

• Uses fetch() to request data from server
• Checks response status code
• Logs errors if request fails
• Parses JSON response
• Shows data received from server
• Handles network errors with catch block

// Monitor multiple requests
async function loadGameData() {
    try {
        // Request 1: Load level data
        const levelResponse = await fetch('/api/level/1');
        console.log("Level response status:", levelResponse.status);
        const levelData = await levelResponse.json();
        
        // Request 2: Load player data
        const playerResponse = await fetch('/api/player');
        const playerData = await playerResponse.json();
        
        // Request 3: Load assets
        const assetsResponse = await fetch('/api/assets');
        const assetsData = await assetsResponse.json();
        
        console.log("All data loaded successfully");
        return { level: levelData, player: playerData, assets: assetsData };
    } catch (error) {
        console.error("Failed to load game data:", error);
    }
}

What does this code do?

• Uses async/await for cleaner request handling
• Makes three separate API requests
• Checks response status for each request
• Parses JSON from each response
• Combines all data into single object
• Catches and logs any network errors

---

layout: post title: Network Debugging description: Learn about network debugging permalink: /network_debugging author: Vihaan Budhraja —

Try It Yourself

%%js // CODE_RUNNER: network-debugging fetch(‘https://jsonplaceholder.typicode.com/users/1’) .then(response => response.json()) .then(data => console.log(“User:”, data)) .catch(error => console.error(“Network error:”, error));

console.log(“Request sent…”);