Visual Inspector in A-Frame

A valuable feature provided by A-Frame is the in-browser visual inspector. This tool provides a graphical user interface that allows us to inspect the hierarchy of entities and their components in a scene and modify the components and their attributes in real time. We can immediately see the effect of changing values without having to switch back and forth between the code editor and the browser. The visual inspector eases the development process by providing easy-to-use functionality such as adding entities, transforming entities, and copy-pasting them in the HTML code. The developers of A-Frame have provided a user experience similar to the DevTools inspector available in all modern browsers that web developers are already familiar with.

Note: The visual inspector is available in most modern web browsers, including Google Chrome and Mozilla Firefox.

Main components

We’ll explore the visual inspector by building on the car prototype example. As we’ve experienced earlier, it’s difficult to analyze the position, rotation, and scale of entities using just the code. A graphical interface is an essential support. It allows us to observe the changes to our entities in a 3D space in real time and it enables an intuitive process of incremental refinement of our 3D models.

So, here’s the baseline code of the car prototype: