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
majiayu000