Here's what I found on the page.
Console errors
missing-logo.pngfailed to load (ERR_FILE_NOT_FOUND). The "Brew & Co logo" image is broken.fetchofapi/plans.jsonwas blocked by CORS, because the page is opened fromfile://and the origin isnull. The page logged "Failed to load plans: Failed to fetch". That failure is most likely a side effect of opening the page fromfile://, so serving it overhttp://should clear it.- One DevTools issue: an input has no
autocompleteattribute. - There was also a plain
page loadedlog.
Network requests (3 total)
index.htmlreturned 200.missing-logo.pngfailed withERR_FILE_NOT_FOUND.api/plans.jsonfailed withERR_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
- Zuerst Snapshot: Ein Text-Snapshot liefert Element-UIDs, dann wird per UID geklickt oder ausgefüllt, und nach Seitenänderungen erneut ein Snapshot gemacht.
- Fehlersuche: Konsolenfehler und fehlgeschlagene Netzwerkanfragen prüfen, dann per Skript bestimmte Werte auslesen.
- 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.
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`.