We have a complex RIA. A particular element has a rougue "display:none" attached to it, there is no matching CSS file when viewed in the browser inspector - so assuming a JS file somewhere is applying it dynamically. Is it possible to find out which script added it?
Thanks.
Use Firefox and Firebug.
Find the element in the Firebug DOM inspector.
Right click on it
Pick "Break on attribute change"
or
Use Chrome
Find the element in the Chrome Developer tools DOM inspector
Right click on it
Pick Break On… ➡ Attributes Modifications
That will act as if you have a break point at any point in your JS that you have code that changes the attribute. Since element.style.display = "none" gets mapped onto the style attribute, it will trigger for this.
Related
is there any way to check which JS script added inline style to particular DOM element? I've been trying to find it manually, but I suppose there is a better way...
If you are using chrome, you can right-click the DOM element you want to watch (in the element inspector of the dev tools), and select Break On - Attributes Modifications.
That's about the closest solution I know of.
I don't think there is a "signature" for a javascript outcome on DOM so i guess you have much choice but disabling one by one your scripts.
Other choice: make a global search with parts of the style in your text editor, it must be stocked somewhere in your code.
is it possible to find the javascript that is setting an element attribute in chrome dev tools? or any other tool ?
Example:
Javascript set href in some external file
$('.buy_button').attr('href','asdf');
...then inside the main.html
the link
How do I find what is setting main.html in chrome dev tools or some other tool ?
Well, actually it IS possible:
locate the element you need to check (in 'Elements' tab)
open the context menu for that element (right-click on it)
choose 'Break on...', check 'Attributes modification' option
... and the script will pause (go into debugger mode) when attributes of that element are modified.
Actually this is not possible, you should go inside the javascript scripts and search it by your own. You should search for something like the id of the element, or the .attr() function and so on...
If you know what element type or class the JavaScript is hitting then you can open up that JS file in chrome or another IDE and just match the text to the class or element type that the JS is modifying.
The example on the first part of your example will hit anything with the class of buy_button so searching that would be a good start. You can open the JavaScript files inside of the Chrome inspection tool by finding them in the head tag and clicking on them. Once they are opened, you can then click anywhere and use CTRL+F to search for the class.
I'm trying to debug some styling issues on a site that has tons of .js files included. One of those scripts adds some css properties to an input element on click.
Is there an easy way to find which script and which part of it alters those css properties using Chrome Developer Tools?
Chrome Version 34.0.1847.116
In the Elements panel, right-click the element in question, and in the context menu choose Break on... > Attributes Modifications. Next time its style attribute is changed, the debugger will break on the corresponding JS line.
Use the developer tools to delete the element that changes on click. Then click the element that triggers the change. Since it can't be changed it will issue an error. The error will have a link on the right to show you exactly where it broke.
This should produce the exact file and function/script.
So say this is your element <div class="bob">Apple</div> and on click, Js adds style="color:red;" by deleting .bob you will break the script.
Note: Use developer tools to delete it. That way it doesn't permanently mess with your project.
Note2: Before deleting it, try just editing it and changing its id and/or class, like "xxbob", so it will no longer be recognized by the code.
Firebug is probably the best debugging tool that makes the life easy for developers. But one thing that I am not able to find out is how do you locate the function that changed the CSS values. In the Right Panel, when you click on any CSS rule, it will select the HTML node in the left and you get to know that these values belong to this HTML element.
Is there any way that lets you find which javascript function modified the CSS. This is shown in firebug as
element.style{
color:#898980;
top:78px;
bottom:121px;
}
I need to find which JS function changed the above values as it is not in my CSS.
The one highlighted in below Image
In the HTML panel, on the element whose style is changed : Right-click => break on attribute change.
This will break every time an attribute of this element is changed.
See also: http://www.softwareishard.com/blog/firebug/firebug-tip-break-on-html-mutation/
Florent
I'm working on a project and there is a ton of js, etc in it. I didn't write it I'm "taking it over".
There is a piece of Javascript somewhere that is adding top: -50px margin to an element with the id of "footer".
When I look into the page source (through the developer tools) I can right click on an element and "break on attribute modifications".
Is there a way to monitor this element to detect what line of js in what js file is applying this styling to it?
Simply right click on the element and select "break on attribute modifications" then when it changes the script will break and show you what line it broke on. Showing you where the JS is that changed it.
There are some great resource on how to use the console
Documentation -
code.google.com/chrome/devtools/docs
Video -
code.google.com/chrome/devtools/docs/videos.html