Zum Hauptinhalt springen

Chrome DevTools MCP

Plugin Aktiv

Zuverlässige Automatisierung, eingehende Fehlerbehebung und Leistungsanalyse in Chrome unter Verwendung von Chrome DevTools und Puppeteer

6 Skills 0 MCPs
Zweck

Um KI-Codierungsassistenten mit zuverlässiger Steuerung und tiefgreifenden Inspektionsfähigkeiten eines Live-Chrome-Browsers für Automatisierung, Debugging und Leistungsanalyse auszustatten.

Funktionen

  • Automatisieren von Browseraktionen mit Puppeteer
  • Debuggen von Webseiten mit Chrome DevTools
  • Analysieren von Netzwerkanfragen und Leistungs-Traces
  • Verwalten von Chrome-Erweiterungen
  • Erstellen von Screenshots und Seitenschnappschüssen

Anwendungsfälle

  • Automatisierung repetitiver Browseraufgaben für Tests oder Datenerfassung
  • Debugging komplexer Frontend-Probleme durch Inspektion von Netzwerk, Konsole und DOM
  • Analyse und Optimierung der Seitenladeleistung (LCP, TTFB)
  • Skripting von Browserinteraktionen für KI-gesteuerte Workflows

Nicht-Ziele

  • Direkte Steuerung von Nicht-Chromium-Browsern
  • Ersetzen manueller Browserinspektion für alle Anwendungsfälle
  • Bereitstellung von Werkzeugen für das Debugging von mobilen Browsern (sofern nicht ausdrücklich erwähnt)

Compliance

  • warning:Telemetrie-Opt-inNutzungsstatistiken sind standardmäßig aktiviert, und obwohl ein Opt-out über ein Flag möglich ist, werden die gesammelten Felder nicht explizit dokumentiert oder mit einem Schema veröffentlicht.

Installation

Zuerst Marketplace hinzufügen

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Enthält 6 Erweiterungen

Skill (6)

A11y Debugging Skill

Nutzt Chrome DevTools MCP für Barrierefreiheits- (a11y) Debugging und Auditing basierend auf web.dev-Richtlinien. Verwenden Sie dies beim Testen von semantischem HTML, ARIA-Labels, Fokusstatus, Tastaturnavigation, Tap-Targets und Farbkontrast.

96
Chrome Devtools Skill

Verwendet Chrome DevTools über MCP für effizientes Debugging, Fehlerbehebung und Browser-Automatisierung. Verwenden Sie dies beim Debuggen von Webseiten, Automatisieren von Browserinteraktionen, Analysieren der Leistung oder Überprüfen von Netzwerkanfragen. Diese Fähigkeit gilt nicht für den `--slim`-Modus (MCP-Konfiguration).

97
Chrome Devtools Cli Skill

Verwenden Sie diese Fähigkeit, um Shell-Skripte zu schreiben oder Shell-Befehle auszuführen, um Aufgaben im Browser zu automatisieren oder Chrome DevTools über die CLI zu verwenden.

99
Debug Optimize Lcp Skill

Leitet das Debugging und die Optimierung von Largest Contentful Paint (LCP) mit Chrome DevTools MCP-Tools an. Verwenden Sie diese Fähigkeit immer dann, wenn der Benutzer nach LCP-Leistung, langsamen Seitenladezeiten, Core Web Vitals-Optimierung fragt oder verstehen möchte, warum der Hauptinhalt seiner Seite zu lange zum Erscheinen benötigt. Verwenden Sie sie auch, wenn der Benutzer "largest contentful paint", "page load speed", "CWV" erwähnt oder verbessern möchte, wie schnell sein Heldenbild oder sein Hauptinhalt gerendert wird.

97
Memory Leak Debugging Skill

Diagnostiziert und behebt Speicherlecks in JavaScript/Node.js-Anwendungen. Verwenden Sie dies, wenn ein Benutzer hohen Speicherverbrauch, OOM-Fehler meldet oder Heap-Schnappschüsse analysieren oder Tools zur Erkennung von Speicherlecks wie memlab ausführen möchte.

99
Troubleshooting Skill

Verwendet Chrome DevTools MCP und Dokumentation zur Fehlerbehebung bei Verbindungs- und Zielproblemen. Rufen Sie diese Fähigkeit auf, wenn list_pages, new_page oder navigate_page fehlschlagen oder wenn die Serverinitialisierung fehlschlägt.

100

Qualitätspunktzahl

95 /100
Analysiert 1 day ago

Vertrauenssignale

Letzter Commit1 day ago
Sterne39.5k
LizenzApache-2.0
Status
Quellcode ansehen