Monitor and inspect HTTP network requests made by a web page via Playwright MCP

Recipe: Monitor & inspect HTTP network requests via Playwright MCP

Surface: @playwright/mcp (npx @playwright/mcp) Transport: stdio Auth: none

How it works

The Playwright MCP server automatically records every HTTP request the browser makes. Three tools form the network monitoring pipeline:

1. `browser_navigate` — load the target page (requests start recording)
2. `browser_evaluate` — optionally trigger fetch() calls to generate API traffic
3. `browser_network_requests` — list all requests with URL, method, and status (filter by URL regex, toggle static resources)
4. `browser_network_request` — drill into any request by index for full headers, timing, response body

Step-by-step trace

Step 1: Navigate to the target page

→ browser_navigate({ url: "https://jsonplaceholder.typicode.com" })
← Page loaded: "JSONPlaceholder - Free Fake REST API"

Step 2: Trigger API calls via JavaScript evaluation

→ browser_evaluate({ function: "async () => { ... fetch('/posts?_limit=2'), fetch('/users/1'), fetch('/posts/1/comments?_limit=2') ... }" })
← { posts_count: 2, user_name: "Leanne Graham", comments_count: 2 }

Step 3: List network requests (filtered to API calls)

→ browser_network_requests({ static: false, filter: "/api|/posts|/users|/comments" })
← 21. [GET] https://jsonplaceholder.typicode.com/posts?_limit=2 => [200]
   22. [GET] https://jsonplaceholder.typicode.com/users/1 => [200]
   23. [GET] https://jsonplaceholder.typicode.com/posts/1/comments?_limit=2 => [200]
   Note: 17 static requests not shown

Step 4: Inspect a specific request's full details

→ browser_network_request({ index: 22 })
← #22 [GET] https://jsonplaceholder.typicode.com/users/1
   status: [200], duration: 80ms, type: fetch, mimeType: application/json
   Request headers: sec-ch-ua-platform: "macOS", user-agent: Mozilla/5.0 ...
   Response headers: cf-cache-status: HIT, content-type: application/json; charset=utf-8,
     x-ratelimit-remaining: 999, x-ratelimit-limit: 1000, server: cloudflare, ...

Step 5: Read the response body

→ browser_network_request({ index: 22, part: "response-body" })
← { "id": 1, "name": "Leanne Graham", "username": "Bret", "email": "[email protected]",
     "address": { "street": "Kulas Light", "city": "Gwenborough", ... },
     "company": { "name": "Romaguera-Crona", ... } }

Key parameters

Use cases

• API reverse-engineering: discover undocumented endpoints a SPA calls
• Debugging: verify an API returns expected data/headers
• Security auditing: check for leaked tokens in request headers
• Performance: measure request durations and identify slow calls
• Testing: verify a frontend correctly calls backend endpoints after user actions