Mozilla AFRAME a-frame launch inspector from button onclick instead keystroke

Question

We all know that you can launch the inspector using strg+alt+i, but I am right now trying to add a button to my user interface that does the same thing:

function customEnterInspector () {
        var scene = document.querySelector('a-scene');
        if (scene) {
            if (scene.hasLoaded) {
                this.injectInspector();
            } else {
                scene.addEventListener('loaded', this.injectInspector());
            }
        }
    }

    $( "#intoinspector" ).click(function() {
        customEnterInspector();
    });

However, I do get the error:

 Uncaught TypeError: this.injectInspector is not a function
at customEnterInspector (index.html:925)
at HTMLAnchorElement.<anonymous> (index.html:933)
at HTMLAnchorElement.dispatch (jquery-3.1.1.min.js:3)
at HTMLAnchorElement.q.handle (jquery-3.1.1.min.js:3)

I suppose the element (a-scene) that I am referencing is not the right one. I already tried with "window", but that didn't work either. Any advice on what I could else try?

Thanks & Best, - Max

Side note on JS syntax: `foo.addListener('event', callback())` will not work, because `callback()` is called immediately, not passed to the listener. Instead, you'll want `foo.addListener('event', callback)`, which just hands the function to the listener so that it can be called later. Adding `()` makes the function run immediately, which we don't want. [More details](http://stackoverflow.com/questions/593509/javascript-syntax-function-calls-and-using-parenthesis). — Don McCurdy, Jan 16 '17 at 16:16

score 1 · Answer 1 · answered Feb 12 '19 at 21:36

This code is working great too.

function openEditor()
{
    window.postMessage('INJECT_AFRAME_INSPECTOR','*');
}

I have attached this function to a image that executes the previous code:

<input type="image" src="images/edit.png" width="35" height="35" onclick="openEditor();"/>

score 0 · Answer 2 · answered Jan 16 '17 at 16:10

The injectInspector() method is part of the inspector component on the scene object. In the code snippet you've posted above, this is referring to the button element, which does not have that method. To refer to the component, you can do this:

 var inspector = scene.components.inspector;

 // Show inspector immediately.
 inspector.injectInspector();

 // Show inspector after event.
 scene.addEventListener('loaded', function () {
   inspector.injectInspector();
 });

Mozilla AFRAME a-frame launch inspector from button onclick instead keystroke

2 Answers2