> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bricks.tools/llms.txt
> Use this file to discover all available pages before exploring further.

# 瀏覽器

> 在面板中開啟網頁，並讓代理操作這些網頁

瀏覽器分頁會在[面板](/zh-Hant/ctor/reference/panels)中執行即時網頁——[BRICKS Controller](/zh-Hant/controller) 網頁介面，或您輸入的任何網址。您可以視需要開啟任意數量的分頁，分散在兩個面板中，而代理能透過授權的 Chrome DevTools Protocol (CDP) 橋接來操作您開啟的網頁。

瀏覽器分頁取代了先前單一的 Controller 分頁：現在開啟 Controller 會開啟一個指向它的瀏覽器分頁，您也可以在旁邊同時開啟其他網站。

## 開啟瀏覽器分頁

從任一[面板](/zh-Hant/ctor/reference/panels)的 **+**（新增分頁）選單：

* **新增瀏覽器分頁**——開啟一個空白分頁。其空白狀態會顯示「開啟 Controller，或在上方輸入網址。」
* **開啟 Controller**——開啟一個指向使用中應用程式 [BRICKS Controller](/zh-Hant/controller) 的瀏覽器分頁，並依其 stage 與 workspace 設定範圍（`beta` 應用程式會開啟 beta Controller，`production` 應用程式則開啟 production 版）。

瀏覽器分頁在專案工作階段與主聊天工作階段中皆可使用。

您也可以在應用程式內開啟聊天中的連結：當您點選代理產生的 `http(s)` 連結時，確認對話框會提供 **Open in App**，將連結以瀏覽器分頁開啟，而非您的作業系統瀏覽器。

## 工具列

每個瀏覽器分頁都有導覽工具列：

| 控制項                 | 動作                                  |
| ------------------- | ----------------------------------- |
| **返回** / **前進**     | 在分頁的瀏覽紀錄中移動                         |
| **重新載入** / **停止載入** | 重新載入頁面，或停止進行中的載入                    |
| 網址列                 | 輸入網址並按 **Enter** 前往（提示文字為 **輸入網址**） |
| **瀏覽器動作**（**⋯**）    | 開啟動作選單——**在頁面中尋找**與**清除瀏覽器資料**      |

### 在頁面中尋找

從**瀏覽器動作**選單開啟**在頁面中尋找**以搜尋目前頁面。以**上一個符合項目**與**下一個符合項目**逐一檢視結果，並以**關閉尋找**收合尋找列。

### 清除瀏覽器資料

**清除瀏覽器資料**會清除快取、Cookie、本機儲存空間、IndexedDB 與 Service Worker。所有瀏覽器分頁共用同一個工作階段，因此清除會影響每個分頁——開啟中的分頁會重新載入，而且您可能會被登出。CTOR 會先請您確認。

## 分頁列

開啟的瀏覽器分頁會顯示於分頁列中，每個分頁都會顯示頁面的網站圖示（載入中或頁面沒有圖示時會顯示地球圖示）。與內建分頁不同，瀏覽器分頁不會去重——您可以同時開啟多個。可拖曳重新排序，並點選 **×** 關閉分頁。

頁面以新視窗開啟的連結（`window.open` 或 `target="_blank"`）會以另一個瀏覽器分頁開啟，且僅限 `http(s)` 網址。

## 頁面動作

在頁面上按一下滑鼠右鍵以開啟內容選單：

| 動作                    | 作用                           |
| --------------------- | ---------------------------- |
| **擷取螢幕截圖**            | 將頁面的螢幕截圖複製到剪貼簿               |
| **擷取螢幕截圖 → 詢問 Agent** | 擷取頁面並附加到聊天輸入列，方便您向代理詢問       |
| **開啟 DevTools**       | 開啟該分頁的原生 Chrome DevTools 檢查器 |

<Note>
  原生 DevTools 與代理的 CDP 橋接在每個分頁上互斥。當您在某個分頁開啟 DevTools 時，該分頁會暫時脫離[代理橋接](#代理瀏覽器自動化)，直到您關閉 DevTools。
</Note>

## 代理瀏覽器自動化

代理可以操作您在瀏覽器分頁中開啟的頁面——點選、輸入、填寫表單、擷取螢幕截圖與讀取頁面狀態——透過授權的本機 CDP 橋接進行。CTOR 會自動將連線注入代理的 Bash 環境，因此代理無需您進行任何設定即可連線。

內建的 **browser** 技能會教代理如何使用此功能，並以 [`agent-browser`](https://www.npmjs.com/package/agent-browser) CLI 操作頁面。請安裝此 CLI 讓代理可以使用：

```bash theme={null}
bun add -g agent-browser
```

代理也可以在未全域安裝時，以 `bunx agent-browser` 隨選執行。

與代理協作時請留意：

* 只有**開啟中**的瀏覽器分頁可供操作，而全新的空白分頁尚未載入任何頁面——請先開啟分頁並輸入網址。
* 當任務就是要操作您正在檢視的分頁時，導覽該分頁沒有問題；但對於無關的網頁工作，代理會使用自己的獨立瀏覽器，而不會佔用您的頁面。
* 代理無法透過橋接開啟新的瀏覽器分頁——當它需要一個新頁面時，請主動要求它，或自行開啟一個。
* 在分頁上開啟原生 **DevTools** 會使該分頁脫離橋接，直到您再次關閉 DevTools。

即使在[沙箱模式](/zh-Hant/ctor/reference/sandbox#受信任的程式)下，`agent-browser` 仍會以其所需的直接存取權執行，方式與 `bricks devtools` 相同。關於 **browser** 這類內建技能的運作方式，請參閱[技能](/zh-Hant/ctor/reference/skills)。