How to access a known Ember component from console

Question

Using Ember debug Chrome extension, I have identified this component in a website I am trying to automate (but do not have direct access to change the code):

<MYAPP@component:zipcode-field::ember592>

Which is shown in hierarchy as:

application
    engine
        myui
            zipcodeField

If I edit the value property of that element in the debugger, it updates the UI and model as desired. Can I do this via a one-liner from the console?

Update: So far, I am able to enter this in the console:

Ember.lookup.$E.container.lookup("MYAPP@component:zipcode-field")

But unable to access/alter its value property as in the debugger.

Update:

In feedback to one of the answers, my aim is to have a console one-liner, which could be given to someone without any debuggers installed in order to run the code with the same behaviour. Using a variable such as $E within the console requires that the element has been manually selected prior to running the code, which would not be sufficient.

Answer 1

Correct me if I am wrong but it seems that you aren't using the ember inspector (available on firefox and as a bookmarklet).

Once you have that installed it is really easy to inspect debug and modify anything ember related, for the purpose of this answer I will be using the chrome version.

Open up your chrome dev tools in the tab that has your ember app running, once there head to the ember tab in the developer tools.

In order to see the components you will have to tick a checkbox

Once enabled you will be able to see all of the components currently used.

Clicking on a component will open up a panel that contains all of the component's properties.

In order to access those properties from the console all you need to do is click on the $E next to the components.

Once clicked you should see something similar in the console.

Ember Inspector ($E):  Class {helperName: (...), logout: (...), isOpenBinding: StreamBinding, currentUserBinding: StreamBinding, _morph: Morph…}

Now all you need to do in order to get the property values:

$E.get('myProperty');

And To set them:

$E.set('myProperty', newValue);

Answer 2

A component is just a view, so the following should work:

Ember.View.views[<GUID>]

So in your example:

Ember.View.views['ember592']

You need to use get/set if you want to modify/read the value property, for example:

Ember.View.views['ember592'].get('value')

Ember.View.views['ember592'].set('value', 'newValue')

Answer 3

Found a gist that works with Ember 2.13

App.__container__.lookup('-view-registry:main')[componentId]; // componentId i.e. "ember4322"

Credit goes to ngyv: https://gist.github.com/ngyv/819e2cc78eca2a3b19599707e1461205