@_brcode/mcp-browser-inspector
Version:
MCP server for browser inspection with Puppeteer - network monitoring and console error tracking
293 lines (250 loc) • 5.71 kB
Markdown
# Usage Examples
## Example 1: Inspect a Simple Web Page
**Command:**
```
inspect_url https://example.com
```
**Result:**
```json
{
"success": true,
"url": "https://example.com",
"title": "Example Domain",
"totalRequests": 3,
"totalResponses": 3,
"totalErrors": 0,
"timestamp": "2025-10-09T11:45:00.000Z"
}
```
## Example 2: View Network Traffic
**Command:**
```
get_network_data
```
**Result:**
```json
{
"total": 6,
"requests": [
{
"type": "request",
"url": "https://example.com/",
"method": "GET",
"headers": {
"user-agent": "Mozilla/5.0...",
"accept": "text/html,application/xhtml+xml..."
},
"postData": null,
"resourceType": "document",
"timestamp": "2025-10-09T11:45:00.100Z"
}
],
"responses": [
{
"type": "response",
"url": "https://example.com/",
"status": 200,
"statusText": "OK",
"headers": {
"content-type": "text/html; charset=UTF-8",
"content-length": "1256"
},
"body": "<!doctype html>...",
"fromCache": false,
"timestamp": "2025-10-09T11:45:00.500Z"
}
],
"requestsWithBodies": [],
"responsesWithBodies": [...]
}
```
## Example 3: Track API Requests
**Command:**
```
inspect_url https://jsonplaceholder.typicode.com/posts/1
get_network_data
```
**Network data result:**
```json
{
"responses": [
{
"type": "response",
"url": "https://jsonplaceholder.typicode.com/posts/1",
"status": 200,
"statusText": "OK",
"headers": {
"content-type": "application/json; charset=utf-8"
},
"body": "{\"userId\":1,\"id\":1,\"title\":\"sunt aut facere...\",\"body\":\"quia et suscipit...\"}",
"fromCache": false,
"timestamp": "2025-10-09T11:45:05.000Z"
}
]
}
```
## Example 4: Capture Console Errors
**Command:**
```
inspect_url https://example-with-errors.com
get_console_errors
```
**Console errors result:**
```json
{
"total": 3,
"errors": [
{
"type": "console-error",
"text": "Uncaught TypeError: Cannot read property 'foo' of undefined",
"location": {
"url": "https://example.com/app.js",
"lineNumber": 42,
"columnNumber": 15
},
"timestamp": "2025-10-09T11:45:01.000Z"
},
{
"type": "request-failed",
"url": "https://example.com/missing.js",
"method": "GET",
"failure": "net::ERR_FAILED",
"timestamp": "2025-10-09T11:45:01.200Z"
},
{
"type": "page-error",
"message": "ReferenceError: foo is not defined",
"stack": "ReferenceError: foo is not defined\n at https://example.com/app.js:42:15",
"timestamp": "2025-10-09T11:45:01.500Z"
}
],
"byType": {
"consoleErrors": 1,
"pageErrors": 1,
"requestFailed": 1
}
}
```
## Example 5: View POST Request Bodies
**Command:**
```
inspect_url https://example.com/login-page
get_network_data method: POST
```
**Network data (POST request):**
```json
{
"requests": [
{
"type": "request",
"url": "https://example.com/api/login",
"method": "POST",
"headers": {
"content-type": "application/json",
"authorization": "Bearer ..."
},
"postData": "{\"username\":\"test\",\"password\":\"***\"}",
"resourceType": "xhr",
"timestamp": "2025-10-09T11:45:03.000Z"
}
]
}
```
## Example 6: Complete Workflow
**Command:**
```
1. inspect_url https://example.com
2. get_network_data
3. get_console_errors
4. close_browser
```
**Step 1 - inspect_url:**
```json
{
"success": true,
"url": "https://example.com",
"totalRequests": 15,
"totalResponses": 15,
"totalErrors": 2
}
```
**Step 2 - get_network_data:**
All 15 request and response details...
**Step 3 - get_console_errors:**
```json
{
"total": 2,
"errors": [...]
}
```
**Step 4 - close_browser:**
```json
{
"success": true,
"message": "Browser closed and data cleared"
}
```
## Real-World Example: E-commerce Page Analysis
**Scenario:**
```
Inspect this e-commerce page and identify API endpoints:
https://shop.example.com/products
```
**Process:**
1. `inspect_url` loads the page
2. `get_network_data` filters API requests
3. API endpoints discovered:
- GET /api/products
- GET /api/cart
- POST /api/analytics
- GET /api/recommendations
**Useful Information:**
- Which APIs are being called
- Request headers (authentication tokens)
- Response bodies (product data)
- Load times (timestamp differences)
- Failed requests (404, 500, etc.)
## Example 7: Filter Network Requests
**Command:**
```
inspect_url https://example.com
get_network_data resourceType: xhr, limit: 10
```
Shows only XHR (AJAX) requests, limited to 10 results.
**Command:**
```
get_api_requests limit: 5
```
Shows only API calls (XHR/Fetch), limited to 5 results.
## Example 8: Debug JavaScript Errors
**Use Case:** Find all JavaScript errors on a page
**Command:**
```
inspect_url https://your-website.com
get_console_errors
```
**Result shows:**
- Console errors
- Page errors
- Failed network requests
- Stack traces for debugging
## Example 9: Monitor SPA (Single Page Application)
**Use Case:** Track dynamic content loading
**Command:**
```
inspect_url https://react-app.example.com
get_api_requests includeBody: true
```
Shows all API calls with request/response bodies, useful for debugging React/Vue/Angular apps.
## Example 10: Security Audit
**Use Case:** Check for exposed credentials or API keys
**Command:**
```
inspect_url https://your-app.com
get_network_data
```
Review headers and request bodies for:
- Exposed API keys
- Unencrypted passwords
- Sensitive data in URLs
- Missing security headers