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.
Related
This may be a basic problem but its getting on my nerves now. I was exploring Microsoft Edge. While debugging, I am pasting a variable in console tab to explore its value and below is the error ('SecurityError') that I see.
I could see the value in watch and all that's not I am looking for. I want to go to console tab to run some functions on the object tp explore more on that part.
Its just annoying. I am unable to get through it. Could anyone help here?
Thanks.
browser.tabs can only be accessed in extension context, such as background page. However, you're calling it in content scripts (I know it from another question), which obviously will get nothing.
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
I'm following https://github.com/joyent/node/wiki/Using-Eclipse-as-Node-Applications-Debugger
and leaves me with questions
How can I see what variables contain?
How can I execute arbitrary commands?
This is similar to webkit's inspector. You can do both there, it has a console tab to execute whatever you want and inputing variable's name will display its contents.
I've built my own tool for the time being.
https://github.com/ketamynx/node-codein
In my code I have a line that dumps the current window (which happens to be a youtube video page):
Firebug.Console.log(myWindow);
It can be seen that window object contains "yt" property, which is another object that can be easily inspected in debugger:
http://i.imgur.com/lHHns.png
Unfortunately, calling
Firebug.Console.log(myWindow.yt);
logs "undefined" - why is that, and how can I access this "yt" property?
Edit: one addidtion that might be important: the code I'm writing is part of a firefox extension, so it's not really running inside a pgae, but in chrome - I'm starting to think that it may be the cause. Can chrome scripts be somehow limited in what they can see/acces as opposed to code in script tags?
For security reasons, Firefox extensions don't access web page objects directly but via a wrapper. This wrapper allows you to use all properties defined by the DOM objects but anything added by page JavaScript will be invisible. You can access the original object:
Firebug.Console.log(XPCNativeWrapper.wrappedJSObject.yt);
However, if you want to interact with the web page from an extension you should consider alternatives where the web page cannot play tricks on you (e.g. running unprivileged code in the content window: myWindow.location.href = "javascript:...").
Firefox and Chrome extensions can't access JavaScript within the page for security reasons.
I have seen confusion like this using asynchronous APIs.
console.log(obj); shows the contents of an object all filled in, but when accessing the object properties in code, they aren't really populated yet due to the call being asynchronous.
Why Chrome and Firefox shows them all filled in is probably just a timing issue as they probably process the console.log() asynchronously as well.
I have an Object in my javascript called file. Running console.log(file) allows me to inspect the object in Firebug like so...
Here is the problem: when I try to access file.status I get 0. file.name and the other attributes all work fine... it is just status that outputs 0 no matter what.
Any ideas what is going on???
BTW, this object is a plupload File object, if that matters. Also, the Webkit Inspector produces the same results.
Thanks!
I suspect it is the security around JavaScript that prevents sharing the details. It is not lying, but not telling you things. Good JavaScript, another citizen protected.
Java security can make it hard to manipulate the files ahead of time as well, thus why there are so many uploader utilities, ok and because of IE7-9 not supporting multi-file browser selection. Example YUI Uploader or SWFUploader.
interesting, if I had this mystery and wanted to get to the bottom of it - I would have either read the code that creates and manipulates this object, or try to use different javascript enumerations to see what I can get from this object.
Maybe a for in loop, just to see where it gets me. After all, many javascript dev tools were built using javascript - they shouldn't have more insight on objects than regular js commands.