angular / batarang Goto Github PK
View Code? Open in Web Editor NEWAngularJS WebInspector Extension for Chrome
License: MIT License
AngularJS WebInspector Extension for Chrome
License: MIT License
After enabling Performance I get this error as the app refreshes :
Uncaught TypeError: Object # has no method 'webkitNow'
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:
Thank you again for this fantastic tool, and your time.
In my recent pull request, I also included a new app-like UI for batarang that's similar to other chrome developer tools tabs.
I hope it gets merged. It can be improved even further but this is what I could have done in a couple of hours.
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.
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 ;)
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.
Not sure whether to search the AngularJS docs, or the Batarang docs (maybe both?).
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"
]
}
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
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.
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.
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.
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.
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.
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.
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
Tried installing following extension
https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en
but got manifest is invalid error.
(;(
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
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.
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.
Currently, sites like Punker do not work with Batarang because iframes are not instrumented.
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.
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 ?
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
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.
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 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.
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'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.
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.
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.
I'm running Chrome Version 24.0.1312.5 dev and this is what I get for any angular app I browse to:
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?
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.
Scope-to-element from ng-view highlights the wrong element.
Show warnings when some best practices are violated. For instance:
$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.
It doesn't work at all on
Version 25.0.1313.0 canary
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.
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 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
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.
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:
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
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.