Network Inspection

Network Inspection Skill

Systematic approach to analyzing network requests using Chrome DevTools MCP.

HTTP Status Code Reference

Success (2xx)

Redirect (3xx)

Client Error (4xx)

Server Error (5xx)

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:

1. 5xx errors - Server issues (highest priority)
2. 4xx errors - Client issues (request problems)
3. Slow requests - Performance issues
4. 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

Response Headers to Check

Common API Issues

Authentication Problems

Data Issues

CORS Issues

Performance Analysis

Timing Breakdown

Slow Request Causes

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

Recommendations

1. [prioritized action 1]
2. [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

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/jpoutrin) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->