デバイスで DevTools を有効にする
デバイスを検索する
BRICKS CLI を使ってローカルネットワーク上の DevTools が有効なデバイスをスキャンします：ネットワークスキャンが機能するには、デバイスの詳細設定でLAN ディスカバリーを有効にするがオンになっている必要があります。これはデフォルトで有効です。
DevTools エンドポイント
デバイスを見つけたら、bricks devtools open に --info フラグを付けてすべての利用可能なエンドポイントを確認します：
| エンドポイント | 説明 |
|---|---|
| Web UI | ブラウザでこの URL を開くと DevTools ランディングページにアクセスできます |
| CDP | 直接接続用の Chrome DevTools Protocol エンドポイント |
| MCP | AI エージェント連携用の Model Context Protocol エンドポイント |
| MCP SSE | Server-Sent Events トランスポートを使用する MCP エンドポイント |
| Info | デバイス、バージョン、プロトコルを記述する /devtools/info の JSON メタデータエンドポイント |
Authorization: Bearer <passcode> ヘッダーも併せて表示されます。
--info を付けない場合、コマンドはサーバー識別情報（名前、バージョン、デバイス ID、ワークスペース、プロトコル、認証状態）を表示します。
DevTools ページを開く
Web UI URL をブラウザで開くと DevTools ランディングページにアクセスできます。そこから実行中のアプリケーションを検査したり、利用可能なデバッグターゲットを確認したり、デバイスに接続したりできます。Chrome で接続する
Chrome から直接接続することもできます：- 詳細設定で Expose endpoints for chrome://inspect を有効にする
- Chrome で
chrome://inspectを開く - デバイスがリモートターゲットの一覧に表示される
- 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 はソースパスを表示します（長い値は切り詰められます）。
| 属性 | 意味 |
|---|---|
id / alias / short-id | 識別子。Short ID は種類ごとに接頭辞が付きます：B_ Brick、S_ Subspace、C_ Canvas、D_ Data、G_ Generator |
title | エディター上の Brick のタイトル |
pressable / editable | Brick がタップに反応する／テキスト入力を受け付けるか |
hide | Brick が非表示かどうか |
x / y / w / h | BRICKS のグリッド単位（ピクセルではない）での位置とサイズ |
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 と入力してツリー全体を展開します。
| ヘルパー | 機能 |
|---|---|
info() · memoryUsage() · diskUsage() | デバイスとアプリの情報、メモリ、ディスク使用量 |
usage() | 利用可能なヘルパーのカタログを表示 |
system.* | 実行中のアプリを検査・操作する（下記参照） |
control.* | refresh()、clearCache()、takeScreenshot()、checkUpdate()、rebindDevice('imsure')、externalScreen(enable) |
panel.* | デバイス上のオーバーレイを開く — panel.menu()、panel.info()、panel.apps()、panel.debug.root/data/log/cache/localSync()、panel.automation()、panel.advancedSetting()、panel.about() |
automation.* | E2E 自動化の list()、run(testId, payload)、stop() |
mcp.* | MCP server/client Generator のツール、リソース、プロンプトを呼び出す |
tv.focusRegistry() | TV/リモコンのフォーカスレジストリを検査 |
system.* がアプリ検査の中核です：
| 呼び出し | 戻り値／動作 |
|---|---|
system.isReady() | ランタイムが準備完了かどうか |
system.subspaces() | Subspace ツリーのスナップショット |
system.querySelector(sel) · querySelectorAll(sel) | レンダリングされた Brick ツリーを照会 |
system.query(sel) · queryAll(sel) | 完全なインスタンスツリーを照会 |
system.simulatePress(subspaceId, brickId) | Brick をタップ |
system.simulateKeyDown(code, key, flags) · simulateKeyUp(...) | キー入力を送信 |
system.executeAction(subspaceId, { handler, action, parameters }) | Brick、Data、または Generator のアクションを実行 |
system.data.storeList() | Data store を一覧表示 |
system.data.properties(subspaceId, { filter, command }) | Property Bank のプロパティを一覧表示 |
system.data.property(subspaceId, propertyId) | 単一のプロパティ値を読み取る |
system.cache.generatorCache(subspaceId, generatorId) | Generator のキャッシュ出力を読み取る |
system.cache.runtimeCacheStats(subspaceId) | ランタイムキャッシュの統計 |
system.channel.keys() · subscriptions(regex) | channel（pub/sub）を検査 |
system.storage.persist.global.get(key) · allKeys() | 永続スコープストレージを読み取る（memory はメモリ内） |
system.localSync.isEnabled() · isMain() · summary() | Local Sync の状態 |
system.inspectEventRouting(id) · inspectParentCall(id) | イベントの配線を追跡 |
Network — リクエストトラフィック
| トラフィック | 表示形式 |
|---|---|
| HTTP／HTTPS（HTTP Generator、内部 fetch） | 標準的なリクエスト行（タイプ Fetch）— メソッド、URL、ステータス、ヘッダー、リクエストペイロード、レスポンスボディ |
| ストリーミング／サーバー送信（HTTP・LLM Generator） | 1 つの EventSource 行。EventStream タブを開いてイベントを確認 |
WebSocket（ws / wss） | WebSocket 行。Messages タブを開いてフレームを確認 |
MQTT（mqtt / mqtts） | broker URL の WebSocket 形式の行。publish や受信メッセージはそれぞれ [topic] payload のフレームとして表示 |
| Data Bank ライブサブスクリプション、GraphQL | クエリは HTTP 行、サブスクリプションは WebSocket 行 |
| Preload（アセット、フォント、Media Box） | アプリがコンテンツをプリロードする際の HEAD サイズプローブと GET／POST ダウンロード |
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 の下にあります：
| DevTools の場所 | BRICKS のデータ |
|---|---|
| Local Storage | 永続スコープストレージ（再起動後も保持）、キーは global:<key> と subspace:<id>:<key> |
| Session Storage | メモリ内スコープストレージ（リセット時にクリア） |
IndexedDB → GENERATOR_CACHE | キャッシュされた Generator の出力 |
IndexedDB → GENERATIVE_MEDIA_CACHE | キャッシュされた生成メディアの結果 |
IndexedDB → DATA-<subspace> | Subspace ごとの Property Bank の値（ストア properties）。[persist] を接頭辞とする行は永続化されたバッキングコピー |
DATA-… データベースが保持するのはランタイムの Property Bank であり、BRICKS Controller の Data Bank ストレージ製品とは別物です。同様に、GENERATIVE_MEDIA_CACHE はランタイムキャッシュであり、Media Box や Media Flow ではありません。[HIDDEN] としてマスクされます。
次のステップ
リモートデバッグ
ローカルネットワークアクセスなしに BRICKS Controller 経由でデバイスをリモートデバッグします。
デバッグパネル
デバイス上のオーバーレイを使ってランタイム状態を検査します。