デフォルトで有効
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 を手動で発行または更新するには、次を実行します:~/.bricks-cli/config.json にキャッシュし(出力されることはありません)、有効期限が近づくまで再利用し、リクエストが 403 を返した場合は自動的に再発行します。
任意のパスコード
デバイスはパスコードも受け付けますが、詳細設定で明示的に設定されている場合のみ有効です(詳細設定を参照)。デフォルトのパスコードはありません。一度限りの移行措置として、デバイスが 2.25 へのアップグレード前にローカルデバッグを明示的に有効にしていたがパスコードを設定していなかった場合、従来のBRICKS_DEVTOOLS パスコードを保持し、既存のアクセスが引き続き機能するようにします。
クライアントはいずれかの資格情報を提示できます。WebSocket パス /ws/<credential>、クエリパラメーター、または MCP 向けの Authorization: Bearer <token or passcode> ヘッダーです。両方が利用可能な場合、ワークスペース token がパスコードより優先されます。
認証状態
bricks devtools scan と bricks devtools open は各デバイスの認証状態を表示します:
bricks devtools open --info は、ワークスペース認証が有効かどうかも報告します。
DevTools エンドポイント
デバイスを見つけたら、bricks devtools open に --info フラグを付けてすべての利用可能なエンドポイントを確認します:
--info を付けると、適用される資格情報の認可の詳細も表示されます。MCP および MCP SSE エンドポイントは Authorization: Bearer <workspace token or passcode> ヘッダーを受け付けます。
--info を付けない場合、コマンドはサーバー識別情報(名前、バージョン、デバイス ID、ワークスペース、プロトコル、認証状態)を表示します。
DevTools ページを開く
Web UI URL をブラウザで開くと DevTools ランディングページにアクセスできます。そこから実行中のアプリケーションを検査したり、利用可能なデバッグターゲットを確認したり、デバイスに接続したりできます。Chrome で接続する
Chrome から直接接続することもできます:- Chrome で
chrome://inspectを開く - デバイスがリモートターゲットの一覧に表示される —
/jsonディスカバリーエンドポイントは常に提供されるため、セットアップは不要です - inspect をクリックして実行中のアプリケーションに接続した DevTools ウィンドウを開く
BRICKS CLI で検査する(CDP)
BRICKS Foundation バージョン 2.24 以降が必要です。
--passcode は、あなたがワークスペースメンバーではないパスコード保護されたデバイスに接続する場合にのみ使用します。CDP コマンドの全リストは CLI コマンドリファレンス を参照してください。
DevTools でできること
接続した DevTools ウィンドウはブラウザのように見えますが、BRICKS Foundation は Web ページではありません。各パネルは代わりにデバイスのライブランタイムを投影します。有効で意味のあるパネルは 4 つ — Elements、Console、Network、Application です。その他のパネル(Sources、Performance、Memory、要素検査ボタン)は、背後に Web ページが存在しないため非表示になっています。Elements — Brick ツリー

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

[System] Event: 行、ネイティブモデル(LLM/STT)のログなどです。Web ページの console.* ではありません。接続時に最近の履歴が自動的に再生されます。
接続時、BRICKS は一連のヘルパーオブジェクトを Console の評価スコープに直接注入します。名前で直接入力してください — globals 接頭辞は不要です。まず usage() を実行して全カタログを表示するか、globalThis と入力してツリー全体を展開します。
system.* がアプリ検査の中核です:
Network — リクエストトラフィック

例えば、
mqtt://broker.example.com:1883 を指す Generator は 1 行(ステータス 101 Connected)を表示します。{"temp":21} を sensors/room1 に publish すると、Messages に送信フレーム [sensors/room1] {"temp":21} として現れ、受信メッセージは受信フレームとして現れます。
Subspace、Canvas、Brick、Property Bank の値には直接の Network 行はありません。リクエストを行う Generator や Preload ステップの発生源として間接的に現れるだけです。レスポンスボディは最近のリクエストのみキャッシュされ、DevTools 起動前に開かれた接続は現れません。
ランタイムキャッシュから提供されるレスポンスは、まだネットワークリクエストとしては表示されません。このパネルでランタイムキャッシュの動作を表示することは、将来のリリースで予定されています。
Application — 保存された Data(読み取り専用)

bricks://app の下にあります:
DATA-… データベースが保持するのはランタイムの Property Bank であり、BRICKS Controller の Data Bank ストレージ製品とは別物です。同様に、GENERATIVE_MEDIA_CACHE はランタイムキャッシュであり、Media Box や Media Flow ではありません。[HIDDEN] としてマスクされます。
次のステップ
リモートデバッグ
ローカルネットワークアクセスなしに BRICKS Controller 経由でデバイスをリモートデバッグします。
デバッグパネル
デバイス上のオーバーレイを使ってランタイム状態を検査します。



