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>");
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.
With copy("text") in the developer tools console of Chrome and Firefox you can copy a "text" without an user interaction. Is this also possible if the website I've opened also has a function named copy? If yes, how?
If you refer to window overriding:
Unfortunately, once website overrides methods from window object, they are basically gone for good.
There are some workarounds, for instance you could use proxy interceptor like Charles, inject something like <script> window.copy_saved = window.copy; </script> on the very top of the <head> tag and then use copy_saved method with preserved original functionality.
If you refer to accessing functions defined in website's script tags:
It really depends on implementation, if the method is wrapped in structure accessible in window object, then yes, you can find a way to invoke the method. Methods however, can be stored in closure-like objects and thus being inaccessible by outside environment. It usually takes thorough reverse engineering to find a way into minified closures.
I am helping to develop a WordPress website. One of the website's plugins "returns" a JavaScript object named FWP. The reason that I put "returns" in quotations is because I'm not clear what returns means. In other words: I'm unclear where FWP is stored.
I can see this object in Chrome's developer console by typing FWP in the console, which then displays the object in the console.
But this all happens in the Chrome developer console. I'm not really doing anything to the variable in the webpage itself. I don't really have access to modify the real FWP object.
Objective: I would like to send this FWP object, as an input parameter, to a custom WordPress plugin that I have written in PHP.
I am confused how to actually grab the FWP object from the webpage, so that I can do things with it.
I know that it's there...somewhere... in the webpage, because I can see it in Chrome's console. Right? I just don't know how to access it.
Is there a general way to access JavaScript variables that one can see in the Chrome developer console? Basically:
1) is there some place where JavaScript variables, visible in Chrome developer console, are stored in the webpage?
2) If so, is there a general method to access them?
Thanks for any guidance. I'm not new to WordPress or php or JavaScript, but I am having a blind spot with this question, and feel that I'm missing something that I haven't learned yet.
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).
I am navigating an object that contains an array of objects.
When I use chrome's js developer console I can grab the title property from the first item in the array i.e.
hello.example.array[0].title
this returns the title (only in the js developer console). However when I write a script to do this for me suddenly I receive this response:
Cannot read property 'array' of undefined
here is an example of my js
var theTitle = hello.example.array[0].title;
console.log(theTitle);
Why does the console find it correctly when my js does not?
Try selecting the expression in question in the script view and then use the Ctrl-Shift-E shortcut to evaluate in the console. Or, copy-and-paste from the script view into the console. Or, hover over the last component of the expression in the script view to see the value. In either case, you will most likely find that you've mistyped something, or are executing the script in a different context than that in which you are evaluating the expression in the console, etc.
Thanks to #Barmar, I realized I needed to view how I was going about grabbing the 'title' property.
My solution was in the context of other code and how the object was being created in the first place.
Thanks all for the help!
Edit 6 Years later:
This post has some popularity so I thought I would update it with a more valid answer...
Make sure your JavaScript actually has the scope/context of the object to begin with.
The JS Console is able to return it because it is being executed after the code has run.. whereas the JavaScript in question might be trying to access the variable before it is set.
So check if you have the right scope/context and that the code is not trying to access a variable before it has been set.