AI-powered React debugging with Playwright and MCP
View the Project on GitHub Lars-Albinsson/playwright-react-debug-mcp
Tools for tracking and inspecting HTTP traffic. All requests are automatically captured when the browser is active.
View captured network requests with optional filtering. Requests are stored in a circular buffer (default: 100 entries).
Parameters:
| Name | Type | Required | Description |
|---|---|---|---|
urlPattern |
string | No | Filter by URL (substring match) |
method |
string | No | Filter by HTTP method (GET, POST, etc.) |
status |
number | No | Filter by status code |
hasError |
boolean | No | Filter to only failed requests |
limit |
number | No | Maximum entries to return |
Response:
{
"requests": [
{
"id": "req_001",
"url": "https://api.example.com/users",
"method": "GET",
"status": 200,
"statusText": "OK",
"duration": 145,
"size": 2048,
"timestamp": "2024-01-15T10:30:00.000Z"
},
{
"id": "req_002",
"url": "https://api.example.com/auth",
"method": "POST",
"status": 401,
"statusText": "Unauthorized",
"duration": 89,
"size": 128,
"timestamp": "2024-01-15T10:30:01.000Z"
}
],
"total": 2
}
Example:
Show all network requests
Show failed API requests (status >= 400)
Show all POST requests to /api/
What requests were made to the auth endpoint?
Get full details for a specific request including headers and body content.
Parameters:
| Name | Type | Required | Description |
|---|---|---|---|
requestId |
string | Yes | Request ID from get_network |
Response:
{
"request": {
"url": "https://api.example.com/users",
"method": "POST",
"headers": {
"Content-Type": "application/json",
"Authorization": "Bearer eyJ..."
},
"body": {
"email": "user@example.com",
"name": "John Doe"
}
},
"response": {
"status": 201,
"statusText": "Created",
"headers": {
"Content-Type": "application/json",
"X-Request-Id": "abc123"
},
"body": {
"id": 42,
"email": "user@example.com",
"name": "John Doe",
"createdAt": "2024-01-15T10:30:00.000Z"
}
},
"timing": {
"start": 1705315800000,
"end": 1705315800145,
"duration": 145
}
}
Example:
Get details for the failed auth request
Show me the request body that was sent to /api/users
What response did the server return for request req_002?
Clear all captured network requests. Useful for focusing on requests from a specific action.
Parameters: None
Example:
Clear network logs
Now click submit and show me only the requests from that action
Network requests are automatically captured when:
What’s captured:
| Data | Size Limit | Notes |
|---|---|---|
| URL, method, status | Always | Basic request info |
| Request headers | Always | All headers |
| Response headers | Always | All headers |
| Request body | 50KB | JSON and text only |
| Response body | 50KB | JSON and text only |
| Timing | Always | Start, end, duration |
Large bodies are truncated with a note indicating the original size.
Show all failed requests (status >= 400)
Get details for the failed request
Clear network logs
Fill and submit the form
Show the POST request that was made
What was the response?
Show requests to /api/auth
Are the correct headers being sent?
Show all network requests sorted by duration
Which requests are taking the longest?
Use URL patterns to focus on specific APIs:
Show requests to /api/users
Show requests containing "graphql"
When debugging errors, check for failed requests:
Show failed network requests
Explain the error with network context
Clear logs before a specific action to isolate requests:
Clear network logs
Click the login button
Show what requests were made