Angular 2 development tools for Chrome
TypeScript HTML CSS Other
Latest commit 3dfe3f2 Jan 11, 2017 @stevenkampen stevenkampen committed on GitHub Merge pull request #912 from stevenkampen/release-1-2-8
Release 1.2.8
Permalink
Failed to load latest commit information.
assets moving images to assets Apr 28, 2016
docs new architecture image (#819) Nov 25, 2016
example-apps Add module parsing logic and very basic UI Jan 11, 2017
images Removed extra white space, included feedback icon, dynamically load v… Sep 13, 2016
src Add note about private API usage Jan 11, 2017
.editorconfig Webpack Build Setup Oct 27, 2015
.gitignore Removed extra white space, included feedback icon, dynamically load v… Sep 13, 2016
.mention-bot updating mention bot config file Apr 26, 2016
CHANGELOG.md Release 1.2.8 Jan 12, 2017
CODE_OF_CONDUCT.md updating code of conduct and contributing files Apr 26, 2016
CONTRIBUTING.md fix typo in contributing.md Oct 6, 2016
LICENSE Documentation Oct 21, 2015
README.md Add section to readme explaining `enableDebugTools` issue prior to 2.… Nov 25, 2016
changelog-template.md Update changelog-template.md Apr 11, 2016
circle.yml Remove CircleCI upload to S3 (#780) Nov 11, 2016
crxmake.sh Simplify and minify the production CRX (#688) Sep 20, 2016
frontend.html Simplify and minify the production CRX (#688) Sep 20, 2016
index.html chore: restructure project directory Feb 23, 2016
manifest.json Release 1.2.8 Jan 12, 2017
package.json Release 1.2.8 Jan 12, 2017
popup.html Release 1.2.0 (#678) Sep 16, 2016
popup.js Removed extra white space, included feedback icon, dynamically load v… Sep 13, 2016
release-process.md Say to update popup.html with each version (#646) Sep 12, 2016
s3-upload.sh renaming to augury Apr 21, 2016
tsconfig.json Avoid auto compile and build TS on saving file changes for editors li… May 8, 2016
tslint.json Introduce state property metadata system + ability to manually emit v… Sep 12, 2016
typings.json Display real type information in the State view instead of always "Ob… Nov 11, 2016
webpack.config.js Split apart the frontend NgModule definition and the App component, t… Dec 31, 2016
webpack.test.bootstrap.ts - clean up unnecessary dependencies from package.json. Nov 24, 2015
webpack.test.config.js Massive refactoring of entire backend and most of the frontend (#546) Aug 25, 2016
webpack.vendor.ts Refactor the rendering of providers so that they match the rest of Au… Dec 30, 2016

README.md

Augury

Circle CI Slack Status Stories in Ready

Augury is a Google Chrome Dev Tools extension for debugging Angular 2 applications. You can install the extension from Chrome Store.

Once the extenion is installed you can test it against the demo application https://augury.angular.io/demo/

Screenshot of Augury

Supported Version

Currently works with applications built in Angular 2.0.0 using the Angular Component Router version 3.0.0-beta.2.

To view the router graph inject the Router in the application root component as shown below (it must be named router exactly).

export default class KitchenSink {
  constructor(private router: Router) {
  }
}

Example

Support for AoT (Ahead-Of-Time) Compilation

In order for Angular to expose the debug information for AoT applications, you will have to explicitly set the debug flag to true in your project's tsconfig.json as such:

"angularCompilerOptions": {
  /* ... */
  "debug": true
}

Note that this debug flag and development mode in Angular runtime are two completely different settings.

To learn more about AoT compilation, visit this section of Angular documentation.

Support for enableDebugTools()

Prior to Angular 2.2.0, enableDebugTools() would clobber ng.probe, which breaks Augury. Prior to that version, this workaround will circumvent the issue.

Development Environment

To develop this extension, the following environment is used:

  • Node 4.2.3
  • NPM 3.5.3
  • TypeScript 1.8.9
  • typings 1.3.2

Installation

Pre-packaged

Building & installing locally

  1. Clone this repository: git clone git://github.com/rangle/augury.
  2. Run npm install.
  3. Run npm run dev-build.
  4. Navigate to chrome://extensions and enable Developer Mode.
  5. Choose "Load unpacked extension".
  6. In the dialog, open the directory you just cloned.

Try out the extension with one of our example applications.

Running Tests

To execute all unit tests, run npm test. It bundles up all files that match *.test.ts into build/test.js, then runs it through tape-run in a headless Electron browser.

Available NPM Scripts

  • build Build the extension
  • webpack Run webpack
  • clean Clean node_modules and typings,
  • postinstall install typings
  • start Clean build and run webpack in watch mode
  • test Bundle all *.test.ts and run it through a headless browser
  • prepack Run npm build before running npm pack
  • pack Packages the extension and create chrome build augury.crx

Examples

Issues

Known Issues

We are using GitHub Issues for our public bugs. We will keep track on this and will to make it clear when we have an internal fix in progress. Before filing a new task, try to make sure your problem doesn't already exist.

Reporting Issues

The best way to get a bug fixed is to provide a test case with either one of the example apps bundled in the repo, or by making your own Angular 2.0 application illustrating the reduced use case.

Contributing

If you'd like to help out, please read our Contributing Guidelines. You might want to first checkout the Architecture of this extension.

Join Our Slack Team

If you want to contribute or need help getting started, join us on Slack.

License

MIT