wehub-resource-sync
1.6 KiB
1.6 KiB
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)