As a thought, i would like to know if is possible to inspect for log properties of any variable in the chrome or any other browsers within the console mode. As i already know that you can already inspect the DOM in inspector element and you can go through debugging mode also. I want to demonstrate my point and why i and most novice would benefit this.
So as you can see in the picture below:
So as you can see i am trying to access some element of Array[15] but in the end it always giving me undefined. It nice just to test out some code before recompiling it again which takes time. Plus sometime you don't always knows enough that the function you are calling in JS is compatible with what you trying to achieve.
Put your entire code inside:
$(document).ready (function (){
//Paste your code here
});
The whole point is you are trying to access an element in the DOM before it exists.
When your trying to access the class the item doesnot exist.
Alternative:
Move your script below the elements in the html.
This is a very generic solution I gave without seeing the code. Request you to post the code as well.
Hope it helps.
You need to add a debugger where you are outputting your array. It seems to me you are trying to access the variable after execution is over, so the variable value is lost, as it goes out of scope. When execution stops at the debugger, you can console.log your variable and properties. At that point the variable will be in scope.
Related
I wish to access elements in a site with javascript and I have been using javascript for quite some time, especially with the querySelector functions. But for some reason, it won't work in this case; whenever I try to access any of the top-level elements, as illustrated below, no elements are found.
Does anyone have an idea about what the problem could be, and maybe even how to fix it?
That's normal,
It's because when you use the chrome developer console you can change the document context and in your screen you are inside the iframe.
You can see it here:
I want to automatically open a website and reveal details about the rendered DOM. For that purpose I use a page-worker (https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/page-worker). When in the content script I execute something like the following:
var body = document.getElementsByTagName("body")[0];
console.log(getComputedStyle(body).width);
console.log(body.getBoundingClientRect().width);
The output is "0" for both of the width values. The same also applies to other elements. Should I conclude that DOM elements are not rendered properly when using a page-worker? Is there a way to gain authentic data from that? Or is there any other proper way to get details about the rendered DOM that behave exactly like the website was opened in a web browser by hand? Because if I open the same website manually and execute the same commands, it reveals (correctly) the width of the window (1440), of course.
edit
I probably should have said that before, but:
It's not that gaining the values does not work at all. If I go deeper in the DOM structure, I get correct values. I only have problems with the root body element, I think. Weirdly enough if I execute the exact same commands on the firefox console, the return values are perfectly correct.
It's very interesting the way you do it.
You don't have to do getElementsByTagName to get the body element, its a property of the document object var body = document.body;
getComputedStyle is a function of the window object so that's why it works without you putting window. in front of it but still just want to let you know.
You dont do a getPropertyValue which is required for getComputedStyle, I just tried it without it and it worked but i never saw it used like that before so maybe that has something to do with it:
So doing this from bootstrap or from scratchpad window: gBrowser.contentWindow.getComputedStyle(gBrowser.contentDocument.body).getPropertyValue('width')
works for me.
From your content-script scope do:
window.getComputedStyle(document.body).getPropertyValue('width')
If it still doesn't work I would thinky maybe myabe maybe, thers a chance you might be executing the code to early.
Let me know how that works.
My AJAX returns a block of code in JS. I have tried converting this to a function that is then called AFTER the AJAX request returns, but for some reason in my FireBug console I am being told the function doesn't exist. The AJAX returns a block of JS and sets it into a div called "content". However, these functions do not appear to register and aren't called. Even when they aren't functions and are standard statements that would otherwise execute they still do nothing!
Absolutely everything is in place and works perfectly except this final part where the returned JS code doesn't execute.
Clearly, the JS code block isn't inside the <head> element, however, I am sure I've managed to execute JS code outside of that element before.
Is there anything I am doing majorly wrong, and is there a work around? The JavaScript code block edits the localStorage and so I cannot use another language instead, the code block is also generated using PHP and is dynamic as it changes variables depending on user input.
https://stackoverflow.com/a/10073403/2195574
Found my answer here! Simply added an id to the script and executed it that way with eval(). Looked at the default drop downs in DW and id wasn't among them otherwise I'd have tried this prior to posting!
I'm having a spot of trouble overriding the document object for my JavaScript.
function myFunction(document) {
[code]
}
works fine. But
function myFunction(newDocument) {
document=newDocument
[code]
}
does not. So far I'm managing fine using functions with the former method, but I'd rather just override the document object once and forget about it. If anyone could show me the proper way to globally override the document object, I'd appreciate it.
I'm going to go out-on-a-limb and say this cannot be done, nor should it be done.
If you replace the current document object (that your script is running under) than wouldn't your script go out of scope/context?
I made a fiddle (http://jsfiddle.net/V3Rsh/) that suggests this cannot be done (at least in Firefox 20). If you look at the console it reports the same URL before and after the document assignment. But if you debug and put a breakpoint on the first console.log() and run the document = newDocument() line manually in the console you will see a document object created that has the 'about:blank" URL. But the subsequent call to console.log() does NOT reflect that.
The page I'm trying inspect has a hidden <input type="hidden" name="Foo" value="123 /> element on a page, where Javascript/AJAX modifies the value. I'm trying to find where on earth in Javascript is the code that modifies this value from time to time.
Is there a tool that could help me find the places in javascript that use/modify that element? Does Firebug provide this, if so, how?
Note: If tried looking for "Foo" in the code, but I haven't found any matching titles. There's JSON and Mootools loaded, +application specific code, which results several thousands lines of code. The element is probably accessed indirectly.
Firebug 1.5 will have "Break-on-Modify" on the HTML panel. See http://getfirebug.com/doc/breakpoints/demo.html#html - Break on DOM (HTML) Mutation Events.
How do you know that the javascript is modifying this value? Since it looks you already know when it's called (since you know it changes), I would suggest a breakpoint in Firebug in the first event that initiates the changing (probably an onclick attribute in other element).
It's kind of hard telling you a "generic" way of knowing where in javascript it's changing Foo's value since there are a lot of different approachs, different libraries, each one with it's syntax.
For example, if you tried searching "Foo" and didn't find it, the script may be traversing the DOM and changing the input's value as a "first child of something". I would try to search for names or ids of input's parent elements and understand the code from there.
I usually just try to understand the javascript logic from every script I use with Firebug's debugging techniques - but just on the script that uses the libraries.
If Firebug doesn't let you define breakpoints on setting some value, you could insert something like this in the page (Firefox-only):
$("textarea")[0].__defineSetter__("value", function(val) {
alert("called");
})
And either breakpoint on the function in Firebug or use console.log or whatever to dump the stack to the firebug console.
I remember seeing somewhere a presentation on Firebug plans, which included a section on various kinds of breakpoints to be supported, but I can't find a link to it right now.
[edit] The above is for the case the value is set by assigning to the value property: .value = .... If you need to catch the moment an attribute is changed (.setAttribute("value", ...)), you can use DOM mutation listeners.