- Introduction
- Supported version
- Working on Augury
- Building and installing locally
- Running tests
- Reporting issues
- Contributing
- Known issues
- Support for NgUpgrade
Augury is a Google Chrome Dev Tools extension for debugging Angular 2+ applications.
You can install the extension from Chrome Store.
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.
Augury supports all Angular versions back to v2.0.0.
To develop the Augury extension, the following environment is used:
- Node
- Yarn
- NPM
- TypeScript
git clone git://github.com/rangle/augury
cd augury
yarn
npm run dev-build- Navigate to chrome://extensions and enable Developer mode.
- Choose "Load unpacked extension".
- In the dialog, open the directory you just cloned.
Try out the extension with one of the example app from the Guide.
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.
To see all available script type npm run in the terminal. The following command are the ones you will mostly be working with.
| Command | Descrption |
|---|---|
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 |
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.
If you'd like to help out, please read our Contributing Guidelines.
You might want to first checkout the Architecture of this extension.
If you want to contribute or need help getting started, join us on Slack.
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) {
}
}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.
Caveat: The NgModules tab will not contain any data when using AoT. This is the expected behaviour for now.
Prior to Angular 2.2.0, enableDebugTools() would clobber ng.probe, which breaks Augury. Prior to that version, this workaround will circumvent the issue.
When upgrading AngularJS components for use within an Angular application, Augury works as expected. You will see the Angular component which wraps the AngularJS component, and you will be able to inspect the properties of the wrapping component.
Currently there is no support for using Augury in the opposite scenario (downgrading Angular components for use in an AngularJS application). There have been requests for this functionality, but supporting it would require an almost complete reimplementation of Augury's introspection mechanics which is not feasible at the moment. It is something we continue to consider though, as we understand it's the more common case for NgUpgrade.