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! :)
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
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/
Is there a tool available on Safari to find out when new elements are being added to the page. I have a page where there are invisible elements added at that cause the page to scroll. The elements that I thought where the cause, don't seem to be. I'd like to know if there is a way to find out.
Safari's built-in debugging tools are limited to what Chrome and Firefox offers and as far as I know you cannot set a break point to detect when a node has been inserted.
If you really insist on using Safari to debug, you could use event listeners like below:
document.addEventListener('DOMNodeInserted', function (event) {
console.log('This element was added to the page:', event.target);
});
Using the Web Inspector (or Chrome Developer Tools), right click on the BODY element (or a more specific one, where the elements actually get added) and in the context menu, choose "Break on subtree modifications". Your JS code will break whenever the selected element's subtree gets modified (elements added/removed).
I think you could use "mutation observers".
I would really love to be able to see the code that is affecting a specific DOM element.
But I also would really love not to have to look through all my javascript searching for references/selectors that might be causing the issue.
Does anyone have a technique for causing a browser debugger to break on any changes to a specific DOM element? I don't mind it requiring a specific browser or extension to work.
This is also doable without writing any script in Firebug as well as in Chrome's developer tools (maybe others, did not inspect further).
In Firebug:
Go to HTML tab
Right-click an element you'd like to monitor
Choose "Break On Attribute Change", or "Break On Child Addition Or Removal", or "Break On Element Removal"
In Chrome Developer Tools
Go to Elements tab
Right-click an element you'd like to monitor
Select "Break On ...", then choose "Subtree Modification", or "Attributes Modification", or "Node Removal"
I actually found this out after trying accepted answer of 999, however given code did not work for me. Additionally, Chrome's possibility to monitor events on any DOM subtree seems really nice.
Note: The events below were great when the question was asked, but are no longer current. The recommended alternative is MutationObservers, but those are still maturing
MutationObserver on MDN
Try this (in Firefox, with Firebug installed):
function breakOnChange(el) {
if (!el.addEventListener) return;
el.addEventListener('DOMAttrModified',
function(DOMAttrModifiedEvent){debugger}, true);
el.addEventListener('DOMNodeInserted',
function(DOMNodeInsertedEvent){debugger}, true);
el.addEventListener('DOMNodeRemoved',
function(DOMNodeRemovedEvent){debugger}, true);
}
// Usage:
breakOnChange(someDomNode);
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