How to tell what is directly manipulating styles in the DOM - javascript

I recently ran into a bug where I was not able to control the style of an HTML element (without using !important) due to the fact that something in my codebase was directly adding inline styles to my DOM element.
After quite a bit of digging, I discovered it was due to a third party module I was using that had: document.body.style.overflow = 'visible';
It was frustrating that it took me as long as it did to find the source of this issue and it got me wondering. Is there any efficient way to determine the source of direct DOM manipulation like this? There wasn't something obvious in the Chrome Dev Tools.

With Chrome you can add a DOM Breakpoint to that element, just right click the element from the inspector and the last option will let you add a breakpoint whenever an attribute is changed. That way you can easily see when an element is being changed.

Related

Which javascript is unexpectedly changing the element's style?

I just started to work in an existent WordPress project in order to fix some issues, so I am firstly learning about this project. Now, I want to know exactly which javascript code is unexpectedly changing an element's style at the HTML code. Maybe some plugin... I need to find it out!
In a similar question someone has answeared that you can do that in Firefox by right clicking on the element in "HTML panel", than selecting the option "Break on Attribute Change". But I can't see this option, maybe it's an outdated feature...
So, how can I know which javascript is changing the element's style??
In Chrome, right-click on the element in the inspector document and select Break on > attribute modifications.

Different CSS inheritance when using document.write vs generating dom node by node

Yesterday I posted a different (related) question:
CSS height 100% behaves different when embedded in iframe
The answer to that led me to look at doctypes as a potential cause for what was happening. However I am now starting to think that something more sinister is going on.
When creating an iframe node by node and setting a doctype with
document.implementation.createDocumentType("html", "", "")
the content renders different than if the exact same content is rendered using
document.write("<!DOCTYPE html>")
See jsfiddle here: https://jsfiddle.net/570qvk2p/3/
It seems to me that maybe a doctype created the first way is not respected the same way by the rest of the DOM / CSS.
Any ideas as to what is going on here and how I could fix it would be much appreciated. My DOM unfortunately has to be constructed node by node, starting with the document type - I can't change that fact.
I am essentially trying to replicate a previously rendered DOM tree and having this type of display bug is obviously something I'd like to avoid. The original DOM rendered the same as how it looks when rendered with document.write.
The <iframe></iframe> creates a document. Since there is no doctype, this is committed to use quirks mode. Adding a documentType node to the document doesn't change this commitment.
Your document.write() code blows away the old document and creates a new one. Writing <!DOCTYPE html> at the start puts the new document into standards mode.

How to find what javascript is acting on a DOM element on page load

I have red other answers however none of them cover my case.
I have a page (http://www.lacertussoftware.com/) and there is some javascript in one of my included files that is setting the min height and height of my page on the body tag. How can i figure out what javascript is doing this? I have 7 or so files that if i remove my parallax effect / nice scrolling / the gap all go away and don't know what is doing it. Breakpointing is not useful as its on page load (especially because the code i have included on the page is not minified.)
Have you considered simply searching the sources for /min-height/ or /body.{0,50}min-height/ (and the CSSOM equivalent minHeight)?
Alternatively you can add a getter/setters for the style property to the HTMLElement/Element prototype which logs accesses to the style property and then forwards calls them to the native browser implementation. If that doesn't work you may also have to instrument .setAttribute() since the style property can be modified that way too.
Obviously this has to be done as early as possible in the document.
You could also try chrome's "break on attributes modification" feature in the the elements view of the dev tools. Or the DOMEvent breakpoints under sources.
You could try inserting a debugger; statement as a first thing in the dom ready handler, all js will pause.
Now right click on the element in the source and add a break on -> attributes modifications

How to find which script modifies css of selected attribute

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.

Debugging features on Safari to find out when elements added to page

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".

Categories