# augury-extension > Chrome Developer Tools Extension for inspecting Angular 2.0 applications Latest version **1.14.0** (published 2017-06-21) · MIT license · 0 weekly downloads ## Install ```sh npm install augury-extension pnpm add augury-extension yarn add augury-extension bun add augury-extension ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.14.0 | | Published | 2017-06-21 | | First published | 2017-06-21 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >= 4.2.3 < 6 | | Dependencies | 26 | | Known vulnerabilities | 0 (+21 in 4 direct dependencies) | | Install scripts | no | | GitHub stars | 1990 | | Maintainers | zoharyosef1 | | Keywords | angular, angularjs, chrome, extension | ## Links - npm: https://www.npmjs.com/package/augury-extension - Repository: https://github.com/rangle/augury - Issues: https://github.com/rangle/augury/issues - npm.io page: https://npm.io/package/augury-extension ## Dependencies (26) - [d3](https://npm.io/package/d3.md) 4.5.0 - [rxjs](https://npm.io/package/rxjs.md) 5.3.0 - [ramda](https://npm.io/package/ramda.md) 0.24.1 - [redux](https://npm.io/package/redux.md) 3.6.0 - [crypto](https://npm.io/package/crypto.md) 0.0.3 - [basscss](https://npm.io/package/basscss.md) 7.1.1 - [core-js](https://npm.io/package/core-js.md) 2.2.2 - [zone.js](https://npm.io/package/zone.js.md) 0.8.4 - [cross-env](https://npm.io/package/cross-env.md) 3.1.4 - [immutable](https://npm.io/package/immutable.md) 3.7.6 - [redux-logger](https://npm.io/package/redux-logger.md) 3.0.6 - [@angular/core](https://npm.io/package/@angular/core.md) 4.1.3 - [@angular/http](https://npm.io/package/@angular/http.md) 4.1.3 - [expose-loader](https://npm.io/package/expose-loader.md) 0.7.1 - [@angular/forms](https://npm.io/package/@angular/forms.md) 4.1.3 - [@angular/common](https://npm.io/package/@angular/common.md) 4.1.3 - [@angular/router](https://npm.io/package/@angular/router.md) 4.1.3 - [redux-observable](https://npm.io/package/redux-observable.md) 0.14.1 - [@angular/compiler](https://npm.io/package/@angular/compiler.md) 4.1.3 - [basscss-type-scale](https://npm.io/package/basscss-type-scale.md) 1.0.5 - [basscss-typography](https://npm.io/package/basscss-typography.md) 3.0.3 - [@types/redux-logger](https://npm.io/package/@types/redux-logger.md) 3.0.0 - [@angular-redux/store](https://npm.io/package/@angular-redux/store.md) 6.4.1 - [basscss-border-colors](https://npm.io/package/basscss-border-colors.md) 2.1.0 - [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) 4.1.3 - [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) 4.1.3 ## Recent versions - 1.14.0 (latest) — 2017-06-21 ## README # Augury [![Circle CI](https://circleci.com/gh/rangle/augury.svg?style=svg)](https://circleci.com/gh/rangle/augury) [![Slack Status](https://augury-slack.herokuapp.com/badge.svg)](https://augury-slack.herokuapp.com) [![Stories in Ready](https://badge.waffle.io/rangle/augury.svg?label=ready&title=Ready)](https://waffle.io/rangle/augury) ## Table of content 1. [Introduction](#introduction) 1. [Supported version](#supported-version) 1. [Working on Augury](#working-on-augury) 1. [Building and installing locally](#building-and-installing-locally) 1. [Supported version](#supported-version) 1. [Working on Augury](#working-on-augury) 1. [Running tests](#running-tests) 1. [Reporting issues](#reporting-issues) 1. [Contributing](#contributing) 1. [Known issues](#known-issues) ## Introduction [Augury](https://augury.angular.io/) is a Google Chrome Dev Tools extension for debugging Angular 2+ applications. You can install the extension from [Chrome Store](https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd). ## 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 * Yarn * NPM * TypeScript ### Building and installing locally ```bash git clone git://github.com/rangle/augury cd augury yarn npm run dev-build ``` 1. Navigate to chrome://extensions and enable Developer mode. 1. Choose "Load unpacked extension". 1. In the dialog, open the directory you just cloned. Try out the extension with one of the example app from the [Guide](https://augury.angular.io/pages/guides/). ### 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|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 ## 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](images/augury-popup-icon.png) ## Contributing ### General guidelines If you'd like to help out, please read our [Contributing Guidelines](https://augury.angular.io/pages/guides/contribute.html). ### Augury Architecture You might want to first checkout the [Architecture of this extension](https://augury.angular.io/pages/guides/architecture.html). ### Join on Slack If you want to contribute or need help getting started, [join us on Slack](https://augury-slack.herokuapp.com). --- # 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). ```js export default class KitchenSink { constructor(private router: Router) { } } ``` [Example code](https://github.com/rangle/augury/blob/dev/example-apps/kitchen-sink-example/source/containers/kitchen-sink.ts#L75) ## 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: ```json "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](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html). ## Support for `enableDebugTools()` Prior to [Angular 2.2.0](https://github.com/angular/angular/blob/master/CHANGELOG.md#220-upgrade-firebooster-2016-11-14), `enableDebugTools()` would clobber `ng.probe`, which breaks Augury. Prior to that version, [this workaround](https://github.com/AngularClass/angular2-webpack-starter/blob/dbb7d10e6e84b8e88116d957f0047b422ab807c1/src/app/environment.ts#L28...L36) will circumvent the issue. ### License [MIT](LICENSE) --- _Source: https://npm.io/package/augury-extension · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._