建立 2026-09-15 更新 2026-09-15

瀏覽器與除錯

前端或任何「要看到畫面才知道對不對」的工作，不要只靠模型想像 DOM。Cursor 內建瀏覽器（以及 Design Mode）讓 agent 點選元件、改間距或顏色，並把實際畫面納入上下文。Debug 模式則偏向：先穩定重現、縮小範圍、再改程式。

瀏覽器與 Design Mode

官方 201 示範過：選取畫面上的按鈕，要求「跟現有樣式一致」，不必自己去挖 class 名稱。較新的 Design Mode 可以在頁上標註，給 agent 一個明確的視覺錨點。

使用時：

1. 先讓本機 dev server 跑起來（可請 agent 啟動）。
2. 用瀏覽器工具選你要改的區塊，而不是只說「那個藍色的」。
3. 改完看畫面與 diff，確認沒有順便改到別的頁。

這不能取代測試，但能大幅減少「模型以為改好了、你一開瀏覽器就走位」的來回。

Debug

問題不穩定、只在特定操作出現時，先求可重現步驟，再准它改碼。把錯誤訊息、截圖、操作路徑丟進對話。修完請它跑你原本會跑的檢查，不要只看「我修好了」。

推薦影音

官方 Cursor 201 中段就是瀏覽器選取與樣式對齊。建議從選取工具那段看起。