{"id":13481877,"url":"https://github.com/rangle/augury","last_synced_at":"2025-10-01T23:30:38.287Z","repository":{"id":51665618,"uuid":"41743300","full_name":"rangle/augury","owner":"rangle","description":"Angular Debugging and Visualization Tools","archived":true,"fork":false,"pushed_at":"2021-09-10T17:24:57.000Z","size":8238,"stargazers_count":2006,"open_issues_count":80,"forks_count":216,"subscribers_count":67,"default_branch":"master","last_synced_at":"2024-11-11T21:52:26.053Z","etag":null,"topics":["angular","angular2","augury","debugging","devtools"],"latest_commit_sha":null,"homepage":"https://augury.rangle.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rangle.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-01T14:25:50.000Z","updated_at":"2024-10-29T16:52:59.000Z","dependencies_parsed_at":"2022-08-28T13:01:24.645Z","dependency_job_id":null,"html_url":"https://github.com/rangle/augury","commit_stats":null,"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rangle%2Faugury","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rangle%2Faugury/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rangle%2Faugury/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rangle%2Faugury/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rangle","download_url":"https://codeload.github.com/rangle/augury/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234909086,"owners_count":18905504,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","augury","debugging","devtools"],"created_at":"2024-07-31T17:00:57.032Z","updated_at":"2025-10-01T23:30:37.793Z","avatar_url":"https://github.com/rangle.png","language":"TypeScript","readme":"# Angular DevTools\nWith the release of Angular DevTools, Augury is not being maintained. Please download Angular DevTools from [Chrome Web Store](https://chrome.google.com/webstore/detail/angular-developer-tools/ienfalfjdbdpebioblfackkekamfmbnh) and use [rangle/angular-devtools](https://github.com/rangle/angular-devtools) repo to log any issues.\n\nRead More about the release:\n* [Introducing Angular DevTools](https://blog.angular.io/introducing-angular-devtools-2d59ff4cf62f)\n* [Introducing the New Angular DevTools](https://rangle.io/blog/angular-devtools)\n\n\n## Augury\n\n[![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)\n\n\u003e Check out the [Augury Labs](https://github.com/rangle/augury-labs) project for new experimental Angular developer tools.\n\n## Table of content\n\n1. [Introduction](#introduction)\n1. [Supported version](#supported-version)\n1. [Working on Augury](#working-on-augury)\n1. [Building and installing locally](#building-and-installing-locally)\n1. [Running tests](#running-tests)\n1. [Reporting issues](#reporting-issues)\n1. [Contributing](#contributing)\n1. [Known issues](#known-issues)\n\n## Introduction\n\n[Augury](https://augury.angular.io/) is a Chrome \u0026 Firefox Developer Tools extension for debugging Angular 2+ applications.\n\nYou can install the extension from:\n\n- [Chrome Store](https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd)\n- [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/angular-augury)\n\nYou may also install our [Canary Build](https://addons.mozilla.org/en-US/firefox/addon/angular-augury) for Chrome to try out new features and bug fixes, and help us with user acceptance testing.\n\n## Inspecting Code\n\nAugury 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.\n\n## Supported version\n\nAugury works with application built starting with Angular 2+. Augury currently does not have support for Angular Ivy as of `Augury v1`.\n\n---\n\n## Working on Augury\n\n### Development environment\n\nTo develop the Augury extension, the following environment is used:\n\n- Node\n- NPM\n- TypeScript\n\n### Building and installing locally\n\nTo install Augury locally, perform the following steps:\n\n```bash\ngit clone git://github.com/rangle/augury\ncd augury\nnpm install\nnpm run build:dev\n```\n\nTry out the extension with one of the example app from the [Guide](https://augury.angular.io/pages/guides/).\n\n#### Chrome\n\n1. Navigate to `chrome://extensions` and enable Developer mode.\n1. Choose \"Load unpacked extension\".\n1. In the dialog, open the directory you just cloned.\n\n#### Firefox\n\n1. Navigate to `about:debugging#addons` to load add-on.\n1. Click Load Temporary Add-on\n1. In the dialog, open the directory you just cloned, and select the `manifest.json` file.\n\n### Running tests\n\n#### Automated testing\n\nTo 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.\n\n#### Manual Testing\n\nIf you currently have the Augury extension installed from the Chrome Web Store or Firefox Add-ons, you can manually test your change by switching between your local dev production and production version of Augury in the extension window of your browser. Only one version of the tool should be active at a time.\n\n### Available NPM scripts\n\nTo see all available script type `npm run` in the terminal. The following command are the ones you will mostly be working with.\n\n| Command   | Description                                                 |\n| --------- | ----------------------------------------------------------- |\n| `start`   | Clean build and run webpack in watch mode                   |\n| `webpack` | Runs webpack in watch mode                                  |\n| `build`   | Builds the extension                                        |\n| `clean`   | Clean the `build` directory,                                |\n| `test`    | Bundle all \\*.test.ts and run it through a headless browser |\n| `lint`    | Run `tslint` on all source code                             |\n| `pack`    | Packages the extension for browser specific builds          |\n\n## Reporting issues\n\nPlease search to make sure your issue is not already been reported.\n\nYou 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.\n\n![Image Issue reporting](images/augury-popup-icon.png)\n\n## Contributing\n\n### General guidelines\n\nIf you'd like to help out, please read our [Contributing Guidelines](https://augury.angular.io/pages/guides/contribute.html).\n\n### Augury Architecture\n\nYou might want to first checkout the [Architecture of this extension](https://augury.angular.io/pages/guides/architecture.html).\n\n### Join on Slack\n\nIf you want to contribute or need help getting started, [join us on Slack](https://augury-slack.herokuapp.com).\n\n---\n\n# Known issues\n\n## Router graph\n\nThe router injection technique described below applies to version before those listed below:\n\n```\nAngular v2.3.0\nAngular Router v3.3.0\nAugury v1.2.8\n```\n\nTo 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).\n\n```js\nexport default class KitchenSink {\n  constructor(private router: Router) {\n  }\n}\n```\n\n[Example code](https://github.com/rangle/augury/blob/dev/example-apps/kitchen-sink-example/source/containers/kitchen-sink.ts#L75)\n\n## Support for AoT (Ahead-Of-Time) compilation\n\nIn 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:\n\n```json\n\"angularCompilerOptions\": {\n  /* ... */\n  \"debug\": true\n}\n```\n\n_Note_: This debug flag and `development mode` in Angular runtime are two completely different settings.\n\nTo learn more about AoT compilation, visit [this section of Angular documentation](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html).\n\n## Support for `enableDebugTools()`\n\nPrior 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.\n\n## `No state` for some components\n\nThe date polyfill `core-js/es6/date` can throw an exception when stringifying a component. To workaround this issue, exclude this polyfill in your development environment.\n\n### License\n\n[MIT](LICENSE)\n","funding_links":[],"categories":["TypeScript","Framework Developer Tools","Uncategorized","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frangle%2Faugury","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frangle%2Faugury","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frangle%2Faugury/lists"}