Extends the Chrome Developer Tools, adding tools for debugging and profiling AngularJS applications.
Batarang is a Google Chrome application by Angular which can be used to debug, profile and develop AngularJS applications.
Questions tagged [batarang]
29 questions
28
votes
1 answer
AngularJS Batarang - What are interceptedExpressions?
I'm currently using the AngularJS 1.3.0 stable build and the Batarang Chrome extension. In the watch tree I notice that under many of my scopes there's something called "interceptedExpression". What is that or what scenarios create an…
mikelt21
- 2,728
- 4
- 23
- 33
15
votes
4 answers
batarang Chrome extension for AngularJS appears broken
(I added this post to a long series at Github of similar/recent experiences. I'm hoping someone here has an answer.)
Oh, good, I'm not just stoopid.
Trying to learn Angular on my own, from a book. When it calls out the use of batarang to show scope…
kzoom
- 241
- 1
- 2
- 12
8
votes
2 answers
Inspecting AngularJS scopes using the Batarang Chrome extension
I have an question about AngularJs scopes and especially the way those can be inspected with the Batarang Chrome extension.
I have the following html:
My…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/angularjs" class="post-tag grid--cell" title="show questions tagged 'angularjs'" rel="tag">angularjs</a>
<a href="../../questions/tagged/angularjs-directive" class="post-tag grid--cell" title="show questions tagged 'angularjs-directive'" rel="tag">angularjs-directive</a>
<a href="../../questions/tagged/angularjs-scope" class="post-tag grid--cell" title="show questions tagged 'angularjs-scope'" rel="tag">angularjs-scope</a>
<a href="../../questions/tagged/batarang" class="post-tag grid--cell" title="show questions tagged 'batarang'" rel="tag">batarang</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Mar 09 '14 at 14:10">asked Mar 09 '14 at 14:10</time>
<a href="../../users/536299/balteo" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/536299.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="balteo" />
</a>
<div class="s-user-card--info">
<a href="../../users/536299/balteo" class="s-user-card--link">balteo</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">23,602</li>
<li class="s-award-bling s-award-bling__gold" title="63 gold badges">63</li>
<li class="s-award-bling s-award-bling__silver" title="219 silver badges">219</li>
<li class="s-award-bling s-award-bling__bronze" title="412 bronze badges">412</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-21511487">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>7</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>2</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/21511487/angulardart-batarang-alternative" class="question-hyperlink">AngularDart Batarang alternative</a></h3>
<div class="excerpt">Do you know any good Angular.dart alternative for Angular.js Batarang? Would be much easier to debug scopes, bindings.
</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/angularjs" class="post-tag grid--cell" title="show questions tagged 'angularjs'" rel="tag">angularjs</a>
<a href="../../questions/tagged/dart" class="post-tag grid--cell" title="show questions tagged 'dart'" rel="tag">dart</a>
<a href="../../questions/tagged/angular-dart" class="post-tag grid--cell" title="show questions tagged 'angular-dart'" rel="tag">angular-dart</a>
<a href="../../questions/tagged/batarang" class="post-tag grid--cell" title="show questions tagged 'batarang'" rel="tag">batarang</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Feb 02 '14 at 14:06">asked Feb 02 '14 at 14:06</time>
<a href="../../users/1669762/gabor-orosz" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/1669762.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="gabor.orosz" />
</a>
<div class="s-user-card--info">
<a href="../../users/1669762/gabor-orosz" class="s-user-card--link">gabor.orosz</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">433</li>
<li class="s-award-bling s-award-bling__silver" title="8 silver badges">8</li>
<li class="s-award-bling s-award-bling__bronze" title="20 bronze badges">20</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-27489174">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>5</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>2</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/27489174/batarang-extension-giving-no-results-whatsoever" class="question-hyperlink">Batarang extension giving no results whatsoever</a></h3>
<div class="excerpt">I have tried using it on local site, on hosted sites, even on the Angular sites, and all I get is a listing of the HTML with Angular. No scopes, no models, nothing useful whatsoever. I'm assuming it's supposed to help develop with Angular in Chrome,…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/angularjs" class="post-tag grid--cell" title="show questions tagged 'angularjs'" rel="tag">angularjs</a>
<a href="../../questions/tagged/google-chrome-extension" class="post-tag grid--cell" title="show questions tagged 'google-chrome-extension'" rel="tag">google-chrome-extension</a>
<a href="../../questions/tagged/batarang" class="post-tag grid--cell" title="show questions tagged 'batarang'" rel="tag">batarang</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Dec 15 '14 at 17:01">asked Dec 15 '14 at 17:01</time>
<a href="../../users/1067156/maxrocket" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/1067156.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="MaxRocket" />
</a>
<div class="s-user-card--info">
<a href="../../users/1067156/maxrocket" class="s-user-card--link">MaxRocket</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">920</li>
<li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li>
<li class="s-award-bling s-award-bling__silver" title="12 silver badge">12</li>
<li class="s-award-bling s-award-bling__bronze" title="26 bronze badge">26</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-43228898">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>3</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>0</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/43228898/angular-batarang-conflicting-with-oclazyload" class="question-hyperlink">Angular Batarang conflicting with ocLazyLoad</a></h3>
<div class="excerpt">I was making a POC to test ocLazyLoad for lazy loading the parts of app.
After lot of debugging, I found out that Angular Batarang is conflicting with ocLazyLoad in some way.
I'm getting following error in reject callback of promise when I lazy load…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a>
<a href="../../questions/tagged/angularjs" class="post-tag grid--cell" title="show questions tagged 'angularjs'" rel="tag">angularjs</a>
<a href="../../questions/tagged/oclazyload" class="post-tag grid--cell" title="show questions tagged 'oclazyload'" rel="tag">oclazyload</a>
<a href="../../questions/tagged/batarang" class="post-tag grid--cell" title="show questions tagged 'batarang'" rel="tag">batarang</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Apr 05 '17 at 10:44">asked Apr 05 '17 at 10:44</time>
<a href="../../users/1934798/pranavjindal999" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/1934798.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="pranavjindal999" />
</a>
<div class="s-user-card--info">
<a href="../../users/1934798/pranavjindal999" class="s-user-card--link">pranavjindal999</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">2,937</li>
<li class="s-award-bling s-award-bling__gold" title="2 gold badges">2</li>
<li class="s-award-bling s-award-bling__silver" title="26 silver badges">26</li>
<li class="s-award-bling s-award-bling__bronze" title="35 bronze badges">35</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-39590133">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>3</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/39590133/angular-js-why-obja-objb-date-date-dd-mm-yyyy-hh-mm-takes-much-time" class="question-hyperlink">Angular JS : why {{objA.objB.date | date:'dd.MM.yyyy HH:mm'}} takes much time?</a></h3>
<div class="excerpt">In AngularJS tab of Chrome dev tools (I'm using AngularJS Batarang (Stable)). I have the following lines, describing which watch expressions took the highest time to evaluate (if an expression called several times, the evaluation time is…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a>
<a href="../../questions/tagged/angularjs" class="post-tag grid--cell" title="show questions tagged 'angularjs'" rel="tag">angularjs</a>
<a href="../../questions/tagged/performance" class="post-tag grid--cell" title="show questions tagged 'performance'" rel="tag">performance</a>
<a href="../../questions/tagged/batarang" class="post-tag grid--cell" title="show questions tagged 'batarang'" rel="tag">batarang</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Sep 20 '16 at 09:15">asked Sep 20 '16 at 09:15</time>
<a href="../../users/574686/eugeny89" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/574686.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Eugeny89" />
</a>
<div class="s-user-card--info">
<a href="../../users/574686/eugeny89" class="s-user-card--link">Eugeny89</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">3,797</li>
<li class="s-award-bling s-award-bling__gold" title="7 gold badges">7</li>
<li class="s-award-bling s-award-bling__silver" title="51 silver badges">51</li>
<li class="s-award-bling s-award-bling__bronze" title="98 bronze badges">98</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-34838074">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>3</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>0</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/34838074/number-of-watchers-in-angular" class="question-hyperlink">Number of watchers in Angular</a></h3>
<div class="excerpt">I am bit confused on the number of watchers in a angular code.I have a extremely simple Angular Controller with just one variable.
function SomeClass($scope,$sce) {
$scope.Data = "";
}
This variable is binded to a textbox and also…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/angularjs" class="post-tag grid--cell" title="show questions tagged 'angularjs'" rel="tag">angularjs</a>
<a href="../../questions/tagged/batarang" class="post-tag grid--cell" title="show questions tagged 'batarang'" rel="tag">batarang</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Jan 17 '16 at 12:01">asked Jan 17 '16 at 12:01</time>
<a href="../../users/993672/shivprasad-koirala" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/993672.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Shivprasad Koirala" />
</a>
<div class="s-user-card--info">
<a href="../../users/993672/shivprasad-koirala" class="s-user-card--link">Shivprasad Koirala</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">27,644</li>
<li class="s-award-bling s-award-bling__gold" title="7 gold badges">7</li>
<li class="s-award-bling s-award-bling__silver" title="84 silver badges">84</li>
<li class="s-award-bling s-award-bling__bronze" title="73 bronze badges">73</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-23540950">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>3</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>3</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/23540950/angularjs-model-introspection-reflection" class="question-hyperlink">AngularJS model introspection/reflection</a></h3>
<div class="excerpt">Is it possilbe to introspect/reflect of the model in Angular app, where you can change the scope and traverse it? Something like batarang have but that will allow to change the values.
If not is it possilbe to monkey patch Angular code (by including…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/angularjs" class="post-tag grid--cell" title="show questions tagged 'angularjs'" rel="tag">angularjs</a>
<a href="../../questions/tagged/reflection" class="post-tag grid--cell" title="show questions tagged 'reflection'" rel="tag">reflection</a>
<a href="../../questions/tagged/batarang" class="post-tag grid--cell" title="show questions tagged 'batarang'" rel="tag">batarang</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked May 08 '14 at 11:51">asked May 08 '14 at 11:51</time>
<a href="../../users/387194/jcubic" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/387194.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="jcubic" />
</a>
<div class="s-user-card--info">
<a href="../../users/387194/jcubic" class="s-user-card--link">jcubic</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">61,973</li>
<li class="s-award-bling s-award-bling__gold" title="54 gold badges">54</li>
<li class="s-award-bling s-award-bling__silver" title="229 silver badges">229</li>
<li class="s-award-bling s-award-bling__bronze" title="402 bronze badges">402</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-21488132">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>3</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status ">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/21488132/scope-creation-and-batarang" class="question-hyperlink">Scope creation and batarang</a></h3>
<div class="excerpt">Consider the following:
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<meta charset=utf-8 />
<title>Exploring directives
…
Mike Cheel
- 12,626
- 10
- 72
- 101
2
votes
1 answer
Batarang regularInterceptedExpression
I've been messing with the Batarang plugin recently to analyze some performance. I notice that at the top of every log there is a section dedicated to something called regularInterceptedExpression. Can anybody explain what this means and what are…
Zack Herbert
- 942
- 1
- 16
- 39
2
votes
1 answer
How to proper cleanup child scopes of an Angular directive
Background: I am creating a directive based bgDropdown of angularstrap. My goal is to create a similar widget HTML select element, but with custom templates for each element.
The widget works fine. but using Batarang discovered that whenever the…
rnrneverdies
- 15,243
- 9
- 65
- 95
2
votes
0 answers
Angular hangs during route change on xhr.onreadystatechange in createHttpBackend
I've spent the last two days trying to figure out why my app hangs when switching routes. This code is inherited from another developer.
I've put console.logs EVERYWHERE and it looks like everything finished with the route change, then it just hangs…
Sophie McCarrell
- 2,831
- 8
- 31
- 64
1
vote
1 answer
AngularJS watcher performance issues
I have performance issues in AngularJS. After analyzing it from the AngularJS Batarang i could identify the issues with lots of watchers being created. Below is the code snippet which is the culprit for performance optimization.
