We’re really excited to announce the launch of Batarang Chrome Extension For Angular, a new extension that makes debugging your Angular applications easier than ever before.
Batarang is a debugger for Chrome, Firefox and Safari that allows you to easily inspect and edit the DOM of any web page, quickly find and fix accessibility issues, see performance statistics for every element on the page, detect and report on CSS errors, and more.
With this new extension for Angular developers, you can now debug your Angular apps in much the same way as you would any other web app. You can set breakpoints wherever you want and step through your code line by line as it executes, just like with any other JavaScript debugging tool.
You can also inspect your application’s components for errors like missing dependencies or invalid data bindings—and even fix those problems right from within Batarang!

Batarang Chrome Extension For Angular
Batarangle
INSTALL
ANGULAR 2.0 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.
GETTING THE EXTENTION
After the Install go to Chrome Extensions chrome://extensions in the Chrome Browser
Drag and Drop the downloaded package to install the extension
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dui lectus, tempor vitae dignissim feugiat, hendrerit ullamcorper lectus.
– Brad Green (Engineering Director @ Google)
WHY USE BATARANGLE?
Visual Interface
Helps Angular 2.0 developers visualize the application through component trees, and visual debugging tools.
Open Source
Batarangle is an open source effort with Google and Rangle.io. You can contribute and fork the repo on GitHub.
Intuitive
By keeping in mind the exisiting Google Developer Tools you already love and use -It’s easy to get debugging.
Latest Version Support
Batarangle supports the latest Angular version. With rapid changes Batarangle strives to keep up to date and relevent.
MORE RESOURCES
Debugging Angular 2 Apps with Bataranglehttps://www.youtube.com/embed/UxjgUjVpe24
Brad Green’s Keynote at Angular Connect
View Batarangle on GitHub & Join the Discussion on Slack
Batarangle is in partnership with Google & Rangle.io
batarang chrome extension for angular application
C# Corner
Enroll Now: Full-Stack Blazor Dev
Become a member LoginPost Ask Question
C# Corner Search
TECHNOLOGIESANSWERSLEARNNEWSBLOGSVIDEOSINTERVIEW PREPBOOKSEVENTSTRAININGLIVEJOBSMORE
Angular
Getting Started With AngularJS Batarang
Guest User Guest User Updated date Jun 26, 2017
63.9k 1 3
facebook
twitter
linkedIn
Reddit
Expand
batarangCode.zip
Download Free .NET & JAVA Files API
AngularJS Batarang
I’m a big fan of debugging so I was interested in a tool for AngularJS. I found it and would like to share it among all of you. The tool is Batarang..
What Batarang is
Batarang adds debugging and profiling tools for AngularJS application to Chrome DevTools. Angular Batarang is a Chrome extension developed by the Angular team at Google that integrates very nicely as a debugging tool for Angular apps.
Install from Chrome Web Store
Visit the preceding URL and add to it tp Chrome as in the following:
AngularJS Batarang in Chrome Web Store
Run Batarang
Open your AngularJS application in Chrome
Go to Tools -> Developer Tools or press F12
You’ll find there is a new “AngularJS” tab.
AngularJS Tab in Batarang
Click the “Enable” checkbox.
For an explanation I’ve written a small application for you. The following are the files.
User.html
It has a TextBox that will accept a username as input and there is a button “Add Users” to add it. After the user is added it’ll be displayed immediately by ng-repeat.
Html Page in Batarang
App.js
$scope.users: array that contains a list of users
$scope.addUsers: function that adds a user into $scope.users
Js Page in Batarang
Batarang in Action
Models Tab
Type the user name, say ABC, and click “Scope (003)”. You’ll see the information in “Models for (003)”.
Models Tab in Batarang
Now click the “Add Users” button and “Scope (003)” is updated
Add Users in Models Tab
If you notice there is another “Scope (004)” element created. Click on that and it’ll show youthe following:
Scopes in Models Tab
This “u:ABC” is part of ng-repeat (refer to the user.html code).
Enable Inspector Button
Click “Enable Inspector” button, + sign and hover over element(s), it’s similar to the inspect element feature of the browser. You’ll notice pop-ups show up there itself.
Enabling Inspector Button
Performance Tab
Look at “Watch Tree”, for example, it’ll tell you which component/element is consuming how much time for execution
Permonance Tab in Batarang
Options Tab
You can see where in your page scope applies, click “Show Scopes” and similarly “Show Bindings” for details.
Operations Tab in Batarang
I hope you enjoyed reading about this awesome debugging tool Batarang.
Please share your feedback.
AngularJSAngularJS BatarangBatarang in AngularJS
Next Recommended Reading
Getting Started With AngularJS : Part 1
OUR BOOKS
Guest User Guest User Tech Writer
901.7k3
3 1
Type your comment here and press Enter Key (Minimum 10 characters)
Hamid Khan
Thanks
Feb 01, 2015Hamid Khan
323 7.3k 1.5m0 0Reply
FEATURED ARTICLES
Dynamic CSS Values In Blazor
Migrating a SQL IaaS Database To Azure SQL Using DMA (Data Migration Assistant)
Create a Redis Cache with Express Node JS
Symmetrical Repository Pattern – Data Access Made Easy In .NET
Saving And Fetching Data In CoreData
TRENDING UP
01 Azure Duration Functions – How To Use And Implement It
02 Creating Search Feature In Blazor Server Grid
03 Log Correlation In Microservices
04 How To Handle Nullable Reference In .NET 6
05 Rockin’ The Code World with dotNetDave ft. Steve Jones Ep. 53
06 Create A PowerApps Component Framework (PCFx ) Using Custom Code In PowerAPPs
07 Growth Mindset Show Ep. 11 – 2022
08 Import PowerApps Component Framework (PCFx ) Into Model Driven PowerApps
09 Safest Way To Convert String To Int In C#
10 Top Three VS Code Extensions Worth The Money
Learn Angular 8 In 25 Days
CHALLENGE YOURSELF
Angular 13
GET CERTIFIED
HTML5 Developer
About Us Contact Us Privacy Policy Terms Media Kit Sitemap Report a Bug FAQ Partners
C# Tutorials Common Interview Questions Stories Consultants Ideas Certifications
©2022 C# Corner. All contents are copyright of their authors.
Conclusion
Let us know your thoughts in the comment section below.
Check out other publications to gain access to more digital resources if you are just starting out with Flux Resource.
Also contact us today to optimize your business(s)/Brand(s) for Search Engines