TypeScript HTML CSS JavaScript Shell
Clone or download
Permalink
Failed to load latest commit information.
.github Release (1.16.0) (#1284) Apr 11, 2018
assets Release (1.16.2) (#1302) May 16, 2018
docs Update to latest release (1.14) from dev branch. Dev is still ahead a… Jan 4, 2018
images Release (1.16.0) (#1284) Apr 11, 2018
manifest Update base.manifest.json Jun 6, 2018
src Release 1.19.0 (#1314) Jun 6, 2018
.editorconfig Webpack Build Setup Oct 27, 2015
.gitignore Release (1.16.0) (#1284) Apr 11, 2018
.mention-bot Remove comments from mentionbot config Jan 24, 2017
CHANGELOG.md Merge branch 'master' of github.com:rangle/augury into dev Jun 6, 2018
CODE_OF_CONDUCT.md updating code of conduct and contributing files Apr 26, 2016
CONTRIBUTING.md Release (1.16.0) (#1284) Apr 11, 2018
LICENSE Documentation Oct 21, 2015
README.md Release (1.16.0) (#1284) Apr 11, 2018
build.config.js Release (1.16.2) (#1302) May 16, 2018
changelog-template.md Update changelog-template.md Apr 11, 2016
circle.yml Release (1.16.0) (#1284) Apr 11, 2018
crxmake.sh Release (1.16.2) (#1302) May 16, 2018
frontend.html It's just Angular May 24, 2017
index.html remove GA and implement GTM Jun 1, 2017
package-lock.json Release 1.18.0 (bug fixes and small tweaks) (#1309) May 24, 2018
package.json Update package.json Jun 6, 2018
popup.html Release (1.16.2) (#1302) May 16, 2018
popup.js Added mention of code snippets. (#963) Feb 10, 2017
postcss.config.js Release (1.16.2) (#1302) May 16, 2018
release-process.md Release (1.16.0) (#1284) Apr 11, 2018
s3-upload.sh renaming to augury Apr 21, 2016
tsconfig.json Release 1.19.0 (#1314) Jun 6, 2018
tslint.json Update to latest release (1.14) from dev branch. Dev is still ahead a… Jan 4, 2018
webpack.config.js Release 1.19.0 (#1314) Jun 6, 2018
webpack.test.bootstrap.ts Release (1.16.2) (#1302) May 16, 2018
webpack.test.config.js Release (1.16.2) (#1302) May 16, 2018

README.md

Augury

Circle CI Slack Status

Table of content

  1. Introduction
  2. Supported version
  3. Working on Augury
  4. Building and installing locally
  5. Supported version
  6. Working on Augury
  7. Running tests
  8. Reporting issues
  9. Contributing
  10. Known issues

Introduction

Augury is a Chrome & Firefox Developer Tools extension for debugging Angular 2+ applications.

You can install the extension from:

You may also install our Canary Build for Chrome to try out new features and bug fixes, and help us with user acceptance testing.

Inspecting Code

Augury only works with Angular 2+ applications. A hard requirement is that the Angular application is running in development mode, this is due to a security restriction. If you plan to read the original source code, it is a good idea to generate source maps. Otherwise you will be forced to work with the compiled JavaScript code.

Supported version

Augury works with application built starting with Angular 2+.


Working on Augury

Development environment

To develop the Augury extension, the following environment is used:

  • Node
  • NPM
  • TypeScript

Building and installing locally

git clone git://github.com/rangle/augury
cd augury
npm install
npm run dev-build

Try out the extension with one of the example app from the Guide.

Chrome

  1. Navigate to chrome://extensions and enable Developer mode.
  2. Choose "Load unpacked extension".
  3. In the dialog, open the directory you just cloned.

Firefox

  1. Navigate to about:debugging#addons to load add-on.
  2. Click Load Temporary Add-on
  3. In the dialog, open the directory you just cloned.

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

To see all available script type npm run in the terminal. The following command are the ones you will mostly be working with.

Command Description
start Clean build and run webpack in watch mode
webpack Runs webpack in watch mode
build Builds the extension
clean Clean the build directory,
test Bundle all *.test.ts and run it through a headless browser
lint Run tslint on all source code
pack Packages the extension for browser specific builds

Reporting issues

Please search to make sure your issue is not already been reported.

You should report an issue directly from Augury, by clicking on the Augury icon next to the address bar in the browser. It will open up a popup menu with a link to Issue reporting.

Image Issue reporting

Contributing

General guidelines

If you'd like to help out, please read our Contributing Guidelines.

Augury Architecture

You might want to first checkout the Architecture of this extension.

Join on Slack

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


Known issues

Router graph

The router injection technique described below applies to version before those listed below:

Angular v2.3.0
Angular Router v3.3.0
Augury v1.2.8

To be able to view the router graph, you will need to 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 code

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: 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.

License

MIT