I try to inspect an options page for a Chrome extension with Batarang but I get nothing in the model tree.

Batarang works when I open the html file directly in the browser

When I activate Batarang, all bindings fail and the only one message I have in console is :
Uncaught TypeError: Object # has no method 'webkitNow'
With this callstack :
ng.config.$provide.decorator.$delegate.proto.$apply
a angular.js:15
d angular.js:26
ob angular.js:15
ic angular.js:15
(anonymous function) angular.js:157
a angular.js:113
c.preventDefault angular.js:23
m angular.js:6
c angular.js:22

Activate the debugger disable the ability of using application. Annoying ;)

Both in-app and the readme are out of date. The next step in docs is going to be to have a script auto-generate the in-app docs from the readme.

Things to be added:

• Dependency graph

If you need help with keeping this extension up to date with latest AngularJS releases, please let me know. I could help contribute pull requests to keep this great extension up to date.

Hi,

I am using Ubuntu 11.10 and trying to install batarang. This is the error that I receive -

"This application is not supported on this computer. Installation has been disabled."

Can you please help ?

Thanks,
Murtaza

Enabling batarang on the AngularJS API (http://docs.angularjs.org/api/) page results in this error on the page:

Uncaught Error: Argument 'fn' is not a function, got undefined from bootstrapPrettify angular.min.js:16

Chrome 23.0.1271.95

I am devloping an angular js webpage locally but batarang doesn't appear to do anything when I enable it. I do see the page refresh, but none of the scopes, or events register.

I have downloaded a local copy of minified AngularJS v1.0.2
I have AngularJS Batarang 0.3.0

background.html doesn't print anything to the console.

Currently it's not clear why the dependency view is initially empty.

The entire instrumentation option should be reconsidered, now that multiple tabs rely on it. Maybe show/hide tabs based on the status of the instrumentation?

models view not working any more after upgrade to 0.3.0

Os: Linux 64, Ubuntu 12
Chrome : Version 23.0.1271.64

Reproduce :
1) visit http://docs.angularjs.org/guide/
2) option AngularJS tab
3) click on Enable, and select Models.
4) Nothing appears in Models page but an empty scope.

It doesn't work at all on
Version 25.0.1313.0 canary

When a scope'd variable is actually an object, it is difficult to view its properties using the model tree view.

It would be very beneficial to display it properties similar to how the scope values are displayed (ul > li) in a list.

First, thank you for this awesome extension. It is incredibly useful!

I would like to say, though, that I'm not a big fan of the new UI. In this version, the models are collapsed, so to find what I'm looking for I need to click on each model and see if it's the one that I'm looking for, as opposed to before when I could just visually scan for the model that I'm looking for. Yes, I can roughly intuit about where the scope that I'm looking for to reduce the number of possibilities, but it was much easier before when I could just glance at what I want. If others don't like that, perhaps you could offer a configuration option to expand/collapse models by default?

Also, I liked it better when the model values were in textboxes, for two reasons:

1. It was easy to copy the value to the clipboard (click in, CTRL+A, CTRL+V).
2. The contrast of black on grey is not great, especially when you get into deeply nested scopes and the background gets even darker.

Thank you again for this fantastic tool, and your time.

I downloaded the Batarang extension and tried it in both Chrome and Chrome Canaray. But it doesn't seem to show me any Angular related data.

What am I doing wrong?

http://support.google.com/chrome_webstore/bin/answer.py?hl=en&answer=2664769&p=crx_warning

Installation instructions are outdated. Downloading and manually installing the crx file doesn't work anymore.

