跳轉到主要內容

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.

BRICKS Foundation 實作了 Chrome DevTools Protocol (CDP)，為您的應用程式提供類似前端的除錯體驗。透過 Chrome DevTools 連線，可以檢查 DOM、除錯 JavaScript、分析效能並檢視主控台記錄。您也可以連線支援 CDP 的工具（如 Puppeteer 或 Playwright）以撰寫自動化指令碼，或透過 AI 代理連線。此外也提供 MCP 端點供 AI 代理整合使用。

​
在裝置上啟用 DevTools

1

開啟進階設定

在裝置上開啟設定，並導覽至進階設定區段。
2

啟用 Chrome DevTools

開啟 Chrome DevTools。裝置會在區域網路上的連接埠 19851 啟動 DevTools 伺服器。若該連接埠已被使用，則會自動遞增至下一個可用的連接埠。

​
探索裝置

使用 BRICKS CLI 掃描區域網路中已啟用 DevTools 的裝置： 
bricks devtools scan
裝置必須在進階設定中開啟啟用 LAN 探索，網路掃描才能正常運作。預設為啟用。

​
DevTools 端點

找到裝置後，使用 bricks devtools open 搭配 --info 旗標檢視所有可用端點： 
bricks devtools open <device-address> --info
此指令會顯示以下連線 URL：
端點說明
Web UI在瀏覽器中開啟此 URL 以存取 DevTools 首頁
CDP直接連線的 Chrome DevTools Protocol 端點
MCP供 AI 代理整合使用的 Model Context Protocol 端點
MCP SSE使用 Server-Sent Events 傳輸的 MCP 端點
Info位於 /devtools/info 的 JSON 中繼資料端點，描述裝置、版本與協定
輸出內容也會包含裝置通行碼（若已探索到），以及 MCP 與 MCP SSE 端點所需的 Authorization: Bearer <passcode> 標頭。 未加上 --info 時，指令會顯示伺服器識別資訊（名稱、版本、裝置 ID、工作區、協定與驗證狀態）。

​
開啟 DevTools 頁面

在瀏覽器中開啟 Web UI URL 以存取 DevTools 首頁。您可以在此檢查正在執行的應用程式、檢視可用的除錯目標，並連線至裝置。

​
透過 Chrome 連線

您也可以直接透過 Chrome 連線：
  1. 在進階設定中啟用 Expose endpoints for chrome://inspect
  2. 在 Chrome 中開啟 chrome://inspect
  3. 您的裝置會出現在遠端目標清單中
  4. 點選檢查以開啟連線至正在執行應用程式的 DevTools 視窗
Expose endpoints for chrome://inspect 會在不需驗證的情況下公開裝置的 /json 端點以供 Chrome 探索，這會以明碼形式暴露通行碼。請僅在信任的網路上用於除錯。

​
透過 MCP 連線 AI 代理

裝置的 MCP 端點讓 AI 代理可以與正在執行的應用程式互動。使用 mcporter 將裝置的 MCP 端點橋接為本機 STDIO 伺服器： 
npx mcporter --url http://<device-ip>:19851/mcp --header "Authorization: Bearer <passcode>"
這讓 AI 程式碼代理（Claude Code、Codex 等）可以透過 Model Context Protocol 連線並與裝置互動。

​
透過 BRICKS CLI 檢視（CDP）

需要 BRICKS Foundation 2.24 或更新版本。
BRICKS CLI 提供 CDP 指令，可直接從終端機檢視裝置，無需開啟瀏覽器： 
# 列印 brick 元件樹
bricks devtools brick tree -a <device-address>

# 擷取截圖
bricks devtools screenshot -a <device-address> -o screenshot.png

# 執行 JavaScript 運算式
bricks devtools runtime eval -a <device-address> "document.title"

# 監控網路活動
bricks devtools network list -a <device-address>
若裝置需要驗證，請使用 --passcode。完整 CDP 指令清單請參閱 CLI 指令參考。

​
使用 DevTools 可以做什麼

連線 Chrome DevTools 後，您可以：
  • Elements —檢查並修改已渲染的 DOM
  • Console —檢視應用程式的記錄、警告和錯誤
  • Sources —使用中斷點除錯 JavaScript
  • Network —監控 Generator 發出的網路請求
  • Performance —分析渲染和指令碼執行效能
  • Memory —分析記憶體使用情況並偵測洩漏

​
下一步

遠端除錯

透過 BRICKS Controller 遠端除錯裝置，無需存取區域網路。

除錯面板

使用裝置端的疊加層來檢查運行時狀態。