除錯

除錯元件支援元件到 DOM 的序列化。

<a-scene debug></a-scene>

元件到 DOM 序列化

預設情況下,出於效能原因,A-Frame 不會使用元件資料更新 DOM。如果我們開啟瀏覽器的 DOM 檢查器,我們將只看到元件名稱(而不是值)可見。

<a-entity geometry material position rotation></a-entity>

A-Frame 將元件資料儲存在記憶體中。更新 DOM 需要 CPU 時間將內部元件資料轉換為字串。如果我們想要檢視 DOM 更新以進行除錯,我們可以將除錯元件附加到場景中。在嘗試序列化到 DOM 之前,元件將檢查已啟用的除錯元件。然後我們將能夠在 DOM 中檢視元件資料:

<a-entity geometry="primitive: box" material="color: red" position="1 2 3" rotation="0 180 0"></a-entity>

確保此元件在生產中未處於活動狀態。

手動序列化為 DOM

要手動序列化為 DOM,請使用 Entity.flushToDOM 或 Component.flushToDOM:

document.querySelector('a-entity').components.position.flushToDOM();  // Flush a component.
document.querySelector('a-entity').flushToDOM();  // Flush an entity.
document.querySelector('a-entity').flushToDOM(true);  // Flush an entity and its children.
document.querySelector('a-scene').flushToDOM(true);  // Flush every entity.