Hi, Today, I am going to share some of the most useful Chrome extension tools, used for developing and debugging Angular apps. Here are the list of all Chrome extensions.
1) Augury
Augury is an application inspection tool for Angular that runs in the Web browser. It runs as a Chrome browser extension for the Developer Tools (DevTools) panel, aiding in analysis and debugging during development.
Augury provides insight into the application structure for an Angular application and the relationship between these building blocks:
- Components
- Services
- Routes
- Modules
- Dependencies
- Injectors
- Data bindings
- Events
- Object properties
Augury compliments DevTools during a debugging session, making it easy to modify state and emit events.
Click the below link to install Augury.
2) Redux DevTools Extension
Redux DevTools for debugging application’s state changes.
If you are using Redux to manage your application state, there is a Chrome extension called Redux DevTools which lets us see all the actions dispatched, state of the application after each action and the difference in states.
It also gives us the ability to rewind the actions and see the corresponding changes on the page.
Redux DevTools needs a bit of setup to be used in Dev environments but once setup, it is well worth the effort. Check out this blog to find out about how to use it in Production. It is recommended that the full-featured version be used for development and the restricted one for production.
Click the below link to install this extension.
3) Angular state inspector
Helps you debug Angular component state, inside the Elements tab of the DevTools.
A Chrome extension that lets you inspect the state of components. The extension works even with the hybrid application with UpgradeModule. So it can show state from angular 2+ and scope from AngularJs.
Click the below link to install this chrome extension.
4) AngularJS Inspect Watchers
Inspect the scope watchers of an Angular app
A Chrome extension that lets the user inspect the number of Angular watchers that exist on any element of an Angular app. Once installed, navigate to your Angular app and click the Page Action in the address bar to activate the extension. Then, hover your mouse over different sections of your Angular application to see the scopes and watchers highlighted in red. Click the Page Action again to deactivate.
Click the below link to install this chrome extension.
5) Angular watchers
Angular watchers is the ultimate AngularJS tool which tells you how many active watchers you currently have. It automatically updates so you can see live how many watcher a page have. This is perfect to debug any performance issues.
Features
- Total number of watcher on the current page
- Difference from the last total number of watchers
- Visual graph that plots the number of watchers in time (max 25 plots)
- Choose Iframe where you want to count the watchers
- Expose Angular Modules in a global variable window.$$am
- Graph/Counter view toggle
- Dark/Light theme toggle
- Bootstrapped element input - in case your app is manually bootstrapped
Click the below link to install this chrome extension.
6) Angular BatScanner
Yet another Angular 2 devtool, Angular BatScanner is focus on performance analysis. Like debugging the performance bottleneck is hard. I made a tool to visualize what is happening for Angular when your application is running. It’s similar to Timeline Tool but using the Angular Component vocabulary. By hooking into the components life cycle system we can quickly explore a record to answer :
- when, where and why a change happened -
how often it’s changed -
how much time a components took to react to it -
etc…
Click the below link to install this chrome extension.
7) ng-inspect for AngularJS
Helps you in debugging AngularJS applications. Extends the elements panel in devtools to display scope properties.
ng-inspect helps you access properties of the element’s scope when an element is selected using the Element Inspector or the Elements tab in the Developer Toolbar in an Angular JS aplication.
This extension will provide access to scope, isolateScope[if the scope is isolated], rootScope, jQuery element and its events[if jQuery is included in the page].
These properties are made available to the Global/Window object via $s for scope, $is for isolateScope, $rs for rootScope, $el for jQuery element and $events for the events associated with the jQuery element.
Services/Factories/Constants can be tested/verified using $get function.
$count function prints number of Scopes, isolateScopes, listeners and watchers.
Click the below link to install this chrome extension.
8) AngularJS Inspector
Extends the Developer Tools, adding tools for debugging and profiling AngularJS applications. Based on AngularJS Batarang.
Extends the Developer Tools, adding tools for debugging and profiling AngularJS applications.
This extension is based on AngularJS Batarang which sadly had not been updated in approximately two years. For that reason, I’m trying to provide AngularJS programmers with a tool that will address the issues that currently exist and work towards making this even better!
Click the below link to install this chrome extension.
9) Angular Gauntlets
Angular Gauntlets helps you getting your hands dirty. This chrome extension makes the components and providers of your Angular application accessible on click on an element in the Chrome DevTools elements panel.
How to use
Gauntlets is light, based on ng.probe, loads instantly and does not need to switch to another tab of the Chrome DevTools.
Just click on a DOM element in the DevTools elements panel, type one of the following keywords in the console and here we go!
$component: click on a DOM element referring to an Angular component to access its instance and playing with it.$context: display a DOM element context, can be its parent Angular component, angForrow, etc.$scope: equals$componentonto Angular components or$contextonto child elements. The best alternative of AngularJS Batarang for Angular.$providers: get the list of the all the providers instantiated in your Angular app and play with them.$detectChanges(): triggers Angular change detection to get your changes apply.
Little extra: you can get a preview of all these info in the Angular tab of your DevTools elements panel. Switching between elements will refresh the data immediately.
Click the below link to install this chrome extension.
10) ng-detector
Detects AngularJS apps as you browse.
Adds a small AngularJS icon into the address bar when you come across a page that is built using AngularJS.
Mouse over the icon to see the Angular version info.
Click the below link to install this chrome extension.
I found one useful post related to debugging your angular app. Here is the link.
Chrome Extensions for Angular Apps
