- A "Component Tree" list of all of the Angular components and directives currently displayed on the pages. Actions taken on the page that alter the components included on the page or change the state of a component are highlighted and updated in the Component Tree in real time.
- A list of properties and providers associated with the selected component or directive in the Component Tree. For example, you could select a form input and see the current form control status values (dirty, pristine, valid, etc.)
- A "View Source" link associated with the selected component in the Component Tree, which when clicked will display the source code of the component's TypeScript file in the "Sources" tab of the Chrome Developers Tool.
- An Injector Graph that displays a diagram of the dependencies injected into the currently selected component.
- A Router Tree that displays a diagram of all of the routes defined in the application (using this feature does require injecting the Router in the root application component as explained on the Augury GitHub page).
- A search tool for locating a desired component or directive element.
- Related to this, Augury adds a custom identifier attribute to each component and directive it displays in the Component Tree, with the id value denoting where the item exists in the hierarchy and its place amongst its sibling elements, making it easy to find, say, link 5 out of 12 in ComponentX
Augury: An Elegant Tool For Inspecting Angular 2 Applications
Author Brian Swartzfager relays some info from the Adventures in Angular podcast about Augury saying ''this is a no-brainer, must-have tool for existing and would-be Angular 2 developers.'' Read on to hear about what it does.
Join the DZone community and get the full member experience.Join For Free
In episode 105 of the Adventures in Angular podcast, the panel spoke with one of the developers behind an open-source development tool called Augury. Augury is a Chrome extension that adds an "Augury" tab to the Chrome Development Tools panel, and that tab displays real-time information regarding Angular 2 activity on the current web page. This information includes:
Published at DZone with permission of Brian Swartzfager, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.