How can I find the specific code that's causing a web page to auto-refresh?
I've looked through the source for an HTML meta-refresh, to no avail. I also can't find any Javascript "reload" in the main page, leading me to think it's perhaps externally loaded through a link javascript file.
How would a "pro" track this down, like through Firebug (or other debugger)?
Note:
I'm more interested in the process of being able to debug and track down something like this, rather than a "catch-all" solution that will stop it cold (such as disabling the Firefox-wide ability for pages to auto-refresh themselves).
The problem is most likely in a javascript file. Go through them looking for the below:
1) Look for anything that can be used to change the URL/location, redirect, or cause browser to go back:
window.location.href
window.history.back(-1)
window.navigate(”example.html”);
self.location=”top.htm”;
top.location=”error.jsp”;
2) Look for timers such as:
setTimeout()
setInterval()
3) Look for broken selectors. You may have click event handlers attached to whole DIVs, or even the whole document by accident.
There is no straightway to find the source of the refresh in javascript. Try #Steve Papa's tips on your code.Incase you want to prevent the refresh and see in the console if you can find any useful info.
To stop the refresh, use onbeforeunload event. The event object passed to the event has lot of info, but I couldnt find anything which points to the trigger. Add a breakpoint on closeIt(e), and look for clues in global variables or call stack(which i dont think will be of much use here).
function closeIt(){
return "Any string value here forces a dialog box to \n" +
"appear before closing the window.";
}
window.onbeforeunload = function(e){
closeIt(e); //add a breakpoint here.
}
setTimeout(function(){location.reload()},2000);
http://jsfiddle.net/Gjuhm/4/
Related
Are there any techniques I can use to find what javascript is altering an HTML element? I am having some trouble finding how a particular element is getting an inline style of display:none added on load. I know I will find the script that does this eventually, but I want that process to be easier.
My ideal solution would be some way of breaking javascript execution as soon as a DOM element is modified. I am aware of Chrome's dev tools ability to right click an element and select Break On > Attribute Modifications. However, this is happening sometime during page load, so it'd be really nice if I could insert some script before all other script declarations that says 'watch for an element with class XYZ' and break JS execution on element modification. Then, JS execution would either break where I can see the JS that modified the element, or perhaps that could be found by looking at the call stack, but either way, I would be able to see the script that triggered the break to happen. I have found some answers that tell me how to do that using Chrome dev tools / Firebug, but like I said, this question is about the programmatic approach.
Right click on DOM element > Break on > Attributes Modifications
Via #3 in https://elijahmanor.com/blog/7-chrome-tips-developers-designers-may-not-know
The accepted answer doesn't fully answer the question, because it doesn't help with page loads.
I solved this issue but putting a script block immediately following the element in question.
<script type="text/javascript"> debugger; </script>
I was then able to attach the dom motification break points. By right clicking the element and selecting "break on" -> "attribute modifications" in the developer tools as described in other answers.
you can use :-
document.documentElement.addEventListener('DOMAttrModified', function(e){
if (e.attrName === 'style') {
console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
}
}, false);
Have a look at this :-
Event detect when css property changed using Jquery
I actually want to add a button to Gmail. When someone opens a email, he/she sees a button and when someone clicks on it, I add a function to it. I know one way but it's very intensive where I use setInterval() every 300 ms and run a function to check if it's Gmail or not and then add a button dynamically. I need something less intensive because I don't want people to have problems running my add on.
I want it all from my add on script so that I can easily communicate between other functions of my add on.
To add to pages it depends. Pages can do many tricky things (like GitHub using PJAX see this addon on how it was done).
Method 1 - addEventListener to window or gBrowser
But most usually you can catch a DOMContentLoaded or load event. Template HERE.
Method 2 - Observe http-on-examine-response and loadContext
If the URL of the nsIHTTPChannel matches your pattern then get the contentWindow from the loadContext and then manipulate. I need to make a clean template for this but you can see some messy ones: here and here
Method 3 - Add ProgressListener
ProgressListeners are nice because it helps you catch anchor changes, and usually when sites ajax and change page they change the url somehow but it doesnt really load a new page. I'm working on a template for this but it's not ready yet.
Info about addEventListener
If you add event listener in some situations it works for when 3rd parameter is true or when false. If you find one that works for your situation it will always work.
To figure out what combination works for you install this addon: event-listener-experiment-DOMC-and-load it's on GitHub so you can install straight from GitHub with this addon GitHub Extension Installer
Install that addon then navigate to your page, look in the browser console to see what feedback you're getting. It will tell you which works for you. If you need more help tell me the site and I will help you figure it out.
Here's a bootstrap template you can use once you figure out the combination:
I am trying to debug a very complex IE Intranet application. I am getting an alert with a custom message stating that an exception has occurred. I would like to find out more information about this exception as the message is not very helpful.
There is a master page which contains a lot of iFrames (and .htc files if that makes a difference) so I don't think that I can try and hijack window.alert. My last resort will be to try my luck with a file search.
Using IE 8, is there anyway I can detect where this alert is coming from? The ideal solution would be to somehow create a "breakOnAlert" function which inserts a debbuger statement at the correct alert location.
To clarify: The master page contains many iframes and I believe that the error+alert is coming from one of these. Each iframe is an aspx page (sometimes with dynamic html/javascript from the user) and contains inline and external JavaScript. Before posting I did try overriding alert in my page (a child page inside an iframe) but it didn't work. I am assuming that It doesn't work as each iframe has their own window object so they each have their own version of alert. For this to work I would need to find all iframes and override it for each one, something which I think would be very complicated to do. In the IE developer tools I can see a huge amount of script files (inline and external), so it would be very difficult to manually look for the alerts in there.
Since it's a real chore to do it in all iframes, I'd probably use Fiddler and programatically replace alert( with something like:
(function(n){alert(n);debugger;})(
IE should support the debugger statement, so you'd have a call-stack
This page explains how to do a text-replace in Fiddler
Example Fiddler custom rule to add to OnBeforeResponse:
if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "html"))
{
oSession.utilDecodeResponse();
var oBody = System.Text.Encoding.UTF8.GetString(oSession.responseBodyBytes);
oBody = oBody.replace(/alert\(/gi, "(function(n){alert(n);debugger;})(");
oSession.utilSetResponseBody(oBody);
}
Ovveride alert function and set a breakpoint inside, then you can watch Stack Trace :)
function alert(message) {
var x = 'whatever';
}
$(function () {
alert('test');
});
with firebug i only knows how to see what ajax-files are called.
i have a jquery mouse click event handler bounded to a link element.
is it possible to see what javascript code is used when clicking on an element in case you forgot if you got an event handler or other javascript code coupled to it?
You can use the profiler in Firebug. Go to the Console tab, and click Profile above the message area, next to Clear. It will say that the profiler is running. Click the Profile button again, and you'll see a report on what functions were called and how much time was spent in each one.
If you're using a library like jQuery, the output may be little less clear since it will show much of the time was spent in functions from the library (i.e. F(), init(), dimension(), etc). It will show which file each function was defined in though, so you can disregard the ones that are in the library (unless that's what you're looking for).
If you're using anonymous functions, you can give them names so they show up in the profiler - see this article for a thorough (possibly too thorough) explanation.
Use breakpoints ..
reference: http://getfirebug.com/javascript
You should take a look at Eventbug (it requires Firefox 3.6, some of the docs are old):
Downloads:
http://getfirebug.com/releases/eventbug/1.5/
Some background:
http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/
Just add 'debugger;' at your onclickevent, and happy debug it.
*Important: you gotta open the firebug panel and Reload the page
Somehow somewhere in my code one of the elements on the page gets a style attribute which I don't expect it to get. Namely, it gets style="position:fixed". I can see this happening in HTML tab in Firebug, but can't find it in the code. The application is fairly big and I can't simply look through all of the code to find the place, besides, several third-party libraries are being used (jQuery is one of them).
So, my question is, is it possible to somehow catch this style being changed and get the trace?
In Google Chrome, right click on an element in the page and select "Inspect Element." The Developer Tools window or pane will open with that element selected in the source view. You can then right click the selected tag and choose "Break on Attributes Modifications."
Well, after a couple of hours of googling and experimenting, it seems that the best one can do it setup a MutationEvent handler (Firefox supports them) like this:
var node_modified = function(evt) {
if(evt.attrName == 'style') {
alert('Style is changing from ' + evt.prevValue + ' to ' + evt.newValue);
}
}
var test_close = document.getElementById('test_close');
test_close.addEventListener('DOMAttrModified', node_modified, false);
An then set up some kind of logging throughout your code and see when this event gets triggered. Unfortunately, you can't just set up a breakpoint in the mutation event handler and see the stack trace, because event handler's stack trace has no information about the place in the code, where the event got triggered. Kind of logical, but I think that with some hacking this feature can be implemented in Firebug.
Thank you for your time!
In Firebug's HTML inspector you can right click on a node and there is an option to interrupt on attribute change.
Breakpoints persist through page reloads and you can also browse the call stack.
Sounds like you really need a debugger. Firebug has one built in, otherwise you can give Venkman a try, which I find a bit more cumbersome but perhaps is more effective..
Good luck! :)