Chrome DevTools addon for Ember.js
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon
app
config
tests
vendor
.editorconfig
.ember-cli
.eslintrc.js
.gitignore
.npmignore
.travis.yml
.watchmanconfig
LICENSE.md
README.md
ember-cli-build.js
index.js
package.json
testem.js
yarn.lock

README.md

ember-chrome-devtools

npm version build status

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!

x

Installation

  1. Install the addon:

    ember install ember-chrome-devtools
    

    (it will not affect your production build)

  2. Enable custom formatters in DevTools Settings:

Enable custom formatters

Running

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:

    screen shot 2017-06-30 at 4 30 50 pm
  3. With DevTools focused, hit Cmd-Alt-I to open a second DevTools