mirror of
https://github.com/SuperClaude-Org/SuperClaude_Framework.git
synced 2025-12-29 16:16:08 +00:00
32 lines
1.6 KiB
Markdown
32 lines
1.6 KiB
Markdown
|
# Chrome DevTools MCP Server
|
||
|
|
|
||
|
|
**Purpose**: Performance analysis, debugging, and real-time browser inspection
|
||
|
|
|
||
|
|
## Triggers
|
||
|
|
- Performance auditing and analysis requests
|
||
|
|
- Debugging of layout issues (e.g., CLS)
|
||
|
|
- Investigation of slow loading times (e.g., LCP)
|
||
|
|
- Analysis of console errors and network requests
|
||
|
|
- Real-time inspection of the DOM and CSS
|
||
|
|
|
||
|
|
## Choose When
|
||
|
|
- **For deep performance analysis**: When you need to understand performance bottlenecks.
|
||
|
|
- **For live debugging**: To inspect the runtime state of a web page and debug live issues.
|
||
|
|
- **For network analysis**: To inspect network requests and identify issues like CORS errors.
|
||
|
|
- **Not for E2E testing**: Use Playwright for end-to-end testing scenarios.
|
||
|
|
- **Not for static analysis**: Use native Claude for code review and logic validation.
|
||
|
|
|
||
|
|
## Works Best With
|
||
|
|
- **Sequential**: Sequential plans a performance improvement strategy → Chrome DevTools analyzes and verifies the improvements.
|
||
|
|
- **Playwright**: Playwright automates a user flow → Chrome DevTools analyzes the performance of that flow.
|
||
|
|
|
||
|
|
## Examples
|
||
|
|
```
|
||
|
|
"analyze the performance of this page" → Chrome DevTools (performance analysis)
|
||
|
|
"why is this page loading slowly?" → Chrome DevTools (performance analysis)
|
||
|
|
"debug the layout shift on this element" → Chrome DevTools (live debugging)
|
||
|
|
"check for console errors on the homepage" → Chrome DevTools (live debugging)
|
||
|
|
"what network requests are failing?" → Chrome DevTools (network analysis)
|
||
|
|
"test the login flow" → Playwright (browser automation)
|
||
|
|
"review this function's logic" → Native Claude (static analysis)
|
||
|
|
```
|