Over a million developers have joined DZone.

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.

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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:

  • 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
To me, this is a no-brainer, must-have tool for existing and would-be Angular 2 developers. Install the extension, and then take it for a spin with the "kitchen sink" demo application hosted by the Augury team.  

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

components,directives,actions,tree,angular,real time

Published at DZone with permission of Brian Swartzfager, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}