Skip to main content
BRICKS Foundation は Chrome DevTools Protocol (CDP) を実装しており、アプリケーションに対してフロントエンドに近いデバッグ体験を提供します。Chrome DevTools を通じて接続することで、DOM の検査、JavaScript のデバッグ、パフォーマンスのプロファイリング、コンソールログの確認が可能です。Puppeteer や Playwright などの CDP 対応ツールを接続して自動化スクリプトを書いたり、AI エージェント経由で接続することもできます。AI エージェント連携用の MCP エンドポイントも提供されています。

デフォルトで有効

BRICKS Foundation 2.25 以降では、ローカルデバッグはデフォルトで有効です。DevTools サーバーはセットアップ不要で起動時に開始し、ローカルネットワーク上のポート 19851 で待ち受けます。そのポートが使用中の場合、次の利用可能なポートに自動的に切り替わります。 これらのコントロールを確認または変更するには、デバイスで設定を開き、詳細設定セクションに移動します:
  • ローカルデバッグを有効化はサーバー全体をオン/オフします。オフにするとサーバーが停止します。
  • Chrome DevTools Protocol (CDP)を有効化Model Context Protocol (MCP)を有効化LAN探索を有効化はサブトグルで、すべてデフォルトで有効です。
  • パスコードは任意です。パスコードでのアクセスを必須にしたい場合のみ設定してください。
BRICKS Foundation 2.25 以降が必要です。それより古いバージョンではサーバーはオプトインで、詳細設定で Chrome DevTools を手動で有効にしてください。

デバイスを検索する

BRICKS CLI を使ってローカルネットワーク上の DevTools が有効なデバイスをスキャンします:
ネットワークスキャンが機能するには、デバイスの詳細設定でLAN探索を有効化がオンになっている必要があります。これはデフォルトで有効です。

認証

DevTools へのアクセスはデバイスのワークスペースにスコープされます。クライアントはワークスペース token または任意のデバイスパスコードで認証します。

ワークスペース token

デバイスのワークスペースの任意のメンバーは、DevTools workspace token を使って接続できます。これは Ed25519 で署名された token で、Workspace API Token とは別物です。BRICKS CLI と CTOR Desktop はこれらの token を自動的に取得・更新するため、サインイン済みのワークスペースメンバーは通常、追加の手順なしで接続できます。 token を手動で発行または更新するには、次を実行します:
token のデフォルトの有効期間は 30 日です。CLI は token をプロファイルとワークスペースごとに ~/.bricks-cli/config.json にキャッシュし(出力されることはありません)、有効期限が近づくまで再利用し、リクエストが 403 を返した場合は自動的に再発行します。

任意のパスコード

デバイスはパスコードも受け付けますが、詳細設定で明示的に設定されている場合のみ有効です(詳細設定を参照)。デフォルトのパスコードはありません。一度限りの移行措置として、デバイスが 2.25 へのアップグレード前にローカルデバッグを明示的に有効にしていたがパスコードを設定していなかった場合、従来の BRICKS_DEVTOOLS パスコードを保持し、既存のアクセスが引き続き機能するようにします。 クライアントはいずれかの資格情報を提示できます。WebSocket パス /ws/<credential>、クエリパラメーター、または MCP 向けの Authorization: Bearer <token or passcode> ヘッダーです。両方が利用可能な場合、ワークスペース token がパスコードより優先されます。

認証状態

bricks devtools scanbricks devtools open は各デバイスの認証状態を表示します: bricks devtools open --info は、ワークスペース認証が有効かどうかも報告します。

DevTools エンドポイント

デバイスを見つけたら、bricks devtools open--info フラグを付けてすべての利用可能なエンドポイントを確認します:
以下の接続 URL が表示されます: --info を付けると、適用される資格情報の認可の詳細も表示されます。MCP および MCP SSE エンドポイントは Authorization: Bearer <workspace token or passcode> ヘッダーを受け付けます。 --info を付けない場合、コマンドはサーバー識別情報(名前、バージョン、デバイス ID、ワークスペース、プロトコル、認証状態)を表示します。