Hi,
in my project time recorder application (http://www.sekas.de/ptr), I use quite a few watches with function expressions as the first argument.
For anonymous functions, the batarang just displays function() in the performance tab. A file name/line number pair would be great for identifying these functions.

Not sure whether to search the AngularJS docs, or the Batarang docs (maybe both?).

I'm getting some RangeErrors: while enabling Batarang. I'm doing a JSONP call, it seems Batarang gets in a cycle while retrieving the results. When using google-chrome-unstable, it reports a loop in stringify. Unfortunately I haven't managed to pinpoint what's causing the loop yet.

RangeError {} angular.js:5563
(anonymous function) angular.js:5563
(anonymous function) angular.js:4661
Scope.$digest angular.js:7712
Scope.$apply angular.js:7894
$delegate.__proto__.$apply localhost:500
done angular.js:8883
completeRequest angular.js:9023
(anonymous function) angular.js:8975
doneWrapper

• Installed chrome canary
• enabled experimental api extensions
• went to chrome://extensions/
• enabled Developer
• clicked on extension link to download
• clicked on download and it says I 'extensions .... can only be added from chrome store'

(;(

The Chrome Devtools API docs do not provide instructions for how to format the icon so it isn't cut off when the panel is docked.

Hi
the watch expression performance graph means that I can measure filter performance pretty easily with Batarang.
How would I measure performance for a directive?
Thanks
Peter

Instrumentation sometimes does not occur correctly on small apps and sites that load quickly due to a race condition. The instrumentation script must be run after angular.js is loaded, but before angular.bootstrap is called.

After enabling Performance I get this error as the app refreshes :

Uncaught TypeError: Object # has no method 'webkitNow'

To enable Batarang, I have to check enable, uncheck it (which causes the page to refresh), and recheck it (causing another refresh, which loads the scopes and models). If I just check enable once, I get nothing in Models.

I'm running Chrome Version 24.0.1312.5 dev and this is what I get for any angular app I browse to:

http://i.imgur.com/JGrGl.png

Seems that batarang and angular grid (ng-grid) don't get along nicely.

I keep getting this error (repetitively) when accessing some pages, which contains ng-grid directive with batarang enabled. This error also crashing the browser and block any interaction to the page.

TypeError: Accessing selectionDirection on an input element that cannot have a selection.

sometimes it also spouted error like this:

RangeError: Maximum call stack size exceeded
    at derez (http://localhost:7000/#/:86:43)
    at derez (http://localhost:7000/#/:95:30)
    at derez (http://localhost:7000/#/:95:30)
    at derez (http://localhost:7000/#/:95:30)
    at derez (http://localhost:7000/#/:95:30)
    at derez (http://localhost:7000/#/:95:30)
    at derez (http://localhost:7000/#/:95:30)
    at derez (http://localhost:7000/#/:95:30)
    at derez (http://localhost:7000/#/:95:30)
    at derez (http://localhost:7000/#/:95:30) 

angular.js:5688

I use batarang 0.3.4, angular 1.0.5 and ng-grid 2.0.2

If there are circular references between a scope, and an object reference in the controller, batarang will break and simply report "null". It would be preferable if the reference could be captured, and terminated with a reference to the circular reference.

Batarang model tab does not show the available scopes. http://fiddle.jshell.net/brijs/kvC9b/7/show/light/ - this example is supposed to have 2 scopes.

OS: Mac OS X with Chrome browser v25
this issue is same as #35 which is now closed.

since the 0.3.0 Version, when i am activating the batarang and the page reloads, angular is not working any more. stops during initialization of my app.

Uncaught Error: Argument 'fn' is not a function, got undefined from zs-zoom angular.js:973
assertArg angular.js:973
assertArgFn angular.js:983
annotate angular.js:2281
ng.config.forEach.$provide.(anonymous function)

(zs-zoom is a directive)

When batarang is deactivated, everything works fine.

some more info:
i use angular in the async bootstrap mode (with $script loading of files)

I've enabled Experimental Extension APIs but when I try to install the extension in my latest release of Canary (Version 22.0.1194.0 canary), I get Extensions, apps and user scripts can only be added from the Chrome Web Store.

It would be nice if there was a checkbox/toggle on the "Model" tab to filter scope down to currently inspected element.

It would make it easier (and more usable) if I could filter or jump down to the scope I'm trying to reach.

Alternatively, if I could filter the models by typing the name into a search box this would help too, but may be more processor intensive.

Alternatively, it would perhaps be helpful if you could just auto-contract (via the toggle link) all scopes that are not on the current DOM element's scope lineage. So sibling scopes (including aunts and uncles) would be closed so that I can more easily get to the scope I'm trying to inspect more quickly.

When batarang is enabled I consistently see errors in console. The application becomes slow and errors appear many-many times and looks like on each digest cycle. The error is thrown inside the $digest function (inside the try-catch inside watcher while-loop), it's caught by try-catch and delegated to exception handler. I couldn't narrow it down further. But the problem goes away when batarang is disabled.

These are two types of errors that I'm seeing:

RangeError: Maximum call stack size exceeded
at Object.stringify (native)
at derez (http://localhost:8080/index.html:96:39)
at derez (http://localhost:8080/index.html:95:30)
at derez (http://localhost:8080/index.html:95:30)
at derez (http://localhost:8080/index.html:95:30)
at derez (http://localhost:8080/index.html:95:30)
at derez (http://localhost:8080/index.html:95:30)
at derez (http://localhost:8080/index.html:95:30)
at derez (http://localhost:8080/index.html:95:30)
at derez (http://localhost:8080/index.html:95:30) bundle.js:5619
(anonymous function) bundle.js:5619
(anonymous function) bundle.js:4716
Scope.$digest bundle.js:7820
Scope.$apply bundle.js:8009
$delegate.proto.$apply localhost:500
done bundle.js:9019
completeRequest bundle.js:9159
xhr.onreadystatechange

TypeError: Accessing selectionDirection on an input element that cannot have a selection.
at derez (http://localhost:8080/index.html:95:41)
at derez (http://localhost:8080/index.html:95:30)
at derez (http://localhost:8080/index.html:95:30)
at derez (http://localhost:8080/index.html:95:30)
at derez (http://localhost:8080/index.html:95:30)
at derez (http://localhost:8080/index.html:95:30)
at derez (http://localhost:8080/index.html:95:30)
at derez (http://localhost:8080/index.html:95:30)
at derez (http://localhost:8080/index.html:95:30)
at derez (http://localhost:8080/index.html:95:30) bundle.js:5619
(anonymous function) bundle.js:5619
(anonymous function) bundle.js:4716
Scope.$digest bundle.js:7820
Scope.$apply bundle.js:8009
$delegate.proto.$apply localhost:500
done bundle.js:9019
completeRequest bundle.js:9159
xhr.onreadystatechange

Using angular 1.0.4.

I have strange errors in console (not if batarang disabled)

RangeError
 jak.js:92
JAK.C._log jak.js:92
(anonymous function) jak.js:92
(anonymous function) angular.js:5563
(anonymous function) angular.js:4661
Scope.$digest angular.js:7712
Scope.$apply angular.js:7894
$delegate.__proto__.$apply add-course (1):454
(anonymous function) angular.js:930
invoke angular.js:2788
bootstrap angular.js:928
angularInit angular.js:904
(anonymous function) angular.js:14397
n jquery.js:2
o.fireWith jquery.js:2
e.extend.ready jquery.js:2
c.addEventListener.B

and

TypeError: Accessing selectionDirection on an input element that cannot have a selection.
    at derez (http://edu.lmc.cz/add-course:95:41)
    at derez (http://edu.lmc.cz/add-course:95:30)
    at derez (http://edu.lmc.cz/add-course:95:30)
    at derez (http://edu.lmc.cz/add-course:95:30)
    at derez (http://edu.lmc.cz/add-course:95:30)
    at derez (http://edu.lmc.cz/add-course:95:30)
    at derez (http://edu.lmc.cz/add-course:95:30)
    at derez (http://edu.lmc.cz/add-course:95:30)
    at derez (http://edu.lmc.cz/add-course:95:30)
    at derez (http://edu.lmc.cz/add-course:95:30) jak.js:92
JAK.C._log jak.js:92
(anonymous function) jak.js:92
(anonymous function) angular.js:5563
(anonymous function) angular.js:4661
Scope.$digest angular.js:7712
Scope.$apply angular.js:7894
$delegate.__proto__.$apply add-course (1):454
(anonymous function) angular.js:930
invoke angular.js:2788
bootstrap angular.js:928
angularInit angular.js:904
(anonymous function) angular.js:14397
n jquery.js:2
o.fireWith jquery.js:2
e.extend.ready jquery.js:2
c.addEventListener.B

some help ?

Scope-to-element from ng-view highlights the wrong element.

Tried installing following extension

https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en

but got manifest is invalid error.

In my recent pull request, I also included a new app-like UI for batarang that's similar to other chrome developer tools tabs.

Here are some screenshots:

I hope it gets merged. It can be improved even further but this is what I could have done in a couple of hours.

I'm running Chrome 24 on the Dev channel, and trying to use the Performance tab no longer works. The console shows the error Uncaught TypeError: Object #<Performance> has no method 'webkitNow', so it's pretty obvious that this is because window.performance.now is no longer prefixed.

Show warnings when some best practices are violated. For instance:

• When using angular.js hosted on code.angularjs.org, show a warning that they should use the CDN instead. Color codes: red when using code.angularjs.org, green for hosting it with the CDN, grey for anywhere else.
• When $scope.$apply() appears inside of a controller, explain that this violates best practices.

It might also be useful to provide these as command line tools for linting.

With Performance logging enabled, when "Log to console" is also enabled, the current session will get function run duration in ms in the console, but once the page reloads, the Performance "Enable" box and "Log to Console" are still checked, yet no more run duration is logged in the console. One has to uncheck then recheck the "log to console" box to enable that.

I am on Version 22.0.1229.6 dev Mountain Lion

One thought that had while using it, is that it would be extremely helpful to be able to have a tree view of the model data so the data can be collapsed as well as showing an abbreviated object definition for each of the scope's models.
I have many scopes some with lots of data and I spend a lot of time clicking through each model and scrolling through quite a bit of data to find what I'm looking for.

Something like:
Scope (020) | PeopleCtrl | models {name:String, date:Date ...}
- {
name: "Bob",
dob: "Wed Feb 06 2013 09:50:35 GMT-0700 (Mountain Standard Time)",
address: + {Object},
likes: - Array [
"AngularJs",
"Batarang",
"Bootstrap"
]
}

Currently the - otherwise great - extension does not seem to be able to detect an Angular.JS root node within an iFrame. For example within the JSFiddle results frame. It would be great I think if the extension could automatically detect that frame, and the angular root node inside.

From the app.js:

[main app module].provider({
    $exceptionHandler: function () {
        var handler = function (exception, cause) {
            console.log(exception, cause);
            alert(exception);
        };
    }
});

This is basically a placeholder function we'll be expanding to do nicer error-handling in production.

It throws no helpful error message in the console.

Replace appContext. watchPoll with an API that listens to window.postMessage. This might require instrumentation for any of the tabs to work, since $watch would need to be modified to make the call in the application context to window.postMessage. These calls may also need to be throttled for pages running multiple applications.

Is there a clever way to disable Batarang so various folk can't inspect my application when it's live on the real internet? I realize it's security through obscurity, but just curious.

Edit: I withdrew thinking this was a good idea. It's not.

18.0.1025.168 (Developer Build 134367 Linux) Ubuntu 11.04

I don't see anything in inspector while opening angular app, as if extension is not installed.

Hello:
Thanks for the new batarang feature first. It's a great tool, and I really love it.
I have a request to be able to search in the models tab.
This is a very useful feature if you have a lot of models.

Regards and Thanks again.

Currently, sites like Punker do not work with Batarang because iframes are not instrumented.