啟動開發伺服器並驗證頁面

開發伺服器（Dev Server）是典型的長駐程序：一旦啟動就不會結束，run_command 會在 120 秒上限處乾等著，永遠等不到它「跑完」。這正是 start_command 與 poll_command 存在的理由。

這篇範例走完整流程：背景啟動伺服器、輪詢等到就緒、開瀏覽器看頁面、發現一個 UI 問題、修掉、再驗證一次。

情境

order-service 有一個管理後台頁面。同事說「結帳按鈕好像怪怪的」。你在專案根目錄用 Both 模式啟動 CatDesk（同時開啟電腦控制與瀏覽器控制），瀏覽器選了你日常用的 Chromium。

目標

讓 ChatGPT 自己把伺服器跑起來、用瀏覽器確認按鈕問題、修好、再親眼驗證。

步驟：給 ChatGPT 的 prompt

Start the dev server as a background job, wait until it is ready,
then use browser tools to open http://localhost:4321/checkout.

Check the "Place Order" button: a teammate reported it looks wrong.
Read the rendered element (classes, text, disabled state), compare
with src/pages/Checkout.tsx, fix the bug, and re-verify in the
browser. Leave the dev server running when you finish.

CatDesk 工具呼叫序列

1. catdesk_instruction
2. start_command(command: "npm run dev")
   -> returns jobId: "job_7f2a", cursor
3. poll_command(jobId: "job_7f2a", cursor: ...)
   -> "VITE ready in 412 ms", "Local: http://localhost:4321/"
4. <browser bridge tool: open tab http://localhost:4321/checkout>
5. <browser bridge tool: read element "Place Order" button>
6. read(paths: ["src/pages/Checkout.tsx"])
7. edit(path: "src/pages/Checkout.tsx", ...)  // fix class typo
8. <browser bridge tool: re-read the button element>
9. poll_command(jobId: "job_7f2a", cursor: ...)  // server still healthy

過程中發生了什麼

第 2 步 start_command 立刻回傳工作 ID 與 cursor，指令在背景繼續跑，對話不被卡住。長駐指令與 MCP HTTP 請求的生命週期是刻意分離的，伺服器不會因為對話繼續而被殺掉。
第 3 步 poll_command 讀取增量輸出。輪詢回應有大小上限；如果 hasMoreOutput 是 true，即使指令已經結束，也要拿 nextCursor 繼續輪詢把緩衝區排乾。這裡看到 Local: http://localhost:4321/ 就知道伺服器就緒了。
第 4、5、8 步是瀏覽器模式帶來的額外工具，由 chrome-devtools-mcp 的瀏覽器橋接提供。實際工具清單依你的環境而定，但能力大致是：開分頁、讀元素、控制瀏覽器分頁。
第 5 步讀到按鈕的 class 是 btn-primaryy，比對原始碼確認是多打一個 y，第 7 步修掉。

結果與重點

第 8 步重新讀取元素，class 正確、樣式恢復。ChatGPT 回報修復完成，伺服器仍在背景運行，你可以直接接著手動測。

三個重點帶走：

開發伺服器用 start_command 起在背景，用 poll_command 等就緒訊號，這是標準套路。
瀏覽器模式讓 ChatGPT 能讀到「渲染後」的頁面，CSS 打錯字這種純看程式碼會漏掉的問題，元素一讀就現形。
想用瀏覽器能力，啟動 CatDesk 時要選 Control Browser 或 Both，並挑一個支援的 Chromium 瀏覽器。