Everybody uses Chrome these days, well at least all web developers do and for one simple reason… it’s the best modern web browser. In order for us to fully utilize Chrome (without using Canary or flags) we can take advance of some awesome Angular 2 Chrome Browser Extensions that enable us to do some really cool things when developing our web apps using Angular and Chrome. Enjoy!
When debugging your Angular 2 app, you don’t want to find yourself without tool support. In partnership with AngularJS core team, Rangle.io has created Batarangle. A Google Chrome Dev Tools extention for debugging Angular 2 applications.
Augury is a Google Chrome Dev Tool extension for debugging and visualizing Angular applications at runtime. Extends the Developer Tools, adding tools for debugging and profiling Angular applications.
3. Angular in Chrome
Angular 2 Tour of Heroes implemented as a Chrome extension with hot module reload capability. A template for developing Angular 2 applications offline without firing a local server instance. A proof of concept Google Chrome extension for Angular 2 development that bypasses common file restrictions when not running in a web server.
An experimental extension that injects benchmarking techniques into your AngularJS file. This tool lets you see which expressions are being called the most, how much time they are taking, and what functions they are firing.
5. Mirage GUI
Mirage is an in-browser IDE for exploring Elasticsearch queries, compatible with both ES v2.x and 5.x APIs. Mirage is packaged as a web GUI with scaffolding blocks for on the fly query transpilation into Elasticsearch’s JSON based query DSL.
6. 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 increase performance and debugging as well.
7. Angular Scope Inspector
Angular scope inspector helps you see the scope when you select an element using the Element Inspector or the Elements tab in the Developer Toolbar. This tool will show you if the element’s scope is isolated, inherited from a parent element, It shows the controller that is above that scope and has a view to see only your scope property (it actually filters any scope attribute that starts with dollar sign).
8. 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.
9. AngularJS Console
AngularJS Console is a dedicated console extension for chrome dev tools which allows developers to write AngularJS code without the trouble of going through modules. It allows you to quickly debug and test code that interacts with angular modules.
10. AngularJS Birbal
Angular app analysis – performance and structure dependency through Birbal eye. Mock Http gives the ability to remove server dependency of HTTP calls. It uses angular mock. Furthermore, it gives advanced details of digest and watchers with filter and sort features for debugging app performance. Gives control to the developer in understanding digest effect on the app.