browser-testing-with-devtools：用真實瀏覽器證明畫面有正常運作
透過 Chrome DevTools MCP 檢查 DOM、Console、Network 與效能資料，不只依靠靜態程式碼判斷。
學完會知道
- 理解 browser-testing-with-devtools 在開發流程裡負責的工作
- 判斷什麼情況適合使用 browser-testing-with-devtools
- 完成通用 Skills CLI、Codex 或 Claude Code 安裝
開始前先準備
- 可使用支援 Agent Skills 的 coding agent
- 準備一個能實際驗證的小型開發任務
這個 Skill 在做什麼
透過 Chrome DevTools MCP 檢查 DOM、Console、Network 與效能資料，不只依靠靜態程式碼判斷。
為什麼有用
只讀程式碼看不到焦點卡住、請求失敗或版面在特定寬度跑掉。這個 Skill 讓代理直接讀取瀏覽器狀態，驗證使用者實際看到的結果。
適合什麼場景
- 互動按鈕沒有反應，但程式看不出問題。
- 需要檢查 Console 錯誤、API 回應或載入順序。
- 想量測 Core Web Vitals 或追蹤 layout shift。
和站內相近內容的差別
本地 Chrome Automation Skill 偏向操控既有 Chrome 工作階段。browser-testing-with-devtools 專門做開發驗證，重點是 DOM、錯誤、網路請求與效能證據。
如何安裝
想先查看可選清單，可以執行：
npx skills add addyosmani/agent-skills --list只安裝這一個 Skill：
npx skills add addyosmani/agent-skills --skill browser-testing-with-devtools安裝完整 24 個 Skills：
npx skills add addyosmani/agent-skills這個 Skill 的 SKILL.md 沒有引用上游根目錄的共用 references。只想使用這一個流程時，可以單獨安裝；若會串接其他開發階段，再裝整套會比較省事。
它還需要 Chrome DevTools MCP server。沒有這個工具時，代理無法取得真實瀏覽器資料。
手動安裝時，先 clone 上游 repo，再把整個 Skill 資料夾放進代理使用的 skills 目錄：
git clone https://github.com/addyosmani/agent-skills.git來源資料夾是 skills/browser-testing-with-devtools/。如果上面列出共用 references，還要保留上游的相對路徑。
Codex
Codex CLI 0.122 以上可安裝整套原生外掛：
codex plugin marketplace add addyosmani/agent-skills
codex plugin add agent-skills@agent-skills安裝後重新開啟 session。手動指定時輸入 @browser-testing-with-devtools；也可以直接描述任務，讓 Codex 依 Skill 的 description 自動選用。
Claude Code
Claude Code 可從 marketplace 安裝：
/plugin marketplace add addyosmani/agent-skills
/plugin install agent-skills@addy-agent-skills此外掛也提供 /spec、/plan、/build、/test、/review、/code-simplify 與 /ship 等流程指令。這些指令會編排對應 Skills，不代表每個指令都只使用本頁這一個 Skill。
自動啟用還是手動指定
自動優先。瀏覽器功能修改後就應自動做基本檢查。要收集特定 trace 或重現複雜操作時，再手動指定步驟與目標頁面。
在 Codex 手動呼叫的寫法：
@browser-testing-with-devtools
請依這個 Skill 的原始流程處理目前任務，完成後列出驗證證據。