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".
Related
I'm using the masked input plugin for a web app at work. I'm applying masks using a class selector in $(document).ready():
$(".Primary_Phone_Number").mask("(999) 999-9999");
$(".ZipCodeMask").mask("99999");
$(".StateMask").mask("aa");
$(".date").mask("99/99/9999");
However, everything except the Phone number is losing it's mask. After document ready, if I run these again in the console, they get and retain their mask.
It's a large web app, each page has 1000s of lines of javascript and there are a lot of diverse selectors flying around making changes as well as a lot of ajax calls. We're only testing the web app in IE since it's an internal project. Is there anything available in IE10 to let me know when a particular DOM Element is getting manipulated?
If you use Chrome (and you can use it for debugging, if the problem reproduces), you can put a breakpoint on DOM modification.
Inspect the element, right click on it, choose "Break on..." and choose the event type (e.g. subtree modification). More info on this.
If you still want to do it in IE (9+), you can use Mutation Events and break the JS execution when the element is modified.
E.g.
el.addEventListener("DOMSubtreeModified", function(ev) {
debugger;
}. false);
I made a nice website that does a lot of DOM manipulation. Works very nicely in chrome and firefox. Though the client has requested now that it also works in Internet Explorer. The latest version is good enough to start with (that would be 10.0.9200.16721 in my case).
So the adventure starts, i press F12 and see a set of pretty familiar developer tools (coming from chrome and firebug). As i'm tracking the JS code i notice that the HTML tab (with the DOM) doesn't actually update.
According to the manual here http://msdn.microsoft.com/en-us/library/ie/gg589512(v=vs.85).aspx it's "a good idea to refresh the HTML tab to get the current DOM, especially when you use dynamic elements." (d0h ??) problem is .. i can't find a button to enable automatic update of the HTML tab. So i would have to click the refresh button everytime i step into a new line of JS (never mind of real-time DOM view).
But that's not all ... every time i click the refresh button the whole DOM tree view collapses. And i have to click a bunch of pluses to view the node i'm interested in.
Does anyone have a solution for this? Because what would take days will take weeks this way...
Duplicate of How to inspect elements on dynamically created DOM by using IE developers tools
From doing a little digging aroung, it seems like this is an issue other people have reported too. This thread might be of some interest to you.
The most relevant part of it:
The problem is when you modify the dom (with or without jquery) from a callback which is called by a timeout, which is in a callback bound to an event, IE freaks out and doesn't update the dom tree in the development tool. Subsequent modifications to the changed tag in the dev tool won't have any effect.
According to my tests, it's the combination of that sequence of calls that make this happen. If the dom is modified from a settimeout callback but without being inside of an event callback, it works. If instead of settimeout you directly call a function that modifies the dom, it works.
Here's a working example of what you're saying to compound the issue.
Basically, this is an issue with IE. There is no fix available at the moment. The accepted answer on the other thread seems like a very poor workaround.
Is there a way to get information which scripts modified selected DOM element, and in which order?
On my website, I modify width of div A. It appears however, that some other script modifies that width after that, but I do not know which script it is. How can I find it?
Edit:
After searching a bit more, I fount that in firebug you can right click attribute in HTML view, and select "stop javascript on change" (or sth similar, my firefox is not in english), the problem being it resets after reloading the page, what makes it useles for me.
I am using chrome developer tools to debug my page. It supports add breakpoints to dom elements, when attributes of dom is modified by javascript, it breaks the rendering process immediately. I think you can try it.
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);
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! :)