I just started learning angular js. I have understanding that we can access and debug scope available to any dom element by selecting/inspecting anywhere on the page and running
angular.element($0).scope()
code on console. But if you try this, I find its value undefined. How they are hiding it and how can I reach to data through console?
Its likley that debugInfoEnabled in $compileProvider is set to false, which means angular.element($0).scope() will always return undefined
You can however run angular.reloadWithDebugInfo in the console which will override this.
Reference:
AngularJS $compileProvider Documentation
AngularJS reloadWithDebugInfo Documentation
Load angular.js instead of angular.min.js. You will get better stack traces and data debugging will be enabled.
From the Docs:
angular.element — jQuery/jqLite Extras
AngularJS also provides the following additional methods and events to both jQuery and jqLite:
scope() - retrieves the scope of the current element or its parent. Requires Debug Data to be enabled.
— AngularJS angular.element API Reference - jQuery/jqLite Extras
For more information, see
AngularJS $compileProvider API Reference
AngularJS angular.reloadWithDebugInfo API Reference
Related
What I'm trying to do is have some testing assertions based on the data in the Angular service, i.e. we're trying to create E2E tests and the tool we're using allows us to execute arbitrary JavaScript code for assertions, so for that I need to know if it's possible to get access to the Angular service instance.
How can I get access to an Angular service instance from plain JS code?
That is, if my Angular app is deployed, and I open the app in the browser, then open Chrome DevTools, can I get access to the service instance of the my Angular service that was provided to all components?
I know it's possible to get access to your component by through ng.probe($0) etc. but not sure about services.
From what I have searched so far, it seems like we have to do use the Injector class and then use it's .get() method to get access to one of the Angular service instances but I'm not sure how would I get access to the Injector class/instance itself?
Here's what I tried: ng.probe($0) ($0 being the <app-root> of my app) and then I see that the return value has an .injector property, I tried to call ng.probe($0).injector.get('MyServiceName') and got an error for: Uncaught Error: No provider for MyServiceName!.
(Even though I'm trying ng.probe above, I would love to know how to get access to the injector without ng.probe because during execution of the automated testing i.e. prod mode, I don't think I'll be able to do ng.probe($0))
So I'm not sure if I'm trying to access it the right way? Any ideas?
I'm using Angular 4.
This works for me in Angular 7 using ng.probe():
window.ng.probe(window.getAllAngularRootElements()[0])
.injector.view.root.ngModule._providers
.find(p => p && p.constructor && p.constructor.name === 'MyServiceName');
And I guess it is not possible to do it another way without ng.probe()
AngularJS Developer Guides on scope says that we can examine the scope by typing $scope on console.
To examine the scope in the debugger:
1.Right click on the element of interest in your browser and select
'inspect element'. You should see the browser debugger with the
element you clicked on highlighted.
2.The debugger allows you to access the currently selected element in
the console as $0 variable.
3.To retrieve the associated scope in console execute:
angular.element($0).scope() or just type $scope
But when I'm typing $scope on console it says
Uncaught ReferenceError: $scope is not defined
at :1:1
Here is the link for reference.
app.js look like this
var app=angular.module("app",[]);
app.controller("ctrl",['$scope','demoservice',function($scope,demoservice){
console.log(demoservice);
$scope.ser=demoservice;
}]);
app.service("demoservice",[function (){
this.name="Himanshu";
}]);
Someone is asking for code so here is CodePen on which same error is coming.
$scope is a reference variable inside controller hence writing $scope on console will not provide an access as its not a global variable but private to a scope. So if you need to access $scope variable you need to access it in certain execution scope consider the following example
A breakpoint has been kept in the middle of execution content, so here now as $scope is in memory we can use it in console like this
So in order to inspect $scope you have to be in middle of execution perhaps not just to $scope but this applies for any js code variable unless its global cannot be accessed in window console.
other than that to use more friendly angular JS debugging you can also use angular batarang an add on to chrome
Pick an element from the HTML and in the console tab execute angular.element($0).scope(); this the statement you will get the scope of that element.
or
You can install in-inspect chrome plugin. and use $s
in the console to get the scope of the element.
So for my sins I'm on an Angular 2 project. I use angular.element($0).scope() all the time on my old Angular 1 work to inspect an element and see what's on the scope at that point in the dev tools. This is super useful, is there something similar in Angular 2?
Augury is a great suggestion. If you want direct access use
ng.probe($0)
See also
Get ComponentRef from DOM element
How to access the *angular 2* components' data in the browser's console?
how to access Angular2 component specific data in console?
Have you tried using Augury? Link: https://github.com/rangle/augury
I'm working with the event system and I wanted to run some quick commands in the console.
I noticed the global variable Backbone is available in the JavaScript window of www.jsfiddle.net but not from the console.
Here is the fiddle.
console.log('hello');
console.log(Backbone);
This is different behavior from what I'm use to.
When I type Backbone into the console ( I am in FF 14 ) I get:
ReferenceError: Backbone is not defined
That's the joy of iframes (or frames in general). Chances are good that the console panel you had was attached to the parent site and not to the iframe containing your code (and thus the Backbone object)
This one's perhaps a duplicate of "variable not recognized inside contentscript" under the same section. I got part of my query solved there from the answer to that question. Yeah, I understand that
The content script context is entirely disconnected from the addon script context. Content scripts are run in the context of the document, while addon scripts aren't.
But does that mean we can never access a variable in the content script context in the addon script context? If by any means we could access them, please do let me know. My requirement needs objects to be sent as parameters to functions in another script(data/utilities.js) and possibly get the returned object. There was no difficuty in doing the former but am stuck with the latter cos of the aforementioned context problem. I am able to return the value from the content script context but unable to access the same in the addon context. Can anyone please help me out with a little example of this?
PS I could as well discussed it there but I read that I shouldn't as this ain't a discussion forum.
You cannot get direct access to variables in the content script from the addon script context directly. You can pass the variable back to the add-on from the content script using
self.port.emit('send-some-var', some_var)
You would then receive the variable's value in the add-on script by listening for the same event:
worker.port.on('send-some-var', function(data) { console.log(data) })
The main limitation however is that the data being passed through must be JSON-serializable, so you could not have a complex object with methods, etc. Only data.