Giter VIP home page Giter VIP logo

ember-inspector's Introduction

Ember Inspector Build Status

Adds an Ember tab to Chrome or Firefox Developer Tools that allows you to inspect Ember objects in your application.

Installation

Chrome

Install the extension from the Chrome Web Store.

OR:

  • Clone the repository
  • cd into the repo directory
  • run npm install && bower install
  • run npm install -g ember-cli
  • run npm run build to build the dist directory
  • Visit chrome://extensions in chrome
  • Make sure Developer mode is checked
  • Click on 'Load unpacked extension...'
  • Choose the dist/chrome folder in the cloned repo
  • Close and re-open developer tools if it's already open

Firefox

Install the Firefox addon.

OR:

  • Clone the repository
  • cd into the repo directory
  • run npm install && bower install
  • run npm install -g ember-cli
  • run npm run build:xpi to build the dist directory, download Firefox Addon SDK and build Firefox Addon XPI to 'tmp/xpi/ember-inspector.xpi' or npm run run-xpi to run the Firefox Addon in a temporary profile (or use FIREFOX_BIN and FIREFOX_PROFILE to customize Firefox profile directory and Firefox binary used to run the extension)

Opera

  • Clone the repository
  • cd into the repo directory
  • run npm install
  • run npm install -g ember-cli
  • run npm run build to build the dist directory
  • Visit chrome://extensions in chrome
  • Make sure Developer mode is checked
  • Click on 'Load unpacked extension...'
  • Choose the dist/chrome folder in the cloned repo
  • Close and re-open developer tools if it's already open

Bookmarklet (All Browsers)

javascript: (function() { var s = document.createElement('script'); s.src = '//ember-extension.s3.amazonaws.com/dist_bookmarklet/load_inspector.js'; document.body.appendChild(s); }());

Internet explorer will open an iframe instead of a popup due to the lack of support for cross-origin messaging.

For development:

  • run npm run serve:bookmarklet
  • create a bookmark (make sure you unblock the popup when you run the bookmarklet):
javascript: (function() { var s = document.createElement('script'); s.src = 'http://localhost:9191/bookmarklet/load_inspector.js'; document.body.appendChild(s); }());

Building and Testing:

Run npm install && npm install -g ember-cli && && npm install -g bower && bower install && npm install -g grunt-cli to install the required modules.

  • npm run build to build the files in the dist directory
  • npm run watch To watch the files and re-build in dist when anything changes (useful during development).
  • npm test To run the tests in the terminal
  • npm run build:xpi to download and build Firefox Addon XPI into tmp/xpi/ember-inspector.xpi
  • npm run run-xpi to run the Firefox Addon XPI on a temporary new profile (or use FIREFOX_BIN and FIREFOX_PROFILE to customize Firefox profile directory and Firefox binary used to run the extension)
  • npm start To start the test server at localhost:4200/testing/tests

Deploy new version:

Patch versions

Patch versions are only committed to the stable branch. So we need to cherry-pick the commits we need from master and bump stable to the new patch version.

  • git checkout stable
  • Cherry-pick the needed commits from master to stable
  • Bump the patch version in package.json and run grunt version. Add the change log entry and commit.
  • Follow the "Steps to publish" below.
  • git checkout master
  • Commit the change log entry to the master branch.

Minor and Major versions

When releasing a major/minor version, master would already have this version set, so what we need to do is to merge master into stable and release.

  • Add the new minor/major version's change log entry in CHANGELOG.md and commit to master.
  • git checkout stable
  • git merge -X theirs master
  • Follow the "Steps to publish" steps below.
  • git checkout master
  • Update package.json to the future major/minor version and run grunt version

Steps to publish

  • Push the stable branch to github (this will publish the bookmarklet version).
  • npm run build:production
  • Publish dist/chrome/ember-inspector.zip to the Chrome web store
  • Publish tmp/xpi/ember-inspector.xpi to the Mozilla Addons
  • npm publish ./
  • git tag the new version

Window Messages

The Ember Inspector uses window messages, so if you are using window messages in your application code, make sure you verify the sender and add checks to your event listener so as not to conflict with the inspector's messages.

ember-inspector's People

Contributors

teddyzeenny avatar rpl avatar wycats avatar domchristie avatar stefanpenner avatar rwjblue avatar cyril-sf avatar saladfork avatar mawaheb avatar wagenet avatar abulrim avatar craigteegarden avatar ef4 avatar ebryn avatar jryans avatar atsjj avatar tomdale avatar alexspeller avatar phlppn avatar bartheleway avatar eventualbuddha avatar ccarruitero avatar mockra avatar omghax avatar fbender avatar kanongil avatar eccegordo avatar jayphelps avatar johanneswuerbach avatar jonathankingston avatar

Watchers

James Cloos avatar Joe avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.