How to find which script modifies css of selected attribute - javascript

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.

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.

Is there a way to find which script/function changes the attribute of an element?

I have the problem that on a website some script modifies the href attribute of the link tags. So for example:
<a href="#footer">go to footer</href>
becomes:
go to footer
I tried to use Chrome Developer Tools to find it's source but wasn't successful. When inspecting element and using right click --> break on ... the attribute was already changed. When setting a breakpoint on dom content loaded and combining it with the mentioned setting nothing is listed.
There are way too many scripts and searching for attr('href') or attr("href") didn't help either.
The "visual event" plugin for chrome only shows interaction events for elements - so it wasn't of much help in this case.
How could I debug this? I know that there are event listeners for "DOMAttrModified" which could give me the value before and after the change. But that's what I already know. Is it possible to originate the source of the script or that function that is causing the change?

How to tell what is directly manipulating styles in the DOM

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.

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

JQuery tool to show selected DOM elements in real time

I was recently on CodeSchool's website and took the JQueryAir course that features a web-based text editor that shows - in real time - what elements of the DOM are being selected as you write your JQuery code. It does this by highlighting the selected elements of the html page in light gray.
Does anyone know of text editor (or plugin) that can recreate that functionality? I'm mainly looking to use it for practice purposes. Or if you know of a website that would allow me to do they same thing, that would be great too.
Here is a screenshot to give you an idea of what I mean:
As the JQuery in the bottom panel changes, the html above is highlighted.
Any advice appreciated - thanks!
A simple way to do this (although perhaps not quite as dynamic as you would like) is to use FireBug's console (or similar in Chrome, IE9 etc.). After loading a page containing a jQuery reference in FireFox, go to FireBug's Console tab and paste this.
$("p").css("background-color", "gray");
Hit Enter. You can change the selector to see the results, though they will be additive until you refresh the page. Use the up arrow to bring back your most recent selector to edit.
EDIT: OK, this was before you added the screenshot showing the desired HTML source highlighting. Still, perhaps this method will come in handy at some point.

Categories