瀏覽器預覽

Dream 的瀏覽器會在你的專案旁邊開啟網頁並進行聊天。你可以使用它來檢查本地應用程式，同時讓代理在程式碼上工作。

預覽你的應用程式#

1. 使用其正常的專案命令在 終端 中啟動應用程式。
2. 複製應用程式列印的本地 URL，包括其埠。
3. 在右側面板單擊 瀏覽器。
4. 在位址列中輸入 URL 並按 Enter。

該頁面在工作區中開啟。如果應用程式在下次執行時使用了不同的埠，請相應更新地址。Dream 的瀏覽器會開啟該 URL；它不會啟動應用程式。

使用瀏覽器分頁#

點選 新增分頁 可開啟另一個頁面並選擇標籤頁以切換到它。這有助於在瀏覽歷史中同時保留兩個路由而不會互相替換。

使用 返回、前進 和 重新整理瀏覽器 來導航。使用其關閉控制元件關閉單個標籤頁。隱藏瀏覽器面板可讓你之後返回到已開啟的標籤頁。

檢查並分享你所看到的內容#

瀏覽器操作包括：

操作	用於……
開啟 DevTools	檢查頁面的控制檯、元素和網路活動
擷取螢幕截圖	捕獲頁面以用於錯誤報告或進一步討論
放大 / 縮小 / 重置縮放	調整預覽介面的顯示縮放比例
在系統瀏覽器開啟	在您的常規瀏覽器中檢視當前 URL

在需要更多空間時使用 展開瀏覽器，在想要返回較小檢視時使用 收合瀏覽器。要給代理一張整個頁面的截圖，可使用聊天框中的 附件控制。

將元素傳送到聊天中#

1. 在瀏覽器工具欄點選 選擇元素並傳送到聊天。
2. 懸停頁面以突出顯示元素，然後點選您想要討論的專案。按 Escape 取消操作。
3. 在傳送到聊天表單中輸入評論，如果想要進行單獨的對話，請啟用新聊天，然後傳送它。

Dream 會將你的評論附帶元素的選擇器、大小、文字、樣式、HTML 以及該元素的截圖一起傳送，以便代理能夠在程式碼中定位到該元素。詳情和限制請參見 向聊天傳送回饋。

要求代理使用瀏覽器#

Claude Code、Codex、OpenCode 和 Grok 的聊天會自動接收 Dream 瀏覽器中的工具，它們與你看到的相同專案瀏覽器標籤頁一起工作。Cursor 聊天不會收到這些工具。

給代理頁面 URL 和一個具體任務，例如：

在 Dream 的瀏覽器中開啟 http://localhost:3000/settings。變更主題，重新整理頁面，然後檢查所選主題是否保留。如果沒有保留，請檢查主控台和網路請求。

這些工具可以開啟和導航標籤頁，檢查頁面內容，點選、輸入文字、懸停、選擇選項、滾動、擷取螢幕截圖，以及檢查控制檯日誌和網路響應。它們還可以從專案中附加檔案以上傳控制元件。檔案上傳必須使用專案內的路徑。

在請求代理檢查其本地 URL 之前，請先啟動應用程式。瀏覽器操作遵循聊天的許可權；如果請求批准，請在聊天中作出回應。這些工具是內建的，不需要手動定義MCP 伺服器。

重新載入並清除網站資料#

更改應用程式程式碼後嘗試正常重新整理。如果頁面仍然顯得過時，請使用瀏覽器操作中的強制重新載入。

清除快取 會移除瀏覽器快取資料。清除 Cookie 會清除 Cookie，並可能使你在嵌入式瀏覽器中退出網站登入。在調查快取或認證行為時，請謹慎使用這些操作。

如果本地頁面無法載入#

檢查應用程式是否仍在執行，確認其終端輸出中的完整 URL 和埠，並檢查其中是否存在伺服器錯誤。在你的系統瀏覽器中嘗試相同的地址，以判斷問題是由應用程式本身還是嵌入式預覽引起的。