Extends the Developer Tools, adding tools for debugging and profiling Angular applications.
Augury is a Google Chrome Dev Tool extension for debugging and visualizing Angular applications at runtime. -- New in version 1.24.1 * Fixing AOT issue -- New in version 1.24.0 * Cannot read property 'nativeElement' of undefined * Update supported versions * Adding redirect to route path description * Adding try catch with workaround to solve bug * Sanity for AppRef.isStable observable * Update libraries & Compability * Define selectedComponentProperty in the way it could be redefined -- New in version 1.23.0 * Fix component info scrolling firefox * Handle string provider type in Description.getProviderDescription -- New in version 1.22.0 * Fixed issue with HMR enabled apps * Fixed issue with change detection parsing -- New in version 1.21.0 * Fix state now showing issues -- New in version 1.20.0 * Angular 7 support * Bump npm package versions -- New in version 1.19.0 * Highlighter/selection tool improvements * Bug fixes (angularJS hybrid app compatibility, component tree refreshing, and more state panel issues) -- New in version 1.18.0 * Fixes: - States not showing up for some components (there might be still some edge cases out there that cause this issue, but all known occurrences are fixed for). - Page slowing down to a freeze due to interaction between Augury and other extensions (notably Redux DevTools) - Angular JIT compiler error due to reflect-metadata. (reflect-metadata is no longer included in the Augury build) * Tweaks: - "loading" / "no state to show" messages during component state inspection -- New in version 1.16.2 * General updates and bug fixes. -- New in version 1.15.0 * Support for Angular 5 -- New in version 1.14.0 * Add some more analytics events. * Update typescript and loaders. * Add inspected app Angular version to UI. * Add AoT info to architecture doc. * Fix issue with build script not cleaning build directory. * Fix promise issue with `reconnect()` within `connection.send()`. * Fix issue with `SelectComponent` being called with null component tree. * Suppress TypeError when `rootComponentType` is null. * Suppress TypeError when provider is null for any reason. * Improve reported error details when error occurs in `remoteExecute`. -- New in version 1.13.0 * Fix issue with GTM initializing in user app context. * Add `white-space: nowrap;` to tab menu items. -- New in version 1.12.0 * Fix undefined ref error in dependency-info. * Add `isAngular` and `isDebug` checks to backend script reinitialization. * Stop catching user app errors after property change. * Check for bootstrap module existence during NgModule parsing. -- New in version 1.11.0 * Add analytics. -- New in version 1.10.0 * Add Augury release version to sentry error reports. * Parse Angular version when possible and add to sentry error reports. -- New in version 1.9.0 * Fix another issue with prod mode checking in some Angular versions. * Stop catching errors that happen in the inspected app after emitting value. * Don't try to parse child iframes within inspected app. * Improve NgModule config resolution to avoid undefined reference errors. -- New in version 1.8.0 * Improve production mode and Angular framework checks. * Fixed error message colour in dark mode. * Removed "Angular 2" references from projects. * Fixed broken "Self Provided" in dependency graph. * Fixed empty space under router tree. * Changed `$a` to `$$el` to avoid conflicts. * Improve UI resizing on Augury tab change. * Add error reporting. * Add click & drag vertical resizing to router panel. -- New in version 1.7.0 * Removed unnecessary Chrome extension permissions (`<all_urls>` & `tabs`). * Switched from npm to yarn. -- New in version 1.6.0 * Fix issue with state discrepancy after property change. * Fix another serialization bug. -- New in version 1.5.0 * Fix buggy serialization of maps and arrays. * Update to work with changes in non-public Angular APIs. * Add descriptive attributes to form elements in component tree. * Fix error message not persisting on Augury close/open. -- New in version 1.4.0 * Fix security issue with malicious message sources. * Fixed empty routes on Augury reopen. * Add "not Angular 2" message. -- New in version 1.3.0 * Fix for Chrome popup icons. * Added Github issue report generation to Chrome popup. * Add "no routes" message. * Removed last of example applications from this repo. * Added support for lazy loaded NgModules. * Fixed exception arising from empty modules config. * Added router-outlet "name" attribute to component tree view. -- New in version 1.2.12 * Hotfix for empty (root only) routers. -- New in version 1.2.11 * Remove "Properties" accordion. * Fix route data parsing. * Fix nested route paths. * Improve router tree style in dark mode. * Improve indenting in object accordions. * Fix issue with no-arg NgModules. * Add issue reporting links. * Add support for `@Inject` decorated constructor injection. * Fix incorrect component order in "Hybrid" component tree mode. -- New in version 1.2.10 * Fix issue with NgModule references in injector graph. -- New in version 1.2.9 * Fix injecting router breaking component state. * Fix for string based providers in NgModule parsing. -- New in version 1.2.8 * Automatically resolve router when possible. * Add NgModules tab feature. * Add NgModule context to Components and Injectables in Injector Graph. * Improve frontend module/app declaration & fix swallowed keypresses in component tree. * Improve styling of instance properties and make them editable. -- New in version 1.2.7 * Fixed/improved injector graph to show just injected providers and their provider origin. -- New in version 1.2.6 * Added mouse selection and hover highlighting of dom elements. * Updated architecture overview image. * Minor code optimizations. * Added more complete provider descriptions for non-components. * Fixed issue with breadcrumb link in the injector graph. * Fixed issue with dependency origin in injector graph and added support for `@SkipSelf`. * Optimized redundant posting out of message queue logic. * Added first of new example apps (Input/Output demo). * Added safeguards to Router resolution. -- New in version 1.2.5 * Update kitcken sink example app to Angular 2.2.0. * Resolve conflict with Jira boards. * Remove Angular core dependency from backend bundle. -- New in version 1.2.4 * Add new support for decorators: @ViewChild, @ViewChildren, @ContentChild, and @ContentChildren. Now we display these decorators, along with the type selector information, in the UI. * Add proper type information to State panel view. Instead of displaying "Object", for example, we display the real type of that object, for example "NgModuleLoader". We do this by retaining the type information across serialization. (Objects are serialized in the backend and then transmitted to the frontend, and the type information was being lost during this process. Now it is retained.) * Refactor the decorator metadata system so that it works for nested objects. In 1.2.3, if you have a @ViewChild(Foo) reference on your component, and you expand that object in the State view, any @Input() or @Output() decorators on the "Foo" object are now displayed in the UI. (Previously decorator metadata was only generated for toplevel components.) * Resolve display issue that prevented pages containing multiple Angular applications from working properly. Now if you have multiple Angular root components on your page, you will be able to see both of them in the "Component Tree" tab. -- New in version 1.2.3 * Add AoT compilation section to readme. * Make sure events emitted form Augury are run in an NgZone as expected. -- New in version 1.2.2 * Changes to OnPush components in the state editor are now reflected immediately in the app. * Resolve performance issue due to bug in which JSON patch library is not able to compare undefined values. * Resolve issue where some ES6 shims conflict with Augury (asana.com). * Router tree now supports lazy loaded modules. * $a is now defined as a warning message in the extension context. -- New in version 1.2.0 * Augury now inspects applications built on Angular 2.0.0; we no longer support debugging applications built with rc.6 and earlier, though Augury may still work to a limited extent with such applications. * The Injector Graph and the Router Tree have been polished and refined. * Augury now filters normal HTML elements out of the Injector Graph. * You can now navigate the Component Tree with your keyboard. -- New in version 1.1.3 * Resolve another endless-flicker issue caused by providers with undefined keys -- New in version 1.1.2 * Resolve a bug that caused an internal communication pipe to become clogged with empty tree diff messages, which in turn caused UI latency * Resolve an issue with @Input() decoration not appearing in the "State" panel in some cases -- New in version 1.1.1 * Assorted style fixes. * All-new "expand all" (Command/Ctrl-Click) and "collapse all" (Alt-Click) functionality in the Component Tree. * Fix flickering update issue and lodash name collision issue. * Fix recursive serialization issue. * Remember expand actions in "State" view between component selection changes. -- New in version 1.1.0 * Remove support for the deprecated router. * Move @Output and @Input info to the state editor. * Display the state editor tree collapsed by default. * Major performance improvements and bug fixes. * Visual and usability improvements. -- New in version 1.0.5 * Performance improvements and bug fixes. -- New in version 1.0.4 * Update Augury to Angular 2.0.0-rc.4. * Included support for the **Component Router**, while retaining support for deprecated router. * Fix a bug where inputs and outputs where not shown when @Input/@Output were being used. * Fix a bug where theme menu did not match current theme. -- New in version 1.0.3 * Augury supports projects written in Angular 2.0.0-rc.3. * Update Augury to Angular 2.0.0-rc.3. * Fix a bug where graph colors in "Router Tree" where not matching the dark theme.
- (2020-07-10) 刘顺顺: 太棒了
- (2020-07-09) Moodi Alv: Terrible!
- (2020-07-06) Jason Zhang: Not working and a lot of bugs. It can't check the state of component. I can't believe Angular doesn't has an usable extension! Bad development experience, ready to back to React.
- (2020-07-03) Vladimir Volodin: It's a completely useless extension with a misleading description. Says it helps to profile and debug performance of Angular applications. None of the guides mention anything about doing it. There's literally no functionality than showing the 'hierarchy' of the components, which barely works with Angular 9.
- (2020-07-01) Mohammad Shoeb: Not working with Angular 9 in chrome
- (2020-06-24) Иван Загайнов: Иногда начинает бесконечно перезагружаться и съедает всю память. Разметка кривая, функционал слабый (в сравнении с vue.js devtools - очень мощный инструмент, весьма помогает в разработке)
- (2020-04-02) Nikola Grancharov: I have tested this with 3 different angular applications on several computers, and it constantly crashes and barely works. When it works, it is great tool, but the performance and stability are terrible. Maybe it is fine for small angular apps, but for a large one, it is useless.
- (2020-03-26) Marek Michalski: Not working at all. Always showing "This application is not an Angular application.This application cannot be inspected using Augury."
- (2020-03-10) Xiaomin Yu: Completely not working on Angular 9 app.
- (2020-01-17) Raymond Murray: Useful but poor to use. Crashes often and doesn't pick up on component changes. Wouldn't use if there was an alternative
- (2019-12-14) Xydez: Extremely buggy and slow. Lacks lots of features. You can't even add an element to an array in the inspector.
- (2019-12-11) Тимур Лолаев: Не обновляется состояние компонента и набор компонентов при смене маршрута
- (2019-11-22) Nikolai Adamovich: При перезагрузке страницы намертво зависает.
- (2019-10-31) Eric To: Started off pretty good, but then later on found that it does tons of recusrive calls inside backend.js?? (which causes insane lags...) This extensions only works when you run in Angular DevMode and when you have Developer tools opens and Angury running, it becomes impossible to use for development.
- (2019-10-23) Simon Mathewson: Great features, but it makes chrome crash.
- (2019-10-20) Zoltan Debre: Unfortunately, Augury doesn't work with latest Angular applications. I suppose the company behind this extension is busy with other projects. For this reason we, the developer community, happy to give a hand and contribute to update this useful plugin. Let's go to the repo, fork it and open a PR. ;)
- (2019-10-11) Zhu Yancheng: totally useless tool compare to vue-devtool and react dev tool. full of bugs and performance issues either, this is one of many reasons why people don't like angular.
- (2019-09-09) Erik Stefan Haglund: Angular 8.1. Extension version 1.23.0. Getting "No state to show" on almost every component, rendering the whole thing quite useless. Often it stops updating the app tree, so on page changes the new components are not reflected in the dev panel. Using the select tool to pick a component *also* clicks on the page, which can cause navigation and other side effects to happen, once more making it useless. When highlighting a component in the tree, its location on the page is not properly visualized, either rendering at the wrong size or the wrong location, or both. Useless again. I wish I could just use the React dev tools ;|
- (2019-08-23) James Blackmer: The extension is almost useless as it sits. I can see the component tree, router tree, but if I attempt to view component state Augury flips out with errors; even their own samples are broken with missing dependencies. Using Angular 8.x, Angular Material 8.x, and NgRx 8.x
- (2019-08-16) Kévin Drapel: Is working to some extent, my direct comparison is Snoop for WPF. Things that do not work well: selection, refresh of bound values. Definitely need some polish.
- (2019-08-02) Eric Sigurdson: Used to work great - no longer seems to work at all even with fresh app from cli. Various tweaks around the web don't seem to help. ಥ_ಥ
- (2019-08-01) David Ziegler: Does nothing on Angular 8, so it's completely unhelpful to me.
- (2019-07-21) Oguz Ildiran: THE BEST SUPER
- (2019-07-18) Richard Treitel: Functionality is truly nifty. But my app has some hundreds of components (thanks to a table with many rows in it) and Augury slows down terribly: a click on the Component Tree can take over ten seconds to be processed and show that little blue indicator in the app's page. Please see if you can jazz it up. BTW, I'm on ng6.
- (2019-07-12) Sagar Pawar: extension not working with angular 6. very unstable makes chrome hang
- (2020-07-13, v:1.25.2) Abdeladhim Abbassi: Injector Graph
Hi, I don't see Injector Graph, Router tree and NgModules tabs in my augury console. Thanx.
- (2019-10-01, v:1.23.0) Kader Mohideen Fasid: Component doesn't update until unless I change the Theme (switch from Light to Dark or viceversa)
We run a Hybrid Angular App (that's right, AngularJS and AngularX), The whole app is powered by angular-cli. So, we now have a handle full of components that are written in AngularX. As I navigate through our application the component list from the component Tree tab doesn't update. But If I change the Theme (light to dark or viceversa) the component list then updates.
- (2019-09-02, v:1.23.0) Milad Jafari: i have the same error.
i have the same error.
- (2019-07-14, v:1.23.0) Yunfei Li: Latest Angular 8.1, can not use Augury.
TypeError: Reflect.getMetadata is not a function at l (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:31:44797) at x (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:31:46046) at Object.e.parseModulesFromRootElement (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:31:44352) at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:31:261858 at M (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:31:260124) at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:31:261814 at ZoneDelegate.invoke (http://localhost:4200/polyfills.js:368:26) at Zone.run (http://localhost:4200/polyfills.js:133:43) at http://localhost:4200/polyfills.js:864:36 at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:400:31)
- (2019-05-01, v:1.23.0) Ronald D'Souza: Router tree not scrollable
Router tree not scrollable. Its sad to see this is still not fixed.
- (2019-03-27, v:1.22.0) Cannot scroll down in Properties tab
Is it normal that I can not scroll down in Properties > State tab (using Mac 10.14.3 , Chrome 73.0.3683.86 , Angury 7.2.10)
- (2019-03-12, v:1.22.0) Daphné DC: Component Tree Broken
Hi fellow dev, I am trying to use the Component Tree in a Angular v.7 application. The Component Tree is broken, the page is empty and I get this error : content-script.js:24 Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Window': An object could not be cloned. at Object.t.messageJumpContext (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/content-script.js:24:9921) at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/content-script.js:24:8583 t.messageJumpContext @ content-script.js:24 (anonymous) @ content-script.js:24 3vendor.js?v=RHCj5iQZoTnLl4SiFiK5RuIxxkJCYrT6nVgv7_Xp6Qo:2216 Unhandled Promise rejection: Cannot read property '__source' of null ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property '__source' of null Can you tell me how to make Component Tree work ? I tried to de install and re install it. Thank you !!!
- (2019-02-21, v:1.22.0) Errors every Webapp
Errors appear everytime i open a webapp: Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Window': An object could not be cloned. at Object.t.messageJumpContext (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/content-script.js:24:9921) at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/content-script.js:24:8583 t.messageJumpContext @ content-script.js:24 (anonymous) @ content-script.js:24
- (2019-01-24, v:1.22.0) Dinesh EPDV: Why i get an error like this when i debugging an angularjs (v1.4) ?
This application is not an Angular application. This application cannot be inspected using Augury.
- (2019-01-12, v:1.22.0) Dragana Ilievska: can't add to chrome
I get this error all the time : " An error has occurred Could not move extension directory into profile. " Help?
- (2018-08-14, v:1.19.1) Eyoel Wendwosen Feleke: Angular >4
Is Angular 6 Supported???
- (2018-08-08, v:1.19.1) Arun K S: Its too slow
After clicking component it is too much time to respond