繁體中文

Browser

讓 ChatGPT 研究並與網站互動

Browser 允許 ChatGPT 開啟網站、收集最新資訊並執行操作,同時由你保持控制。它適合比較選項、完成網站上的多步驟任務,或審查正在建置的頁面。

Browser 可用於 ChatGPT Web 版和 ChatGPT 桌面 App。

請把頁面內容視為不可信上下文。分享敏感資訊或允許 ChatGPT 執行操作前,應先檢查網站和擬執行的操作。

ChatGPT 桌面 App 的內建瀏覽器會在聊天中向你和 ChatGPT 提供網站及本機 Web App 的共享檢視。你可以用它預覽頁面、留下視覺化回饋,或讓 ChatGPT 代你與網站互動。

內建瀏覽器使用獨立於常用瀏覽器的瀏覽器設定檔,不會自動共享現有標籤頁或瀏覽器會話。任務需要賬號時,可以直接在內建瀏覽器中登入。開啟 Settings > Browser(設定 > 瀏覽器),即可管理瀏覽器資料和裝置上可用的設定檔匯入功能。

Browser 預設把下載內容儲存到系統的 Downloads 資料夾。在 Settings > Browser 中,可以選擇其他下載位置、恢復為系統預設值,或開啟 Ask where to save downloads(每次詢問儲存位置)

當 ChatGPT 需要操作現有 Chrome 標籤頁或使用日常 Chrome 設定檔時,請改用 Chrome extension

可以從工具欄、點選 URL、手動導航,或按 Cmd+Shift+B(Windows 上為 Ctrl+Shift+B)開啟內建瀏覽器。

ChatGPT 介面截圖:ChatGPT 桌面 App 在本機 Web App 預覽中顯示瀏覽器批註

從位址列搜尋

在內建瀏覽器的位址列中開始輸入,即可從瀏覽歷史中查詢頁面。選擇匹配頁面可以重新開啟;沒有匹配的歷史記錄時,輸入搜尋詞即可使用 Google 搜尋。

內建瀏覽器維護獨立的設定檔和瀏覽歷史。搜尋結果不會自動包含常用 Chrome 設定檔或其他瀏覽器中的頁面。

管理瀏覽歷史

開啟 Settings > Browser(設定 > 瀏覽器),可以搜尋內建瀏覽器的歷史記錄、重新開啟存取過的頁面;組織允許時,也可以移除歷史記錄。使用 Clear browsing data(清除瀏覽資料) 選擇時間範圍和要移除的資料類型。

當這項能力可用時,ChatGPT 可能會請求搜尋瀏覽歷史,以查詢與當前任務相關的頁面。允許存取前應先檢查請求。瀏覽歷史可能包含內部 URL、搜尋詞和其他敏感資訊,因此只應在任務確實需要這些上下文時授權。

在瀏覽器中使用 Computer Use

Computer Use 允許 ChatGPT 直接操作內建瀏覽器。ChatGPT 可以開啟頁面、點選、輸入、檢查渲染狀態、截圖,並在頁面中驗證結果。

在桌面 App 中選擇 ChatGPT 並在切換器中開啟 Work,或選擇 Codex。開啟 Plugins Directory 並安裝 Browser,然後讓 ChatGPT 或 Codex 使用瀏覽器,或通過 @Browser 直接引用。

例如:

Use the browser to open http://localhost:3000/settings, reproduce the layout
bug, and fix only the overflowing controls.

除非你已經允許過該網站,否則 ChatGPT 會在使用前請求確認。可在 Settings > Browser 中管理允許和阻止的網站。提交資訊、購買、修改權限或刪除資料等敏感操作也會要求確認。ChatGPT 無法在內建瀏覽器中自動執行檔案上傳。

預覽頁面

  1. 整合終端中啟動 App 的開發伺服器,或執行本機環境 action
  2. 點選 URL 或在瀏覽器中手動導航,開啟本機路由、基於檔案的頁面或公開頁面。
  3. 對照程式碼 diff 檢查渲染結果。
  4. 在需要修改的元素或區域留下瀏覽器批註。
  5. 要求 ChatGPT 處理這些批註,並保持範圍明確。

例如:

I left comments on the pricing page in the built-in browser. Address the mobile
layout issues and keep the card structure unchanged.

在頁面上批註

如果 bug 只在渲染頁面中可見,可以使用瀏覽器批註向 ChatGPT 提供精確回饋。

  1. 開啟 Annotation mode(批註模式)
  2. 點選元素,或拖動以選擇一個區域。
  3. 編寫並儲存批註。
  4. 在聊天中傳送訊息,要求 ChatGPT 處理這些批註。

明確寫出問題和期望結果時,批註效果最好:

This button overflows on mobile. Keep the label on one line if it fits,
otherwise wrap it without changing the card height.
This tooltip covers the data point under the cursor. Reposition the tooltip so
it stays inside the chart bounds.

樣式回饋

對頁面某個區域新增批註後,可以選擇文本輸入框旁的 Adjust(調整),向 ChatGPT 提供更細粒度的樣式回饋。你可以修改字型、文本、間距和顏色等值,在頁面上預覽結果,再傳送目標更明確的批註。

ChatGPT 介面截圖:ChatGPT 桌面 App 顯示內建瀏覽器批註的樣式控制項

控制瀏覽器任務範圍

每項瀏覽器任務都應足夠小,以便一次完成審查。

  • 明確頁面、路由或 URL。
  • 明確關心的狀態,例如載入、空狀態、錯誤或成功。
  • 在需要修改的具體元素或區域留下批註。
  • ChatGPT 完成後再次檢查頁面。
  • 開啟本機頁面前,要求 ChatGPT 啟動或檢查開發伺服器。

對於儲存庫修改,請使用審查面板檢查修改並留下評論。

Developer mode

Developer mode 可與 Chrome 中的 Computer Use 或內建瀏覽器配合使用,為 ChatGPT 提供受控的 Chrome DevTools Protocol(CDP)存取。它可以分析 JavaScript 效能、檢查控制台輸出和網路流量、檢視 DOM 與實際應用的樣式,或診斷即時瀏覽器中的問題。

要啟用它,請開啟 Settings > Browser,然後在 Developer mode 下開啟 Enable full CDP access(啟用完整 CDP 存取)。如果組織已停用這項設定,使用者無法在本機開啟。管理員可以在 requirements.toml[features] 下設定 browser_use_full_cdp_access = false,停用完整 CDP 存取,並阻止使用者在 ChatGPT 桌面 App 中開啟對應選項。

完整 CDP 存取可能暴露敏感的瀏覽器內部資訊。ChatGPT 使用完整 CDP 檢查網站前會請求明確核准;核准前應檢查網站、任務和請求的存取範圍。

內建瀏覽器使用 @Browser。如果要在 Chrome 中使用 Developer mode,請設定 Chrome extension,然後呼叫 @Chrome

例如:

This app is slow. Use @Browser to capture a performance trace and inspect
network traffic, then identify the bottleneck.
ChatGPT 介面截圖:ChatGPT 桌面 App 的 Browser 設定顯示已啟用完整 CDP 存取的 Developer mode