Network Inspection Skill

Systematic approach to analyzing network requests using Chrome DevTools MCP.

HTTP Status Code Reference

Success (2xx)

| Code | Meaning | Notes | |------|---------|-------| | 200 | OK | Standard success response | | 201 | Created | Resource successfully created | | 204 | No Content | Success, no body returned |

Redirect (3xx)

| Code | Meaning | Debugging Action | |------|---------|------------------| | 301 | Moved Permanently | Update hardcoded URLs | | 302 | Found (Temporary) | Check redirect logic | | 304 | Not Modified | Cache is working correctly |

Client Error (4xx)

| Code | Meaning | Debugging Action | |------|---------|------------------| | 400 | Bad Request | Check request payload/parameters | | 401 | Unauthorized | Check auth token/session | | 403 | Forbidden | Check permissions/roles | | 404 | Not Found | Check URL/endpoint spelling | | 405 | Method Not Allowed | Check HTTP method (GET/POST/etc) | | 409 | Conflict | Check for duplicate data | | 422 | Unprocessable Entity | Check validation errors in response | | 429 | Too Many Requests | Implement rate limiting/retry |

Server Error (5xx)

| Code | Meaning | Debugging Action | |------|---------|------------------| | 500 | Internal Server Error | Check backend logs | | 502 | Bad Gateway | Check proxy/load balancer | | 503 | Service Unavailable | Check server health | | 504 | Gateway Timeout | Check backend performance |

Network Request Analysis Workflow

1. List All Requests

Use Chrome DevTools MCP to list network requests:

Tool: mcp__chrome-devtools__list_network_requests

2. Filter by Status

Focus on failures first:

5xx errors - Server issues (highest priority)
4xx errors - Client issues (request problems)
Slow requests - Performance issues
Successful requests - Verify data is correct

3. Inspect Specific Request

Get detailed information:

Tool: mcp__chrome-devtools__get_network_request
Parameters: { "requestId": "request-id-here" }

4. Analyze Request Components

For each problematic request, examine:

URL - Is the endpoint correct?
Method - GET, POST, PUT, DELETE?
Headers - Authorization, Content-Type?
Body - Request payload format?
Response - What did server return?

Request Headers to Check

Outgoing Request Headers

| Header | Purpose | Debug Value | |--------|---------|-------------| | Authorization | Auth token | Verify token format, expiry | | Content-Type | Payload format | Match API expectation | | Accept | Response format | application/json typically | | Origin | CORS source | Check against allowed origins | | Cookie | Session data | Verify session exists |

Response Headers to Check

| Header | Purpose | Debug Value | |--------|---------|-------------| | Set-Cookie | Session management | Check cookie attributes | | X-Request-Id | Request tracking | Use for backend log correlation | | Content-Type | Response format | Verify expected format | | Cache-Control | Caching policy | Check if stale data issue | | WWW-Authenticate | Auth challenge | Details on auth failure |

Common API Issues

Authentication Problems

| Symptom | Possible Cause | Solution | |---------|----------------|----------| | 401 on all requests | Token expired | Refresh token | | 401 on some requests | Missing token header | Check auth interceptor | | 403 after login | Insufficient permissions | Check user roles | | Redirect to login | Session expired | Re-authenticate |

Data Issues

| Symptom | Possible Cause | Solution | |---------|----------------|----------| | Empty response | No data found | Check query parameters | | Partial data | Pagination | Check for next page | | Stale data | Caching | Clear cache, check headers | | Wrong data format | API version mismatch | Check API version |

CORS Issues

| Error | Cause | Solution | |-------|-------|----------| | No 'Access-Control-Allow-Origin' | Server not configured | Add CORS headers on backend | | Preflight failed | OPTIONS request blocked | Allow OPTIONS method | | Credentials not supported | withCredentials mismatch | Configure credentials mode |

Performance Analysis

Timing Breakdown

| Phase | Description | Concern Threshold | |-------|-------------|-------------------| | DNS Lookup | Domain resolution | > 100ms | | Connection | TCP handshake | > 100ms | | TLS | SSL negotiation | > 100ms | | Request | Sending data | > 500ms | | Waiting (TTFB) | Server processing | > 500ms | | Response | Receiving data | Depends on payload |

Slow Request Causes

| Phase Slow | Likely Cause | Solution | |------------|--------------|----------| | DNS | DNS server issues | Use faster DNS | | Connection | Server overloaded | Scale infrastructure | | TLS | Certificate chain | Optimize SSL config | | Waiting | Slow backend | Optimize API/database | | Response | Large payload | Paginate, compress |

Debugging Report Template

## Network Debugging Report

**URL**: [page URL]
**Date**: [timestamp]
**Total Requests**: [count]

### Summary

- Failed Requests: X (Y% failure rate)
- Slow Requests (>1s): Z
- Total Data Transferred: N MB

### Failed Requests

| Endpoint | Method | Status | Error |
|----------|--------|--------|-------|
| [URL] | [GET/POST] | [code] | [message] |

### Request Analysis

#### Request 1: [endpoint]

**Status**: [code] [status text]

**Request**:
- Method: [method]
- URL: [full URL]
- Headers:

[relevant headers]

- Body:
```json
[request body]

Response:

Status: [code]
Headers:
```
[relevant headers]
```
Body:
```
[response body or error]
```

Analysis: [what went wrong]

Suggested Fix: [recommendation]

Performance Issues

| Endpoint | TTFB | Total Time | Issue | |----------|------|------------|-------| | [URL] | [ms] | [ms] | [analysis] |

Recommendations

[prioritized action 1]
[prioritized action 2]


## Integration with Console Debugging

Network failures often cause console errors:

| Network Issue | Console Manifestation |
|---------------|----------------------|
| 401 Unauthorized | `Error: User not authenticated` |
| 404 Not Found | `Error: Resource not found` |
| 500 Server Error | `Error: Request failed` |
| Network offline | `TypeError: Failed to fetch` |
| CORS blocked | CORS error message |

Use `console-debugging` skill alongside for comprehensive debugging.

## Best Practices

1. **Check the obvious first** - Is the URL correct? Is the server running?
2. **Compare working vs broken** - What's different about failing requests?
3. **Test in isolation** - Use curl/Postman to eliminate frontend issues
4. **Check request order** - Are dependent requests happening in right order?
5. **Verify authentication flow** - Token refresh, session expiry?
6. **Look at full response** - Error details often in response body