DevTools 擴充功能

Text.js DevTools 擴充功能會在主控台旁新增 Text.js 面板，用來檢查正在主控台中渲染的應用程式。

• 元件：每個主控台根節點的 React 樹，包含 props、Hook、key，以及背後以儲存格配置的 tx-box / tx-text 場景節點。
• 影格：以儲存格網格呈現目前影格。將游標移到儲存格上，查看繪製它的元件。點擊可選取節點。選取的節點會在即時主控台中醒目顯示。
• 時間軸：每個影格的 React、版面配置、繪製與編碼時間、略過與輸出的影格、影格輸出間隔，以及 %c span。
• 控制項：暫停與繼續輸出、切換版面配置線框、固定或自動調整網格大小、將影格複製為文字。

#安裝

擴充功能從 packages/devtools-extension 建置，並以未封裝的形式載入：

bun run --cwd packages/devtools-extension build

1. 開啟 chrome://extensions，啟用「開發人員模式」。
2. 點擊「載入未封裝項目」，選擇 packages/devtools-extension/dist。
3. 重新載入應用程式並開啟 DevTools。網頁建立主控台根節點後，就會出現 Text.js 面板。

建置也會產生 release/textjs-devtools-<version>.zip，可直接用於 Chrome 線上應用程式商店。

#元件

選取元件可查看 props、依呼叫順序排列的 Hook（State、Ref、Memo、Effect 等，包含目前的值），以及該元件渲染的場景節點，並以儲存格為單位顯示位置、大小與方框內縮距離。將游標移到某一列上，就會在主控台中醒目顯示該節點。主體節點可顯示或隱藏元件之間的 tx-box 與 tx-text 元素。

面板開啟時，樹狀結構會在提交後更新。顯示的值是摘要，並非即時物件。

#影格

影格檢查器會繪出渲染器的儲存格緩衝區：每個字形、前景、背景與屬性。將游標移到儲存格上，會顯示其字元與顏色、依繪製順序位於最上層的場景節點（遵循 overflow、捲動偏移量與 zIndex），以及渲染該節點的元件。點擊會在元件中選取該節點，並以渲染器本身的醒目提示覆蓋層，在即時主控台中醒目顯示。

#時間軸

每個長條代表渲染器的一個影格：

略過的影格會以淡色顯示：沒有變更，因此沒有輸出記錄。影格間隔圖表會將輸出影格之間的間隔，與 66 ms 的最小間隔比較。

計時到 console.log() 為止。訊息的格式化與繪製在 DevTools 內部執行，網頁無法觀測，因此時間軸不會顯示這些時間。在影格之間提交的並行渲染會計入提交次數，但不計時。

#運作方式

與 React DevTools 一樣，擴充功能會在網頁執行前安裝全域 Hook：

globalThis.__TEXTJS_DEVTOOLS_HOOK__

每個主控台根節點都會在建立時向這個 Hook 註冊。未安裝擴充功能時，這個 Hook 不存在，根節點只會檢查一次，不會在每個影格執行額外工作。已安裝擴充功能但面板關閉時，每個影格的額外成本是讀取一次屬性。只有面板要求時，才會計算樹狀結構與影格。

訊息依序流經網頁 → 內容指令碼 → Service Worker → 面板。內容指令碼會在每個網頁執行，確保 Hook 在應用程式啟動前就存在。這是擴充功能唯一要求的存取權限。擴充功能不會載入遠端程式碼，也不會將任何內容傳送到本機以外。

#隱私權

擴充功能不會收集任何資料。不會發出網路請求、不會儲存任何內容，也沒有分析追蹤功能。元件樹、影格與計時資料只會在同一個瀏覽器的網頁與 DevTools 面板之間傳遞，並在關閉 DevTools 時捨棄。點擊複製影格時，會將影格文字寫入剪貼簿。

#限制

• 支援 Chrome 與以 Chromium 為基礎的瀏覽器，版本須為 111 或更新版本。
• 在安裝擴充功能前已啟動的應用程式，需要重新載入。
• 只會檢查分頁最上層的影格。
• 時間來自 performance.now()，瀏覽器會將其精確度降低至約 0.1 ms。