Start / Skills / Entwickler-Produktivität / Chrome-DevTools-Agent
Entwickler-Produktivität

Chrome-DevTools-Agent

awesome-copilot communityMITSprache des Skills: Englisch
Lizenz geprüftKeine SkripteExterner Dienst nötigHohes Risiko
DemoEchter Lauf · claude-sonnet-5-5 · Oktober 2026
I need browser debugging and performance analysis on a page using Chrome DevTools. Open file:///private/tmp/claude-501/-Users-huipeizhu-git-aibars-portal/1db8d52d-0133-4843-9915-dc2b4b4fafd0/scratchpad/t_cd/site/index.html . Check the console messages and network requests for errors, record a performance trace with a reload and report the key findings (LCP and anything notable), then fill in the form with the email "[email protected]", choose the "Monthly" plan, submit it and tell me exactly what the page shows afterwards. Only use this page; do not visit any other site.
Skill: chrome-devtools

Here's what I found on the page.

Console errors

  • missing-logo.png failed to load (ERR_FILE_NOT_FOUND). The "Brew & Co logo" image is broken.
  • fetch of api/plans.json was blocked by CORS, because the page is opened from file:// and the origin is null. The page logged "Failed to load plans: Failed to fetch". That failure is most likely a side effect of opening the page from file://, so serving it over http:// should clear it.
  • One DevTools issue: an input has no autocomplete attribute.
  • There was also a plain page loaded log.

Network requests (3 total)

  • index.html returned 200.
  • missing-logo.png failed with ERR_FILE_NOT_FOUND.
  • api/plans.json failed with ERR_FAILED, the CORS block above.

Performance trace (reload)

  • LCP was 194 ms. TTFB was 0.2 ms, and the other ~194 ms was render delay.
  • CLS was 0.00.
  • There is no CrUX field data for this page.
  • The trace surfaced only the LCPBreakdown insight, so I didn't dig into further insights. The long render delay is the one thing worth a closer look.

Form submission
I entered [email protected], selected "Monthly" and clicked Subscribe. The page then showed this text below the form:

Subscribed [email protected] to Monthly

The email appears in uppercase in that message, although I typed it in lowercase. The page may be transforming it with JavaScript or CSS, which is worth checking if that wasn't intended. The form fields kept their values ([email protected], Monthly).

I only used this local page and visited no other sites.

试用方式:我用 Google 的 chrome-devtools-mcp(关闭使用统计和 CrUX 上报,用 `--isolated --headless` 的临时干净浏览器,不碰你的日常 Chrome 和登录状态),让模型只操作我做的一个本地页面。页面里有故意放的问题:缺失的图片、一个会失败的请求、把邮箱转成大写的提交逻辑。模型找到了这些,并正确报告了表单提交后的页面文字。注意:这个 Skill 本身没有安全提示,它能操控真实浏览器。

Was es macht

Gibt dem Modell eine Anleitung für den MCP-Server chrome-devtools. Die Werkzeuge gliedern sich in vier Gruppen: Seitenverwaltung (öffnen, navigieren, wechseln, schließen, auf Text warten), Eingabe (klicken, Formulare ausfüllen, Hover, Tasten, Drag-and-drop, Dateien hochladen, Dialoge behandeln), Debugging (Snapshots des Accessibility-Baums, Screenshots, Konsolenmeldungen, JavaScript auf der Seite ausführen, Netzwerkanfragen prüfen) sowie Emulation und Performance (Größe ändern, CPU oder Netzwerk drosseln, Performance-Traces für Core Web Vitals aufzeichnen und analysieren).

So funktioniert es

  1. Zuerst Snapshot: Ein Text-Snapshot liefert Element-UIDs, dann wird per UID geklickt oder ausgefüllt, und nach Seitenänderungen erneut ein Snapshot gemacht.
  2. Fehlersuche: Konsolenfehler und fehlgeschlagene Netzwerkanfragen prüfen, dann per Skript bestimmte Werte auslesen.
  3. Profiling: Einen Trace mit Reload starten und Erkenntnisse wie LCP und Layout-Verschiebungen analysieren.

Geeignet für

Eine Seite debuggen, Performance prüfen und Browser-Schritte auf Ihren eigenen Entwicklungsseiten automatisieren.

Hinweise & Risiken

Hohes Risiko: Das Modell steuert einen echten, laufenden Chrome. Dieser kann bei Ihren Konten angemeldet sein; das Modell kann klicken, Formulare ausfüllen und absenden, Dateien hochladen, beliebiges JavaScript ausführen und Netzwerkanfragen lesen (mit Tokens und persönlichen Daten), also in Ihrem Namen handeln oder Daten preisgeben. Der Skill selbst enthält keine Sicherheitshinweise. Nutzen Sie ein separates sauberes Profil ohne Logins, meiden Sie Live- und Finanzseiten und beobachten Sie es. Getestet mit Googles chrome-devtools-mcp in einem sauberen `--isolated --headless`-Browser auf einer lokalen Seite: Konsole, Netzwerk, Trace und Formular funktionierten wie erwartet. Standardmäßig sendet das MCP Nutzungsstatistiken an Google und Trace-URLs an die CrUX-API, prüft Updates und nutzt ein dauerhaftes Profil; abschalten mit `--usageStatistics=false`, `--performanceCrux=false`, `--isolated`.