首頁 / Skills / 開發提效 / Chrome DevTools 代理
開發提效

Chrome DevTools 代理

awesome-copilot communityMITSkill 語言: 英文
授權已核對不含腳本依賴外部服務高風險
演示真實執行紀錄 · claude-sonnet-5-5 · 2026年10月
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 本身没有安全提示,它能操控真实浏览器。

它做什麼

給模型一份使用 chrome-devtools MCP 服務的操作手冊。工具分為四組:頁面管理(開啟、跳轉、切換、關閉頁面,等待文字出現)、輸入(點擊、填表、懸停、按鍵、拖曳、上傳檔案、處理對話框)、除錯(無障礙樹快照、截圖、主控台訊息、在頁面中執行 JavaScript、檢視網路請求)以及模擬與效能(調整視窗、限制 CPU 或網路、錄製並分析效能追蹤以查看 Core Web Vitals)。

運作方式

  1. 先快照:用文字快照取得元素 uid,再依 uid 點擊或填寫,頁面變化後重新快照。
  2. 排查問題:先看主控台錯誤與失敗的網路請求,再用腳本取特定的值。
  3. 效能分析:帶重新整理開始追蹤,再分析 LCP、版面位移等洞察。

適合什麼場景

除錯頁面、檢查效能,以及在你自己的開發站點上自動化瀏覽器操作。

說明與風險

高風險:它讓模型操控一個真實、正在運行的 Chrome。這個瀏覽器可能登入著你的各種帳號,模型可以點擊、填寫並送出表單、上傳檔案、在頁面中執行任意 JavaScript、讀取網路請求(其中可能含有權杖與個人資料),也就是說它可能以你的身分做事或洩漏資料。Skill 本身沒有任何安全提示。請使用沒有登入工作階段的獨立乾淨瀏覽器設定檔,避開正式與金融類網站,並盯著它的操作。已試用:我用 Google 的 chrome-devtools-mcp,加 `--isolated --headless` 的乾淨瀏覽器,只對一個本機頁面跑了一次,模型查主控台與網路、錄效能追蹤、填表送出,結果與我預先埋的問題一致。須知:這個 MCP 預設會向 Google 傳送使用統計、把效能追蹤中的網址送到 CrUX 介面,還會檢查更新並寫入 `~/.cache`;預設瀏覽器設定目錄是持久的,登入狀態會留下。可用 `--usageStatistics=false`、`--performanceCrux=false`、`--isolated`、`--allowedUrlPattern`、`--javascriptEvaluation=false` 收緊。