デバッグコンポーネントは、コンポーネントから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.