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 本身没有安全提示,它能操控真实浏览器。
它做什麼
給模型一份使用 chrome-devtools MCP 服務的操作手冊。工具分為四組:頁面管理(開啟、跳轉、切換、關閉頁面,等待文字出現)、輸入(點擊、填表、懸停、按鍵、拖曳、上傳檔案、處理對話框)、除錯(無障礙樹快照、截圖、主控台訊息、在頁面中執行 JavaScript、檢視網路請求)以及模擬與效能(調整視窗、限制 CPU 或網路、錄製並分析效能追蹤以查看 Core Web Vitals)。
運作方式
- 先快照:用文字快照取得元素 uid,再依 uid 點擊或填寫,頁面變化後重新快照。
- 排查問題:先看主控台錯誤與失敗的網路請求,再用腳本取特定的值。
- 效能分析:帶重新整理開始追蹤,再分析 LCP、版面位移等洞察。
適合什麼場景
除錯頁面、檢查效能,以及在你自己的開發站點上自動化瀏覽器操作。
高風險:它讓模型操控一個真實、正在運行的 Chrome。這個瀏覽器可能登入著你的各種帳號,模型可以點擊、填寫並送出表單、上傳檔案、在頁面中執行任意 JavaScript、讀取網路請求(其中可能含有權杖與個人資料),也就是說它可能以你的身分做事或洩漏資料。Skill 本身沒有任何安全提示。請使用沒有登入工作階段的獨立乾淨瀏覽器設定檔,避開正式與金融類網站,並盯著它的操作。已試用:我用 Google 的 chrome-devtools-mcp,加 `--isolated --headless` 的乾淨瀏覽器,只對一個本機頁面跑了一次,模型查主控台與網路、錄效能追蹤、填表送出,結果與我預先埋的問題一致。須知:這個 MCP 預設會向 Google 傳送使用統計、把效能追蹤中的網址送到 CrUX 介面,還會檢查更新並寫入 `~/.cache`;預設瀏覽器設定目錄是持久的,登入狀態會留下。可用 `--usageStatistics=false`、`--performanceCrux=false`、`--isolated`、`--allowedUrlPattern`、`--javascriptEvaluation=false` 收緊。