Note: This documentation is for the old 0.3.0 version of A-Frame. Check out the documentation for the current 1.2.0 version
The debug component enables component-to-DOM serialization.
By default, for performance reasons, A-Frame does not update the DOM with component data. If we open the browser’s DOM inspector, we will see that many entities will have only the component name visible:
<a-entity geometry material position rotation></a-entity>
The component data is stored internally. Updating the DOM takes CPU time for
converting component data, which is stored internally, to strings. However,
when we want to see the DOM update for debugging purposes, we can attach the
debug component to the scene. Components will check whether the
component is enabled before trying to serialize to the DOM. Then we will be
able to view component data in the DOM:
<a-entity geometry="primitive: box" material="color: red" position="1 2 3" rotation="0 180 0"></a-entity>
Make sure that this component is not active in production.