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).
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.
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.
Inside the console, you can simply declare variables and use them.
var x = 'thing';
undefined
x + 3;
'thing3'
I want set that variable from a Javascript file, and use it in the console. That does not seem possible, so I hope somebody knows a solution for it.
In a javascript file, typing console.log(var x = 'thing') gives compilation errors in Gulp. I know I can just type console.log(x), but I want to use the variable and play with it in the console.
How can I declare variables that I can use in the console?
You are looking for a simple
var x = {thing: 'thing'};
console.log(x);
The undefined in the console comes from evaluating a statement that doesn't return anything. If you don't evaluate it in the console, but put it into your js files, there won't be any log.
I'm trying to debug my webpage using console.log
Don't. Use a debugger. You can statically insert breakpoints in your code with a debugger; statement.
How can I interact with logged variables from a JS file in the console?
The best thing of breakpoints in a debugger is: you can interact with any variables in the scope of the breakpoint without even needing to log them.
Maybe use console.debug(myTest.test)
I will suggest you to use the debugger rather than using global variables as it's not secure if you are able to access those variables in console. Use chrome while debugging. Open console and select the js file which you want to debug and put breakpoints.
I'm trying to understand how a webpage works. When you click a button, they call a function from javascript, with some arguments, just like this <a href="javascript:ShowListing('24343434', 22, '2', '434331')" class="btn">. The function (in an external .js) looks like this:
function ShowListing(id1,id2,id3,id4) {
somecode here
Dialog.Show( id1, assets[id2][id3][id4] );
}
My question is, what's assets? I looked for the declaration of the variable in all the scripts and I couldn't find it. Maybe it's defined in a .php?
Is there any way of knowing the value it has given some specific [ids]?
Thanks!
My question is, what's assets?
A variable containing an object of some sort. We can't tell any more than that from the code you've supplied.
I looked for the declaration of the variable in all the scripts and I couldn't find it. Maybe it's defined in a .php?
It has to be defined by client side JavaScript (unless it is a browser built-in which I don't recognise, but seems highly unlikely given the context it is used in). That JS could be in a .php file.
Is there any way of knowing the value it has given some specific [ids]?
Just about every modern browser has a Developer Tools feature.
Developer Tools come with a JavaScript debugger that lets you set breakpoints.
Set a breakpoint to that line and then you can examine the variables in it using the debugger.
Search terms such as how to use the chrome developer tools debugger will help you learn to use those tools for your browser.
First hit F12 if you're on firefox (i think the same goes for chrome) the console panel should be visible, then add the console.log() and refresh the page to see what is asset use
console.log(assets);
the same goes for the other ids and the value of each array in assets
Okay so I'm not sure if this is just isolated to Chromes developer tools, but I was toying around with some code I was working on and I realise that a variable, meant to be local, had been created in the global name space called 'name'.
I removed the bug then opened up Chrome tools to make sure the bug had been fixed. To my surprise I type 'name' into the console and an empty string is returned. After much looking through my code, I realise this isn't caused by me, so I head over to google.com and try again. To my surprise 'name' is a global variable there. After looking around, it appears there is a global variable almost everywhere when looking with Dev tools.
My question is why?
name is a property of the window object, and like all other members of window, it's accessible globally.
name is equivalent to window.name and is often used to modify the name of a window, after the window has been created.
var myWindow = window.open("","MsgWindow","width=200,height=100");
myWindow.document.write("<p>This window's name is: " + myWindow.name + "</p>");