Awesome

ember-chrome-devtools

This addon formats Ember objects so that you can see their type and internal state at a glance. No more typing .get() into your console!

Installation

1. Install the addon:

   ember install ember-chrome-devtools
   

   (it will not affect your production build)

2. Enable custom formatters in DevTools Settings:

Running

• ember serve
• Visit your app at http://localhost:4200.

Running Tests

• npm test (Runs ember try:each to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build

Debugging the debugger

It can be helpful to inspect the html created by the formatters. Fortunately you can debug DevTools using a second DevTools instance.

1. Hit Cmd-Alt-I to open DevTools

2. Split DevTools in its own window using the first "Dock side" option:

   <img width="241" alt="screen shot 2017-06-30 at 4 30 50 pm" src="https://user-images.githubusercontent.com/752885/27757014-916a373e-5db1-11e7-97a4-383a972743ce.png">

3. With DevTools focused, hit Cmd-Alt-I to open a second DevTools