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.
Related
I have a website which uses Google Analytics and Google Tag Manager. It has been live for a couple of days but today the GTM script (gtm.js) started giving me errors in the console: "Uncaught TypeError: Assignment to constant variable". This, in turn, is causing some of my custom JS to not work as intended.
The GTM script is included as the second tag in as well as a immediately after the opening body tag, as instructed here : [https://developers.google.com/tag-platform/tag-manager/web][1]
This is the error that I get in the console:
Uncaught TypeError: Assignment to constant variable.
at <anonymous>:1:157
at <anonymous>:1:260
at gtm.js?id=GTM-XXX:271:414
at gtm.js?id=GTM-XXX:272:118
at b (gtm.js?id=GTM-XXX:272:337)
at dc (gtm.js?id=GTM-XXX:47:276)
at e (gtm.js?id=GTM-XXX:132:34)
at gtm.js?id=GTM-XXX:31:130
at Array.<anonymous> (gtm.js?id=GTM-XXX:133:454)
at Object.execute (gtm.js?id=GTM-XXX:133:194)
Does anyone recognize this issue? This error occurs in Chrome (Mac and Windows), Edge but not in Firefox (neither Mac nor Windows). Safari gives me a similar error "TypeError: Attempted to assign to readonly property."
First of all, you typically don't need a GA script if you have GTM. GTM is perfectly capable of managing GA.
Now to debug it properly, open the drawer in your devtools and go to the Network Request Blocker tool. Add a new blocking rule to block gtm. Reload the page, see if the error disappears. If it doesn't, then the issue is not in gtm. If it does disappear then we switch to gtm debugging.
Go to GTM, open site preview, get the error in the preview window, see what tags fired right before the error happened and try pausing the tags. See if by pausing them you can indicate which one causes the issue.
Or you could use a redirector extension (or a similar one) to replace your gtm container with a completely empty (but published) container and see if that error occurs. If it still occurs with an empty container, and you didn't make any trivial mistakes like rewriting a const in your CHTML tags/CJS vars/templates, it's likely your front-end interfering with GTM through some globals or overriding native functions, or, well, debug it further so we would know where to dig.
If you remove your custom JS tags, I suspect you'll see the error is resolved.
The error given is quite specific - there's an attempted assignment to a constant. I suspect this is happening within your own code as executed by GTM per the bottom of the stack trace you provided.
Put simply, somewhere in your code, I suspect you have something like the following:
const myVar = 123;
myVar = 456; //Error thrown here because you're illegally trying to change the assigned value
This fails because the const keyword indicates that the variable both cannot be redeclared nor reassigned in the same block scope.
It should instead read either of the following:
Using a 'var' statement
Var declares a variable named 'myVar' and assigns the value 'hello' to it. Other assignments can be made to the variable in the same scope.
var myVar = 'hello';
Using a 'let' statement
Let also declares a variable named 'myVar' and assigns a value of 'hello' to it. Other assignments can be made to this variable in the same block scope, but the variable itself cannot be redeclared.
//Simple example
let myVar = 0;
//Using this in a loop
for (let i = 0; i < 5; i++) { //Legal because you declare the variable once and can assign new values each iteration
//...
}
Swapping out the use of 'const' with any variable where you're assigning a new value to a variable and initially using the let keyword instead should resolve your error.
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
If I have a page, that defines a set of JavaScript variables, for example:
const pageId = 1
const pageName = "pName"
Is it possible for me to access the variable by typing in the console window.
I know I can add code to the page to make the page output the variables eg:
console.log(pageId)
Will output 1 to to the console window, but this is not what I am asking.
I want to run the page with the code as it is, and then type into the Chrome developer tools, console tab, to get it to display the value of whatever variable I choose.
Is this possible?
The Console runs in the same scope as the JS engine is currently operating in, so assuming they are global constants: Just access them as normal (by typing their name).
If they are not global, you can only access them if you move to within the right scope (e.g. with a breakpoint inside the same function).
What are steps on debugging angular directives?
I've directive in HTML and it's JS definition.
I can set breakpoint on directive definition, and script stops there on load, showing fact that directive was loaded.
I can enable logging by setting
app.config([ "$logProvider", function ($logProvider) {
$logProvider.debugEnabled(true);
});
Sometimes it shows useful error messages.
But all that is not enough, often directive is just not being processed at HTML at all, and no log messages appear.
How do one test that directive is actually loaded (for example, by chrome console)?
And where should one look to completly check directive processing pipeline for bugs?
You can try ng-inspector plugin for google chrome to debug.
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)