DevTools拡張機能
コンソールパネルの隣に表示するText.jsパネル：コンポーネントツリー、セル単位のフレームインスペクター、フレームタイムライン。
Text.js DevTools拡張機能は、コンソールの隣にText.jsパネルを追加します。コンソールでレンダリングしているアプリを検査します。
- コンポーネント：各コンソールルートのReactツリーと、props、フック、キー、およびそれらに対応する
tx-box/tx-textシーンノードをセル単位で表示します。 - フレーム：現在のフレームをセルのグリッドで表示します。セルにカーソルを合わせると、描画したコンポーネントを確認できます。クリックするとノードを選択します。選択したノードは実際のコンソールでハイライトされます。
- タイムライン：フレームごとのReact、レイアウト、描画、エンコードの所要時間、スキップしたフレームと出力したフレーム、フレームの出力間隔、
%cスパンを表示します。 - コントロール：出力の一時停止と再開、レイアウトのワイヤーフレームの切り替え、グリッドサイズの固定や自動調整、フレームのテキストコピーができます。
インストール
拡張機能は packages/devtools-extension からビルドし、パッケージ化せずに読み込みます。
bun run --cwd packages/devtools-extension buildchrome://extensionsを開き、「デベロッパーモード」をオンにします。- 「パッケージ化されていない拡張機能を読み込む」をクリックし、
packages/devtools-extension/distを選択します。 - アプリを再読み込みしてDevToolsを開きます。ページがコンソールルートを作成すると、Text.jsパネルが表示されます。
ビルド時には、Chromeウェブストアに提出できる release/textjs-devtools-<version>.zip も生成されます。
コンポーネント
コンポーネントを選択すると、props、呼び出し順のフック（State、Ref、Memo、Effect などとその現在の値）、レンダリングするシーンノードを、セル単位の位置、サイズ、ボックスのインセットとともに確認できます。行にカーソルを合わせると、コンソール内のノードがハイライトされます。ホストノードで、コンポーネント間の tx-box 要素と tx-text 要素の表示を切り替えます。
パネルを開いている間、コミット後にツリーが更新されます。値は表示用の要約であり、ライブオブジェクトではありません。
フレーム
フレームインスペクターは、レンダラーのセルバッファーにあるすべてのグリフ、前景色、背景色、属性を描画します。セルにカーソルを合わせると、その文字と色、描画順で最前面にあるシーンノード（overflow、スクロールオフセット、zIndex を反映）、そのノードをレンダリングしたコンポーネントを確認できます。クリックすると、コンポーネントでそのノードが選択され、レンダラー独自のハイライトオーバーレイによって実際のコンソール内でハイライトされます。
タイムライン
各バーはレンダラーの1フレームを表します。
| フェーズ | 計測対象 |
|---|---|
| React | フレームの開始時にフラッシュされる同期的なReact処理 |
| レイアウト | Yogaによるレイアウト |
| 描画 | シーンのセルバッファーへのラスタライズ |
| エンコード | %c 書式文字列の構築と console.log() の呼び出し |
スキップしたフレームは薄く表示されます。変更がなかったため、何もログ出力されていません。出力間隔のチャートでは、出力したフレーム間の間隔を最小間隔の66msと比較できます。
時間の計測は console.log() で終了します。メッセージの整形と描画はDevTools内で実行され、ページからは観測できないため、タイムラインには表示されません。フレーム間でコミットされた並行レンダリングはコミットとして数えられますが、時間は計測されません。
動作の仕組み
React DevToolsと同様に、この拡張機能はページの実行前にグローバルフックを設置します。
globalThis.__TEXTJS_DEVTOOLS_HOOK__各コンソールルートは、作成時にこのフックに登録されます。拡張機能がない場合、フックは存在せず、ルートはその有無を1回だけ確認し、フレームごとの処理は実行しません。拡張機能がインストールされていてパネルが閉じている場合、フレームごとのコストはプロパティの読み取り1回分です。ツリーとフレームは、パネルから要求されたときだけ計算されます。
メッセージはページ→コンテンツスクリプト→サービスワーカー→パネルの順に流れます。アプリの起動前にフックを用意するため、コンテンツスクリプトはすべてのページで実行されます。拡張機能が要求するアクセス権はこれだけです。リモートコードは読み込まず、マシンの外部には何も送信しません。
プライバシー
この拡張機能はデータを収集しません。ネットワークリクエストも保存もせず、アクセス解析もありません。コンポーネントツリー、フレーム、計測時間は、同じブラウザー内のページとDevToolsパネルの間だけでやり取りされ、DevToolsを閉じると破棄されます。フレームをコピーをクリックすると、フレームのテキストがクリップボードに書き込まれます。
制限事項
- 対応ブラウザーはバージョン111以降のChromeおよびChromiumベースのブラウザーです。
- 拡張機能のインストール前に起動したアプリは、再読み込みが必要です。
- 検査対象はタブのトップフレームのみです。
- 時間は
performance.now()で取得します。ブラウザーはその精度を約0.1msに制限します。