Augury is a browser extension designed to enhance the development and debugging experience for Angular applications. Developed by Rangle.io, Augury provides a set of tools and visualizations within the Chrome and Firefox DevTools to help developers understand, inspect, and debug their Angular applications more effectively. It offers insights into the component tree, state management, and performance characteristics.
Key features of Augury
1. Component Tree
Augury provides a visual representation of the component tree, helping developers understand the hierarchy and relationships between components. This can be particularly useful for large and complex Angular applications.
2. Component State
You can inspect the state of components and services in real time using Augury. This allows developers to observe the current state of their application during development and debug state-related issues.
3. Dependency Injection
Augury provides a visual representation of Angular's dependency injection system. Developers can inspect the dependencies injected into components and services, aiding in understanding the structure of the application.
4. Router Tree
Augury includes a router tree visualization, which helps developers understand the navigation flow and routing structure of their Angular application.
5. Performance Profiler
Augury offers a performance profiler that can be used to identify performance bottlenecks and analyze change detection cycles within the application.
6. NgRx Support
For applications using NgRx for state management, Augury provides support for inspecting NgRx stores, actions, and effects.
How to Use Augury?
-
Installation
- Install Augury from the Chrome Web Store for Google Chrome.
- Install Augury from the Firefox Add-ons for Mozilla Firefox.
-
Open DevTools
- After installation, open Chrome DevTools (F12) or Firefox Developer Tools.
-
Navigate to the Augury Tab
- Augury should add an "Augury" tab to your DevTools. Navigate to this tab to access the features provided by Augury.
-
Explore Features
- Use the various features provided by Augury to inspect your Angular application's components, state, dependency injection, and performance characteristics.
Augury is particularly beneficial for developers working on Angular projects, offering a set of tools that complement the native browser developer tools. It is important to note that tools and extensions, including Augury, may receive updates, so checking the official documentation for the latest features and compatibility is recommended.