调试

调试组件支持组件到 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.