“When debugging, novices insert corrective code; experts remove defective code.” says, ANGULAR AUGURY

What is Angular Augury???

Augury, in general, is a sign of what will happen in the future. In the application point of view, Augury is an open source Chrome DevTool extension which is designed specifically for Angular applications to check for change detection in the code.

Why Angular Augury???

“You won’t believe how easy I can make your debugging.”

Augury provides rich debugging, analyzing and visualizing features for angular apps at runtime. It’s a purpose-built tool to help developers visually navigate the component tree, inspect the state of the router, and enable breakpoint debugging by source-mapping between the generated Javascript and the typescript code that the developer codes. This gives developers an insight into their application structure, change detection and performance characteristics.

Installation steps:

1) Go to the link https://chrome.google.com/webstore/search/augury?hl=en

2) Select Extensions from the left side panel and type “Augury” into the search field as shown below, and then press Enter.

Fig 1. Add Augury in extension

3) Now click on “ADD TO CHROME” for a Google Chrome Browser.

Fig 2. Augury Extension

4) Click on “ADD EXTENSION” to the popup opened to complete the installation process.

5) Once the installation is done, you can see Augury icon next to the address bar as shown.

Fig 3. Augury DevTool Extension

To understand Augury, first let’s have a gist of Notable items in Augury:

Fig 4
Fig 5

1) Augury — The tab added in the Devtool after installing angular augury.

2) Component Tree — It represents a set of hierarchical data in the form of arrows which users can expand and collapse.

3) Router Tree — This displays the routing information for the application.

4) NgModules — This gives a set of all the imports, exports, providers, declarations, ProvidersIndeclarations, etc of all the modules used in your application.

5) Angular Version — It gives the current version for your application.

6) Properties — This gives Component, Change Detection, State and dependencies information.

7) View Source — On clicking, it brings the Sources tab into focus and displays the source code of the component.

8) Change Detection — Displays whether there is any change in use for the component.

9) State — This gives all the object properties defined in the particular selected component in the Component Tree.

10) Dependencies — It lists all the dependencies used with respect to the component.

11) Injector Graph — It gives the component hierarchy and displays the dependencies of components and services.

Pipeline showing how any changes done by the user is executed at the browser:

Backend -> Content script -> Background channel -> Front end

1) Backend.ts — This integrates the angular application that is being inspected and does the following:

  • Queries Angular for the complete component tree.
  • Reads component instance state for individual components when they get selected.
  • Loads the router tree structure form Angular.
  • Highlights elements on mouseover of a component in the Component Tree view.

2) Content-Script.ts — This file uses a trick to inject code into the execution context so that we can do things like querying Angular for application state by using ng.probe().

3) Channel.ts — Augury uses a background script file by name Channel.ts to transmit small messages between backend and frontend execution contexts.

4) Frontend.ts — This includes the Component Tree, the Router Tree, the Component information panel and other elements.

A SAMPLE PROGRAM:

This sample program contains a navbar with three tabs which on click will route to their respective components.

Three components are:

  1. Augury Component — Displays a single line of Html.
Fig 6. Augury Component

2) Form Component — Shows a registration form which is implemented using validations.

Fig 8. Form Component

3) Data table Component — Displays sample table data for fields such as Name, Age, Email and City.

Fig 9. DataTable Component

Now to use Augury, follow any one of the below.

  1. Ctrl + Shift + I (in Windows and Linux)
  2. Cmd + Opt + I (for Mac OS X)
  3. Right click and click on Inspect Element.

After that, click on “Augury” tab which is displayed as shown in Fig 10.

Fig 10. Augury Tab

Now, select the Augury Component from Component Tree (Refer Fig 4). On the right side of the property tab (as in Fig 5), displays a single property “title” under State as shown in Fig 11. Augury allows the value of property “title” to be modified which is indicated with a dashed blue line at the bottom as in Fig 12.

Fig 11
Fig 12

Previously the title is “Angular Augury” (Fig 6). Now by using Augury, on changing the “title” to “Angular Augury latest version”, the same gets displayed on the browser (Fig 12).

Similarly, On clicking DataTable Component (Fig 9), we get the list of objects taken in the columns, where we can edit and run, like how we did for title property in AuguryComponent (Fig 6). On changing the values in the Data properties, the same gets replicated on the browser(Fig 12 & Fig 14). Let’s have a look!

Fig 13
Fig 14

Let’s have a look at the view of different items in Augury for the sample program.

Component Tree: Here I have clicked the DataTable Component and so the same component is displayed after the root component (Appcomponent).

Fig 15

Routing Tree: Gives the three components I have used.

Fig 16

NgModules: This gives all the information about imports, exports, providers, etc as mentioned in its definition.

Fig 17

Injector Graph: When I clicked on a particular component (Ex: Form Component here).

On clicking the Customize and Control option i.e, the three dots displayed at the right side of the Devtool, we have various options like below, where we can change the Component and elements which render the view as per our requirement.

Fig 18

Similarly, in the Injected Graph we can see how services are injected and linked, and which component is injecting the service. Also, Augury provides a better platform for code debugging. This concludes my blog on Augury, which is now a favorite for developers using Angular applications. For more, go through the website — https://augury.rangle.io.

Happy reading!

I hope my blog helps and now, what are your views on Augury??? Post your comments below.