Did you know the Ember Inspector is actually an Ember app itself? I personally had no idea, but found this to be amazingly helpful, when trying to jump in and help with the development of new features. It is also very cool that you can work on an Ember app, that literally benefits all Ember developers. Learn more about how it introspects your code, and the architecture behind that capability, after the break.
Getting Started with Ember Inspector
I’m always looking for new ways to help out the Ember Teams, specifically the Ember Learning Team. I have been helping out with some of the pushes to get the various website repos all up and running in Ember, instead of Middleman, and various modernization efforts. It was brought to my attention, by @locks and @acorncom, that Ember Inspector could also use some love and modernization, so I set aside some time to meet with @teddyzeenny to go over how Ember Inspector worked.
For those of you that prefer to see a visual walkthrough of the inner workings of Ember Inspector, we created a video explaining the different parts of Ember Inspector and how they work, what the restrictions are for them, and how to write a new feature.
There are a few main things to note about how Ember Inspector works. These make it an interesting, and somewhat different thought process, when you want to develop a new feature.
ember_debug and Version Support
master branch of Ember Inspector only supports Ember apps running 2.8+.
There is a
for Ember <= 2.7. The older branch is, typically, not updated, and all new work
is done in the master branch. However, something to note is, only the
ember_debug folder needs to maintain compatibility with these versions, as it
runs in your app, but the inspector itself, which lives in the
runs the version of Ember which we specify, so it only needs to support the
version we pull in, in package.json.
When Ember Inspector starts up, it will run some logic in the
which will check which version of Ember your app is on. If you are on Ember <=
2.7, it will swap out the entire codebase for the one in the 2.7 compatible
branch. This allows us to remain compatible with all Ember versions, while also
adding nice improvements to the
Inspecting the Inspector
Developing the Ember Inspector can be super meta at times, as you will end up inspecting the Inspector with the Inspector. This is very helpful to inspect the components in the Inspector itself, and see their DOM structure, data, etc. while you are developing features. This is accomplished by running in bookmarklet mode, which is detailed here. You can then navigate to the Ember app you want to inspect, and open the bookmarklet, to get an instance of the Inspector running in its own tab. Then, you can right click and inspect element on this tab to bring up DevTools for the Inspector itself, and even run the Ember Inspector against itself, since it is an Ember app.
Supporting Ember 3.0+
When I started working on Ember Inspector, it was not compatible with Ember 3.0+, and it was a passion of mine to try to remedy that. This ended up being weeks of work, and pairing with @rwjblue on some of the inner workings of Ember, which ultimately culimated in one massive PR. Some of the things we had to tackle were:
- Converting usages of
__container__to use the
this.ownerAPI and make that function correctly with Ember 2.8+
- Using more modern testing standards and using
@ember/test-helpers, rather than
- Writing our own custom setup and tear down test helpers
- Updating from
smoke-and-mirrorsto standalone vertical-collection
- Fixing incompatibilities with newer glimmer private APIs
The Future of Ember Inspector
The future is very bright for Ember Inspector, and I just merged in some nice style updates today, courtesy of @nummi. There is also a PR open to support the DevTools dark theme, which has been a requested feature for a long time. @pbishop16 has put a lot of amazing work into the dark theme, and provided us with a gif to see the switch from light to dark.
Expect to see all of these updates dropping in an Ember Inspector version very soon, and look forward to all the further updates in the works!