TL;DR
理解 CDP 如何讓 AI 長出眼睛——截圖看版面、讀 Console 抓錯誤、監聽 Network 查 API、操作頁面做驗證。有了 CDP，你從「人肉傳話筒」變成「驗收者」，除錯對話從 5-10 輪降到 1-2 輪。
這篇文章適合：
- 用 AI 寫程式但每次都要手動截圖、貼錯誤訊息給 AI 的人
- 想讓 AI 自己看到瀏覽器畫面、自己除錯的 Vibe Coder
- 正在評估 Claude Code、Cursor 等工具，想了解 CDP 整合能力的開發者
前言
你有沒有遇過這種情況？
你跟 AI 說：「幫我做一個登入頁面。」它寫了一堆程式碼，你貼上去、跑起來——畫面一片空白。你不知道哪裡錯了，AI 也不知道，因為它根本看不到你的螢幕。
這就是 Vibe Coding 最大的痛點之一：AI 是瞎的。
它能寫程式碼，但它不知道程式碼跑起來長什麼樣子。它不知道按鈕有沒有出現、不知道 API（網站向後端伺服器要資料的管道）有沒有回傳資料、不知道 Console（開發者工具裡看錯誤訊息的地方）裡面是不是一堆紅字。
CDP（Chrome DevTools Protocol）就是讓 AI 長出眼睛的技術。
CDP 是什麼？
CDP 是 Chrome DevTools Protocol 的縮寫，是一套讓程式可以用程式碼操作瀏覽器的通訊協定。如果你用過 Chrome 的開發者工具（按 F12 會跳出來的那個面板），那你已經在用 CDP 了——只是你是透過圖形介面在用。
CDP 的核心能力：讓程式可以用程式碼去截圖、讀錯誤、監聽網路、操作頁面。
對 AI 來說，這等於：「你不用再猜畫面長什麼樣子了，我讓你直接看。」
AI 的四種「視覺能力」
接上 CDP 之後，AI 獲得了四種過去完全沒有的能力：
截圖 / 快照 → 看版面長什麼樣
Console → 看有沒有程式錯誤
Network → 看 API 有沒有失敗
互動操作 → 模擬使用者實際使用
1. 截圖 / 頁面快照 → 看版面長什麼樣
這是最直覺的能力。AI 可以對當前頁面拍一張截圖，或者取得一份頁面快照（Snapshot）——把頁面上每個元素整理成一份清單。
截圖讓 AI 看到「使用者實際看到的畫面」——排版有沒有跑掉、按鈕在不在該在的位置、文字有沒有被截斷。
頁面快照更進一步，它不只是一張圖片，而是結構化的資料。AI 可以知道：「這裡有一個按鈕，文字是『送出』，位置在左下角」。這讓 AI 能精準找到每個元素，而不是在那邊猜。
就像你請一個同事幫你看畫面，截圖是他傳一張照片給你，快照是他跟你說「左邊有一個紅色按鈕，上面寫著送出，下面有一行灰色的錯誤訊息」。
2. Console → 看有沒有程式錯誤
Console 是開發者的第一道防線。你自己在開發的時候，一定會開著 Console 看有沒有紅字。
現在 AI 也可以了。透過 CDP，AI 可以讀取瀏覽器的 Console 輸出，包括：
- 錯誤（Error）：程式碼執行時出現的例外、找不到模組、型別錯誤
- 警告（Warning）：過時的寫法提醒、潛在的問題
- 紀錄（Log）：開發者自己印出來的偵錯訊息
這意味著，當你跟 AI 說「頁面壞了」，它不再需要你複製貼上錯誤訊息。它自己就能看到 TypeError: Cannot read properties of undefined 這種錯誤，然後直接去修。
3. Network → 看 API 有沒有失敗
頁面上很多問題不是畫面的錯，是後端沒有回傳正確的資料。
透過 CDP 監聽網路請求，AI 可以看到：
- 哪些 API 被呼叫了
- 回傳的狀態是什麼（200 = 成功、404 = 找不到、500 = 伺服器錯誤）
- 回傳的資料內容長什麼樣
- 請求花了多少時間
這就像有一個全天候盯著 Network Tab 的工程師。AI 能直接判斷：「喔，/api/users 回傳 401，是登入憑證過期了」，然後幫你修身份驗證的邏輯。
4. 互動操作 → 模擬使用者實際使用
最強大的能力是：AI 可以操作瀏覽器。
- 點擊按鈕
- 在輸入框裡打字
- 選擇下拉選單的選項
- 拖拉元素
- 上傳檔案
這不只是「看」，而是「用」。AI 可以像一個真的使用者一樣去操作你的網頁，然後觀察結果。
想像一下這個場景：
- AI 寫了一個登入表單
- 它在使用者名稱欄位填入
[email protected] - 它在密碼欄位填入
password123 - 它點擊「登入」按鈕
- 它看到頁面跳轉到了 Dashboard → 確認功能正常
- 或者它看到畫面顯示「帳號密碼錯誤」→ 檢查是不是欄位檢查有問題
AI 第一次有辦法自己驗證自己寫的東西能不能用。
為什麼 Vibe Coding 需要這個？
回到最開始的場景。Vibe Coding 的核心精神是：用自然語言描述，讓 AI 生成程式碼。
但「寫出程式碼」跟「程式碼能用」之間，有一道很深的鴻溝。（如果你還在猶豫要不要開始 Vibe Coding，可以先看看 Vibe Coding 的風險與上手指南。）
沒有 CDP 的 Vibe Coding
流程大概是這樣：
- 你跟 AI 說「幫我做一個 Todo App」
- AI 生成程式碼
- 你跑起來看——不對，列表沒有顯示
- 你截圖貼給 AI：「為什麼列表沒出來？」
- AI 猜：「可能是資料沒更新，試試看改這裡？」
- 你改了再跑——還是不對
- 你打開 Console 看到有錯誤，複製貼上給 AI
- 來回好幾輪...
你是 AI 的眼睛。每一次你都要手動截圖、手動複製錯誤、手動描述問題。你變成了 AI 跟瀏覽器之間的人肉傳話筒。
有 CDP 的 Vibe Coding
流程變成：
- 你跟 AI 說「幫我做一個 Todo App」
- AI 生成程式碼
- AI 自己打開瀏覽器看一下 → 「列表沒有渲染出來」
- AI 自己看 Console → 「有 TypeError，因為 API 回傳的格式不對」
- AI 自己看 Network → 「
/api/todos回傳的資料結構跟預期不同，需要調整」 - AI 自己改好，重新整理頁面確認列表出現了
- 你只需要做最後的驗收
你從傳話筒變成了驗收者。AI 自己能完成「寫 → 看 → 除錯 → 修 → 確認」的完整循環。
差別在哪？
| 沒有 CDP | 有 CDP | |
|---|---|---|
| 除錯方式 | 你截圖、貼錯誤訊息給 AI | AI 自己看到問題 |
| 來回次數 | 5-10 輪對話 | 1-2 輪對話 |
| 你的角色 | 人肉傳話筒 | 驗收者 |
| AI 的能力 | 只能猜 | 能看、能操作、能驗證 |
哪些工具已經支援？
目前主流的 AI Coding 工具都開始整合 CDP，讓 AI 能「看到」你的瀏覽器畫面：
| 工具 | 支援能力 | 特色 |
|---|---|---|
| Claude Code | 截圖、Console、操作 | Anthropic 官方工具，指令式操作 |
| Cursor | 截圖、Console | 內建瀏覽器整合，IDE 原生支援 |
| Windsurf | 截圖、測試 | 自動化測試流程 |
我的實際工作流
我自己用 Claude Code 開發時，通常是這樣：
- 開發時：AI 可以直接在我的瀏覽器上截圖、讀 Console 錯誤訊息
- 除錯時：我跟 AI 說「頁面怎麼了」，它自己去看錯誤訊息和 API 回傳，通常一輪就能找到問題
- 驗證時：AI 改完程式碼後，自己重新整理頁面、操作一遍，確認功能正常才回報
你不需要懂底層原理，只要知道：AI 現在能看到你的瀏覽器了，不用再當人肉傳話筒。
想更深入了解 AI Coding 工具之間的差異？可以參考 Agent Skill 機制比較：Claude Code vs Cursor vs Antigravity。
局限性：CDP 不是萬能的
講了這麼多好處，也要說說限制：
- 只能看瀏覽器：CDP 只適用於網頁應用。如果你在做手機 App 或桌面應用，CDP 幫不了你
- 看到不等於理解：AI 看到了截圖，不代表它能正確理解版面問題。複雜的排版問題、微妙的視覺差異，AI 有時候還是會判斷錯誤
- 需要初始設定：要讓 AI 連上你的瀏覽器，需要一些初始設定，但通常 AI 工具會引導你完成
- 安全考量：讓 AI 操作你的瀏覽器，意味著它理論上可以看到你瀏覽器中的任何頁面，包括你登入的服務。使用時建議在開發環境中操作，避免讓 AI 存取敏感頁面
結語
CDP 對 Vibe Coding 的意義，就像眼睛對人的意義一樣。
過去的 AI Coding 工具就像一個蒙著眼睛的天才程式設計師——它很聰明、寫程式很快，但它完全依賴你告訴它「現在畫面上有什麼」。每一次的來回溝通，都在消耗你的時間和耐心。
有了 CDP，AI 終於可以自己看到結果、自己發現問題、自己驗證修復。你從一個忙碌的傳話筒，變成了一個輕鬆的驗收者。
如果你正在做 Vibe Coding，我強烈建議你試試看有 CDP 整合的工具。當 AI 能看見的時候，你會發現它比你想像的還要能幹。
