メインコンテンツへスキップ

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 のデバッグ、パフォーマンスのプロファイリング、コンソールログの確認が可能です。Puppeteer や Playwright などの CDP 対応ツールを接続して自動化スクリプトを書いたり、AI エージェント経由で接続することもできます。AI エージェント連携用の MCP エンドポイントも提供されています。

​
デバイスで 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 エンドポイント
MCPAI エージェント連携用の Model Context Protocol エンドポイント
MCP SSEServer-Sent Events トランスポートを使用する MCP エンドポイント
Infoデバイス、バージョン、プロトコルを記述する /devtools/info の JSON メタデータエンドポイント
検出されたデバイスの passcode と、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. inspect をクリックして実行中のアプリケーションに接続した DevTools ウィンドウを開く
Expose endpoints for chrome://inspect は認証なしで /json エンドポイントを公開するため Chrome から検出できるようになりますが、passcode が平文で露出します。信頼できるネットワーク上のデバッグでのみ有効にしてください。

​
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 経由でデバイスをリモートデバッグします。

デバッグパネル

デバイス上のオーバーレイを使ってランタイム状態を検査します。