DevTools ページを開く

Web UI URL をブラウザで開くと DevTools ランディングページにアクセスできます。そこから実行中のアプリケーションを検査したり、利用可能なデバッグターゲットを確認したり、デバイスに接続したりできます。

Chrome で接続する

Chrome から直接接続することもできます:
  1. Chrome で chrome://inspect を開く
  2. デバイスがリモートターゲットの一覧に表示される — /json ディスカバリーエンドポイントは常に提供されるため、セットアップは不要です
  3. inspect をクリックして実行中のアプリケーションに接続した DevTools ウィンドウを開く
デバイスにパスコードが設定されている場合は、詳細設定chrome://inspect にパスコードを公開 を有効にすると、Chrome がプロンプトなしで接続できます。
chrome://inspect にパスコードを公開 は、設定されたパスコードを公開の /json URL に平文で埋め込みます。信頼できるネットワーク上のデバッグでのみ有効にしてください。

BRICKS CLI で検査する(CDP)

BRICKS Foundation バージョン 2.24 以降が必要です。
BRICKS CLI は CDP コマンドを提供し、ブラウザを開かずにターミナルから直接デバイスを検査できます:
サインイン済みのワークスペースメンバーは追加のフラグは不要です。CLI がワークスペース token を自動的に取得します。--passcode は、あなたがワークスペースメンバーではないパスコード保護されたデバイスに接続する場合にのみ使用します。CDP コマンドの全リストは CLI コマンドリファレンス を参照してください。

DevTools でできること

接続した DevTools ウィンドウはブラウザのように見えますが、BRICKS Foundation は Web ページではありません。各パネルは代わりにデバイスのライブランタイムを投影します。有効で意味のあるパネルは 4 つ — ElementsConsoleNetworkApplication です。その他のパネル(Sources、Performance、Memory、要素検査ボタン)は、背後に Web ページが存在しないため非表示になっています。

Elements — Brick ツリー

DOM ドキュメントとして投影された BRICKS レンダーツリーを表示する DevTools Elements パネル
Elements パネルはアプリケーションのレンダーツリーを DOM ドキュメントとして投影します。ツリーは #document をルートとし、BRICKS で構築した構造を入れ子にします:
  • Subspace<subspace> 要素です。現在表示されている Canvas はその中にマージされるため、その Bricks は直接子要素として現れ(独立した <canvas> ノードはありません)、canvas-* 属性(canvas-idcanvas-title など)がどの Canvas を表示しているかを示します。
  • Brick は 1 要素で、タグ名は BRICK_ 接頭辞を除いた Brick の種類です(例:<text><image><text_input><video><chart><items><webview><qrcode>)。
  • Brick の主要なコンテンツは要素のテキストとして表示されます。Text Brick は文字列を、Image Brick はソースパスを表示します(長い値は切り詰められます)。
各 Subspace は現在レンダリングされている Canvas のみを表示します。その Subspace の他の Canvas 上の Bricks はツリーに含まれません。GeneratorData は Elements には現れません。Generator のトラフィックは Network パネルで、保存された Data は Application パネルで確認してください。 Brick の属性からその識別情報とレイアウトを読み取れます: Brick を選択すると、その属性がインラインで表示され、解決済みのランタイム状態がサイドパネルに表示されます。Properties タブには Brick の propseventsoutlettemplateKey が、StylesComputed には合成されたレイアウトが表示されます。ノードにカーソルを合わせる、または選択すると、デバイス上で対応する Brick または Subspace がハイライトされ、text — WelcomeHeader のようなラベルが表示されます。 Elements の検索ボックスから BRICKS 固有のセレクターでツリーを検索できます:
  • #welcome-text または #B_3 — エイリアスまたは short ID で一致
  • :pressable:editable:hidden — 機能または状態で一致
  • .MyStateGroup — 状態グループに属する Brick に一致
