Chrome DevTools

Steuere und inspiziere einen live laufenden Chrome-Browser aus deinem Coding-Agenten heraus. Performance-Traces aufzeichnen, Netzwerkanfragen analysieren...

Steuere und inspiziere einen live laufenden Chrome-Browser direkt aus deinem Coding-Agenten heraus. Chrome DevTools MCP stellt 29 Tools bereit, die Browser-Automatisierung, Performance-Profiling, Netzwerkanalyse und Debugging abdecken – und gibt Claude über Puppeteer und das Chrome DevTools Protocol vollständige DevTools-Fähigkeiten.

Automatisiere Browser-Interaktionen mit Tools zum Klicken, Tippen, Ausfüllen von Formularen, Hochladen von Dateien, Seitennavigation und Umgang mit Dialogen. Emuliere Mobilgeräte und benutzerdefinierte Viewports, um Responsive Designs zu testen. Zeichne Performance-Traces und Speicher-Snapshots auf, um Engpässe zu diagnostizieren, führe Lighthouse-Audits durch und erhalte verwertbare Performance-Erkenntnisse einschließlich CrUX-Felddaten.

Netzwerkanfragen inspizieren, Konsolenmeldungen mit source-gemappten Stack-Traces lesen, Screenshots aufnehmen, DOM-Snapshots erstellen und JavaScript im Seitenkontext ausführen. Ein Slim-Modus steht für einfachere Browser-Aufgaben zur Verfügung.

So verwendest du es: Bitte Claude, mit deiner laufenden Anwendung in Chrome zu interagieren. Beispiel-Prompts: „Öffne meine App unter localhost:3000 und klicke auf den Login-Button", „Zeichne einen Performance-Trace auf, während ich die Seite scrolle, und sag mir, was langsam ist", „Mach einen Screenshot der Startseite auf einem mobilen Viewport", „Prüfe die Konsole auf Fehler nach dem Absenden des Formulars", „Führe ein Lighthouse-Audit auf dieser Seite durch und fasse die Ergebnisse zusammen", „Liste alle Netzwerkanfragen auf, die beim Laden des Dashboards gemacht werden".

Weitere Plugins

Frontend Design

Frontend design skill for UI/UX implementation

Superpowers

Core skills library for Claude Code: TDD, debugging, collaboration patterns, and proven techniques

Code Review

Automated code review for pull requests using multiple specialized agents with confidence-based scoring

Context7

Upstash Context7 MCP server for up-to-date documentation lookup. Connects to Context7's hosted remote MCP server (https://mcp.context7.com/mcp) — no local Node.js or npx required — to pull version-specific documentation and code examples directly from source repositories into your LLM context. Authenticate with Context7 when prompted.

Code Simplifier

Agent that simplifies and refines code for clarity, consistency, and maintainability while preserving functionality

Playwright

Browser automation and end-to-end testing MCP server by Microsoft. Enables Claude to interact with web pages, take screenshots, fill forms, click elements, and perform automated browser testing workflows.