Control and inspect a live Chrome browser using DevTools for automation, debugging, and performance analysis via MCP
Control and inspect a live Chrome browser using the full power of Chrome DevTools. This skill enables AI agents to automate browser interactions, debug web applications, analyze performance, and inspect network traffic through a Model Context Protocol (MCP) server.
Provides comprehensive browser automation and debugging capabilities including:
1. **Verify the chrome-devtools-mcp server is installed** in your MCP client configuration:
```json
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
```
2. **Check available tools** by listing MCP tools from the chrome-devtools server
3. **Start with simple navigation** to verify the browser launches correctly
#### Performance Analysis
1. Use `performance_start_trace` to begin recording
2. Use `navigate_page` to load the target URL
3. Use `performance_stop_trace` to end recording
4. Use `performance_analyze_insight` to extract performance metrics and recommendations
#### Web Automation
1. Use `navigate_page` to load the target page
2. Use `wait_for` to ensure elements are loaded
3. Use `click`, `fill`, or `fill_form` to interact with elements
4. Use `take_screenshot` to capture results
#### Debugging
1. Use `navigate_page` to load the page
2. Use `list_console_messages` to check for errors or warnings
3. Use `list_network_requests` to analyze network activity
4. Use `evaluate_script` to run diagnostic code
5. Use `take_snapshot` for full DOM inspection
#### Multi-Page Testing
1. Use `new_page` to open additional tabs
2. Use `list_pages` to see all open pages
3. Use `select_page` to switch between tabs
4. Use `close_page` when done with a tab
**Input Automation** (8 tools)
**Navigation** (6 tools)
**Performance** (3 tools)
**Network** (2 tools)
**Debugging** (5 tools)
**Emulation** (2 tools)
1. **Always wait for page load** - Use `wait_for` after navigation to ensure content is ready
2. **Use specific selectors** - Prefer unique CSS selectors or ARIA labels for reliability
3. **Handle dialogs** - Set up `handle_dialog` before triggering actions that may show alerts
4. **Check console errors** - Use `list_console_messages` to catch JavaScript errors
5. **Analyze network first** - Use `list_network_requests` to understand page behavior before automation
6. **Take screenshots for verification** - Capture screenshots after key actions to confirm success
7. **Clean up tabs** - Close pages when done to free resources
**Example: Performance audit**
```
1. Start performance trace
2. Navigate to target URL
3. Wait for page load
4. Stop performance trace
5. Analyze insights for metrics and recommendations
```
**Example: Form submission test**
```
1. Navigate to form page
2. Fill form fields using fill_form
3. Click submit button
4. Wait for navigation or success message
5. Take screenshot of result
```
**Example: Network debugging**
```
1. Navigate to page with issues
2. List network requests
3. Filter for failed requests (status 4xx/5xx)
4. Get detailed request info for failures
5. Check console messages for related errors
```
Advanced configurations available:
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/chrome-devtools-browser-automation/raw