Elements ツリーは読み取り専用です。属性の編集やノードの削除は実行中のアプリを変更せず、編集は元に戻ります。アプリを操作するには、Console の system ヘルパー(下記)または CDP 対応の自動化ツールを使用してください。

Console — ランタイムログと system ヘルパー

接続バナーと展開された system ヘルパーオブジェクトを表示する DevTools Console パネル
Console はデバイスのランタイム自身のログをストリーミングします。アプリケーションの出力、イベント発生時の [System] Event: 行、ネイティブモデル(LLM/STT)のログなどです。Web ページの console.* ではありません。接続時に最近の履歴が自動的に再生されます。 接続時、BRICKS は一連のヘルパーオブジェクトを Console の評価スコープに直接注入します。名前で直接入力してください — globals 接頭辞は不要です。まず usage() を実行して全カタログを表示するか、globalThis と入力してツリー全体を展開します。 system.* がアプリ検査の中核です:
ID は Elements パネルと同じ接頭辞に従います — Subspace は S_、Brick は B_、Data/プロパティは D_、Generator は G_。非同期ヘルパーはインラインの戻り値ではなく [Launcher] … のログ行で報告します。機密情報(パスワード、token、API キー)は [HIDDEN] としてマスクされます。

Network — リクエストトラフィック

キャプチャされた HTTP リクエストとヘッダーを表示する DevTools Network パネル
Network パネルは GeneratorPreload(プリロード)プロセス、およびランタイムが行うリクエストを表示します。DevTools が有効な間は常にキャプチャされるため、パネルを開く前でもリクエストが現れます。各ソースの表現方法: 例えば、mqtt://broker.example.com:1883 を指す Generator は 1 行(ステータス 101 Connected)を表示します。{"temp":21}sensors/room1 に publish すると、Messages に送信フレーム [sensors/room1] {"temp":21} として現れ、受信メッセージは受信フレームとして現れます。
ネットワークトラフィックはそのまま表示され、マスクされませんAuthorization ヘッダー、URL 内の API キー、リクエスト/レスポンスボディはすべて表示されます。DevTools へのアクセスはデフォルトでワークスペースにスコープされるため、機密として扱ってください。あなたのワークスペースメンバーシップまたはデバイスのパスコードを持つ人は誰でも、このトラフィックをそのまま閲覧できます。
Subspace、Canvas、Brick、Property Bank の値には直接の Network 行はありません。リクエストを行う Generator や Preload ステップの発生源として間接的に現れるだけです。レスポンスボディは最近のリクエストのみキャッシュされ、DevTools 起動前に開かれた接続は現れません。
ランタイムキャッシュから提供されるレスポンスは、まだネットワークリクエストとしては表示されません。このパネルでランタイムキャッシュの動作を表示することは、将来のリリースで予定されています。

Application — 保存された Data(読み取り専用)

IndexedDB に投影された BRICKS ストレージを表示する DevTools Application パネル
Application パネルはデバイスのランタイムストレージをブラウザのストレージバケットに投影します。すべて単一のオリジン bricks://app の下にあります:
DATA-… データベースが保持するのはランタイムの Property Bank であり、BRICKS ControllerData Bank ストレージ製品とは別物です。同様に、GENERATIVE_MEDIA_CACHE はランタイムキャッシュであり、Media Box や Media Flow ではありません。
Application パネルは読み取り専用です。値は DevTools から編集できません。アプリ内で変更してください。オブジェクト値はアプリの実行に伴ってライブで更新され、機密情報は [HIDDEN] としてマスクされます。

次のステップ

リモートデバッグ

ローカルネットワークアクセスなしに BRICKS Controller 経由でデバイスをリモートデバッグします。

デバッグパネル

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