Network Analysis Advanced

Monitor, inspect, and debug network activity using Claude Code with Chrome DevTools MCP. List requests, inspect responses, debug API calls, analyze timing, check caching, and detect errors - all through natural language commands.

1. Network Request Monitoring

List and filter network requests made by the page:

Claude Code Session

# List all network requests
Claude > List all network requests made by this page

# Filter by type
Claude > Show me only the API calls (XHR/Fetch requests)
         made by this page

# Filter by status
Claude > Are there any failed network requests (4xx or 5xx
         status codes)?

# Monitor during an action
Claude > Click the "Save" button and then show me what
         network requests were made

2. Request/Response Inspection

Inspect the details of specific network requests:

Claude Code Session

# Get details of a specific request
Claude > Show me the full details of the request to /api/users.
         Include the request headers, response headers, and
         response body.

# Check request payload
Claude > What data was sent in the POST request to /api/orders?
         Show me the request body.

# Inspect response
Claude > What did the /api/products endpoint return? Show me
         the JSON response and the response headers.

3. API Debugging

Debug API interactions by inspecting requests and responses in detail:

Claude Code Session

# Debug a failing API call
Claude > The "Add to Cart" button doesn't seem to work.
         Click it and show me the network request that fires.
         What's the response status and body?

# Check authentication
Claude > Show me the Authorization header being sent with
         API requests. Is the token valid?

# Verify CORS
Claude > Are there any CORS errors in the console or failed
         preflight requests in the network tab?

4. Performance Timing

Analyze the timing of network requests to identify slow endpoints:

Claude Code Session

# Find slow requests
Claude > List all network requests sorted by response time.
         Which API calls are taking more than 1 second?

# Measure page load resources
Claude > Navigate to /dashboard and list all resources loaded.
         What's the total transfer size and how long did the
         page take to fully load?

# Check waterfall
Claude > Show me the timing breakdown for the slowest API call.
         How much time was spent in DNS, connection, waiting,
         and downloading?

5. Caching Analysis

Verify that caching is working correctly:

Claude Code Session

# Check cache headers
Claude > Show me the Cache-Control headers for all CSS and JS
         files. Are they being cached properly?

# Verify cached responses
Claude > Reload the page and check which resources are served
         from cache vs fetched from the network.

# Check service worker
Claude > Run JavaScript to check if a service worker is
         registered and what it's caching.

6. Error Detection

Systematically find and diagnose network errors:

Claude Code Session

# Find all errors
Claude > List all network requests that returned error status
         codes (4xx, 5xx). For each, show the URL and response.

# Check for mixed content
Claude > Are there any mixed content warnings? Any HTTP requests
         on this HTTPS page?

# Find broken resources
Claude > Are there any 404 errors for images, scripts, or
         stylesheets? List them all.

7. Network Throttling for Testing

Claude Code Session

# Test on slow connections
Claude > Emulate a slow 3G connection and navigate to the homepage.
         Take a screenshot after 3 seconds. Is there a loading
         indicator? How long does the page take to become usable?

# Test offline behavior
Claude > Take the page offline and try clicking the "Submit" button.
         Does the app handle the offline state gracefully?

Practice Network Analysis

Navigate to a web application, list all network requests, find any failed requests, and inspect the details of an API call. Check the caching headers and identify any performance issues.

Next: Best Practices →