Augury is a Google Chrome browser extension for inspecting Angular 2+ applications (https://augury.angular.io/). The tool visualizes the application through a component tree, router tree, module dependencies, and more. Developers immediately see the application structure, change detection, and other useful characteristics. They can explore relationships between several building blocks, such as components, services, routes, modules, injectors, and so on. Augury is interactive. It allows for modifying application states and emitting events.
Once the plugin has been successfully installed, you will see a new Augury tab in the Chrome Developer Tools (DevTools). Shortcuts for opening the DevTools: F12 (Windows), Command + Option + I (Mac).
There is another way to explore Angular 2+ applications. In the development mode, Angular exposes a global ng.probe function, which takes native DOM element and returns corresponding debug elements. With the debug element, you can inspect the current state of components, injectors, listeners, trigger events, and so on. The ng.probe function is accessible in the browser's console.
In this section, we will apply both Augury and ng.probe to the already known CRUD demo application from Chapter 9, Miscellaneous Use Cases and Best Practices.