10+ Angular 2 Chrome Browser Extensions

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!

1. Batarangle

Batarangle
Batarangle

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.

Site + Demo

2. Augury

Augury

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.

Site + Demo

3. Angular in Chrome

Angular in Chrome
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.

Site + Demo

4. ngBench

ngBench
ngBench

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.

Site + Demo

5. Mirage GUI

Mirage GUI
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.

Site + Demo

6. Angular Watchers

Angular Watchers
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.

Site + Demo

7. Angular Scope Inspector

Angular Scope Inspector
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).

Site + Demo

8. Angular BatScanner

Angular BatScanner
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.

Site + Demo

9. AngularJS Console

AngularJS Console
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.

Site + Demo

10. AngularJS Birbal

AngularJS Birbal
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 developer in understanding digest effect on app.

Site + Demo

Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

Leave a Reply

Your email address will not be published. Required fields are marked *