I have this remote html page where i need to debug some javascript errors. I do not have access to the page so i have to resort to FF debugger for this. In there i have a js function being called on the body onLoad like this:
<body onLoad="someFunction();" id="bd" class="fs3 FF" >
I somehow want to step over it or replace it with this:
<body id="bd" class="fs3 FF" >
I suspect someFunction() is breaking other onload events since i'm getting the error that it is undefined, which it is. What would be the best way to debug this?
I am fairly new to JS debugging but I have tried setting up breakpoints at this line but they always move into the js code within this document. Any suggestions?
UPDATE: I do not have access to it since the website belongs to one of my clients. And he would rather have me debug and suggest him the fix instead of providing access!
I suspect someFunction() is breaking other onload events
A broken onload attribute doesn't prevent other load callbacks (e.g., hooked up via addEventListener) from being called (proof). But you've said in the comments you want to be able to eliminate it as a possible cause, so:
If there are any script elements on the page at all, you can do this:
Find the first script element.
Find the first line of code in that element (either directly in it, or in the file it refers to).
Set a breakpoint on that line.
Reload the page, which should trigger the breakpoint.
Type this in the console:
document.body.onload = null;
Click the resume button to allow the code to run.
That code in #5 will remove the handler that the attribute creates. (It won't remove the attribute, but there's no need to. If you really want to, add document.body.removeAttribute("onload"); to the above.) Since your breakpoint is on the first line of a script, it will get hit before the load event fires.
Related
So I currently have a tampermonkey script that runs when it's on https://code.org/projects/applab/* which is where I want it. However whenever I run my code to remove the attr 'style' of the grandparent and parent of the specified element nothing happens.
Even though when I ran a test of this jQuery on w3's interpreter it worked...
$(document).ready(function() {
$("body").append(themeChangesCss);
$("#screenSelector").parent().parent().removeAttr('style');
$("#screenSelector").parent().removeAttr('style');
$("#runButtonWrapper").parent().parent().removeAttr('style');
$("#runButtonWrapper").parent().removeAttr('style');
});
You can also view the whole script here : https://sourceb.in/vdZOU1B7fq
You should probably start by logging the element you're trying to change to console. It is quite possible, that the web app changes the style AFTER your script executes. In that case, your changes will not have any effect.
If that is the case, read up on Mutation Observer, which allows you to execute code any time something changes the style attribute on the elements you want to clear.
I have tested your code and it indeed does work as it should on my test document. I couldn't find how should I test your code on the website you linked.
I am trying to build an automated Puppeteer script to download my monthly bank transactions from my bank website.
However, I am encountering a strange error (see attached Imgur for pictures of this behavior)
https://imgur.com/a/rSwCAxj
Problem: querySelector returns null on DOM element that is clearly visible:
Screenshot: https://imgur.com/d540E6p
(1) Input box for username is clearly visible on site (https://internet.ocbc.com/internet-banking/),
(2) However, when I run document.querySelector('#access-code'), console returns null.
I'm wondering why this behavior is so, and what are the circumstances that a browser would return null on a querySelector(#id) query when the DOM node is clearly visible.
# EDIT: Weird workaround that works:
I was continuing to play around with the browser, and used DevTools to inspect the DOM element and use it to Copy the JS Path.
Weirdly, after using Chrome Devtools to copy the JS Path, document.querySelector('#access-code') returned the correct element.
Screenshot of it returning the correct element: https://imgur.com/a/rSwCAxj
In both cases, the exact same search string is used for document.querySelector.
I believe that you cannot get proper value using document.querySelector('#access-code') because a website use frameset.
In the website there is frame with src to load content
<frame src="/internet-banking/Login/Login">
DOMContentLoading is executed when main document is loaded and not wait for frame content to be loaded.
First of all you need to have listener for load event.
window.addEventListener("load",function() {
...
});
And later on you cannot simply use document.querySelector('#access-code')
because input yuo want to get is inside frame. You will need to find a way to access frame content and than inside of it use simple querySelector.
So something like:
window.addEventListener("load",function() {
console.log(window.frames[0].document.querySelector('#access-code'));
});
BTW please see in: view-source:https://internet.ocbc.com/internet-banking/ looks like website is mostly rendered client-side.
I'm stumped with a very simple question. Since the <body> tag always precedes content, when does body onload execute; at the opening tag or at the closing tag? Can body onload advance to a point where it ignores code inside of it?
And so then maybe I skipped this part at the very basics of coding... If I open a tag with say, a style property, and don't close it, will it still execute?
Body itself is the content of your page, no pre-loading as such..
So if you run an onload event, this will trigger once the content of your body is ready and generally has rendered itself or is about to.
In general, you would create any content within the body tag or using a script at run time and then run a onload script to finalise everything.. This could be use to add javascript hover effects or to hide a progress bar for loading.. Generally once that script is done. The page should be ready for the user.
Code will never be ignored ever (with exception to crashes/cancelled requests), But it depends if the code is taking effect like it should.. You element might not be ready if your adding it dynamically..
Another big issue to watch out for while developing is cache, this is a nasty creature that will waste hours of your time...And last but not least, use the browser console to debug at various points and test what is happening.
As for closing tags, If you mean you you do not put the > character at the end, it will break the page.. In the case of tag like link.. But for a script, you must close it upto the point of the < /script > tag
I'm very new to javascript, so this is confusing me. All of the settings charm tutorials only show how to put the controls into the settings charm, but none of them say how to find the information gotten in them.
I tried to do one of these (like I do in the main program):
var muteToggle = document.GetElementById("Mute");
where "Mute" is the id in the separate html file.
muteToggle just ends up being null all of the time. I tried putting it after
WinJS.UI.ProcessAll().then(function completed() {...
but that didn't work either. Everything else is the same as in this page: http://msdn.microsoft.com/en-us/library/windows/apps/hh780611.aspx
Make sure you're doing it in the ready function of the js file that is referenced from your settings HTML. Try opening the JavaScript console or QuickWatch while broken at that line and also look at the DOM Explorer to see if you can find your toggle control. You should be able to access it though. Also, try element.getElementById instead of document.getElementById. Either should work actually, but as long as you're troubleshooting. Good luck.
Your problem is that you are trying to get a reference to the HTML element from the code running during the app activation. Although that piece of code may define the HTML to be loaded for a settings pane, it does Not actually load the HTML into the DOM. You just simply can't get the instance from that location.
What you need to do is have the settings flyout have its own js file that implements IPageControlMembers. In particular, you need to implement the ready method. This method is called once all the HTML and controls are loaded for the page, including your toggle. The link has an example of how to do this.
Also see:
WinJS.UI.Pages.define
Using single page navigation
I have an odd problem with IE8. I am trying to get a reference to a frame (same domain) object. The frame resides inside an iframe. The iframe resides deep inside multi level div's. The whole html is an output from an ASP.NET server control. jQuery code to get the reference is jQuery(top.window.frames['the_iFrame'][1].document).contents()[0]. The code resides in a jQuery ready() function. (The iframe id is generated dynamically and there's code to get the id).
This works everytime in Firefox. However in IE8 sometimes the object is empty. BUT if I place a dummy alert() just before the above jQuery code, it works everytime in IE8. I don't know why but my guess it has to do with suspended code execution? An alert() won't cut it so I tried to get the reference in a loop which contains a delay thinking maybe it needs some time but that didn't help.
Questions: Why placing an alert makes the code work in IE? Is there a way to fake the alert's good side effect with something non visual? Why isn't it working reliably in IE?
You're probably trying to access the <iframe> contents before it's loaded and ready. Your outer-level "ready" handler will not wait for the nested <iframe> to load.
A couple of options:
Probably the most reliable thing to do, if you can manage it, is to flip around the responsibilities. Have the page inside the frame push information up to the parent page from its own "ready" handler.
If you can't affect changes to the page in the <iframe>, then you could poll until it's ready
function waitForFrame(whenReady) {
function doWait() {
var obj = jQuery(top.window.frames['the_iFrame'][1].document).contents()[0];
if (obj)
whenReady(obj);
else
setTimeout(doWait, 100);
}
setTimeout(doWait, 100);
}