Over a million developers have joined DZone.

Augury: An Elegant Tool For Inspecting Angular 2 Applications

DZone's Guide to

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
Free Resource

Get deep insight into Node.js applications with real-time metrics, CPU profiling, and heap snapshots with N|Solid from NodeSource. Learn more.

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.  

Node.js application metrics sent directly to any statsd-compliant system. Get N|Solid

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.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}