chrome-devtools-mcp
Core Concepts
Browser lifecycle: Browser starts automatically on first tool call using a persistent Chrome profile. Configure via CLI args in the MCP server configuration: npx chrome-devtools-mcp@latest --help.
Page selection: Tools operate on the currently selected page. Use list_pages to see available pages, then select_page to switch context.
Element interaction: Use take_snapshot to get page structure with element uids. Each element has a unique uid for interaction. If an element isn't found, take a fresh snapshot - the element may have been removed or the page changed.
Workflow Patterns
Before interacting with a page
- Navigate:
navigate_pageornew_page - Wait:
wait_forto ensure content is loaded if you know what you look for. - Snapshot:
take_snapshotto understand page structure - Interact: Use element
uids from snapshot forclick,fill, etc.
Efficient data retrieval
More from gsmlg-dev/code-agent
flutter-animating-apps
Implements animated effects, transitions, and motion in a Flutter app. Use when adding visual feedback, shared element transitions, or physics-based animations.
20flutter-building-layouts
Builds Flutter layouts using the constraint system and layout widgets. Use when creating or refining the UI structure of a Flutter application.
20flutter-managing-state
Manages application and ephemeral state in a Flutter app. Use when sharing data between widgets or handling complex UI state transitions.
20elixir-architect
Use when designing or architecting Elixir/Phoenix applications, creating comprehensive project documentation, planning OTP supervision trees, defining domain models with Ash Framework, structuring multi-app projects with path-based dependencies, or preparing handoff documentation for Director/Implementor AI collaboration
19flutter-working-with-databases
Manages local data persistence using SQLite or other database solutions. Use when a Flutter app needs to store, query, or synchronize large amounts of structured data on the device.
19flutter-architecting-apps
Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.
19