Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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.  

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
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 }}