Debugging Angular Apps With Angular Augury

0

I recently went on a hunt for angular 4 (formerly known as angular 2) debugging tools. Angular is a fantastic front-end framework but sometimes, the component hierarchy makes developers crazy. Fortunately, to help developers for debugging Google has provided a tool, Angular Augury.

Augury is a debugging and profiling tool created by Google and Range.io.

Introduction and Installation of Angular Augury

Angular Augury is inspection tool that comes as an extension in chrome browser. It helps developer community to debug and analysis the application while development.

Augury is easy to install. First install Augury Chrome Extension.

Once you installed it, you can able to see the Augury icon in your chrome browser.

Augury logo

The browser should have an Angular app running in debug mode (it doesn’t work in prod mode), the Augury will show you few features and helps you to analyze your application.

DevTools, the debug environment is opened using the following shortcut

  • For Windows and Linux, use Ctrl + Shift + I
  • For Mac OS X, use Cmd + Opt + I

Features of Angular Augury

I will go through the basic features provided by Augury to debug an Angular app with this article.

The Component Tree, basically shows a list of component belonging to the application.

Augury Component Tree

The Component Hierarchy, shows a hierarchical relations between the components. And when you select a particular component, it takes you deeper to present additional information about that component. You can click on property tab to view the additional info.

Augury Component Hierarchy Relations

The Injector graph, will help you find out the injected services to an application. Also, it will show the list of dependencies comes from.

Augury Injector Graph

Finally, the last major feature is Router Tree, that shows the overall routing information for running Angular application.

Augury Router Tree

Overall, Angular Augury makes developers life easy with Angular application.

By debugging the components, routing, and overall structures, we can get a high-level idea of application’s structure. Plus, the extra debugging will definitely help community to find and omit the unnecessary errors while development.

I have added this to my day2day Angular tools and I’d suggest you do the same.

I hope, now you guys have a basic idea of debugging angular apps using Angular Augury.

To implement Angular Augury, suggested visits,

BTW, which other tools you’re using or familiar to debug your Angular apps?

Leave a Reply

avatar
  Subscribe  
Notify of