Develop Reference

is it possible to find the javascript that is setting an element attribute?

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.

find javascript code that changes particular css properties

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.

How to locate in Firebug which JavaScript Function changed the CSS?

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

Determine which JavaScript file applied a style?

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.

Finding which js file to edit from firebug

I am using firebug to edit my magento theme. In a particular element I am getting an element.style attribute that I want to edit. Now how do I know which JS file is to be edited?

If you want to interact with elements via Javascript, you can use the console function in Firebug. Go to console, and click enable and from there you can start typing code as if it were javascript.
Example, if you wanted to check the z-index property of a specific element you could just type the javascript in the console:
document.getElementById("idOfElement").style.z-index
and when you hit enter it should tell you. You can also see errors in the javascript file if there are any.
If you are looking for the Javascript file of what is committing this change in the z-index property and you are 100% certain it is because of the Javascript, then you can use the debugger Firebug has which is also in the Scripts tab. If you're dealing with multiple javascript files, I'm not entirely sure how you can sift through which JS file is causing it, I believe you'll have to do that digging on your own. The debugger allows you step through your JS file though and see what changes are being made step-by-step.
Here is a tutorial on how to use the debugger if you're not familiar. Hope this helps.

Not sure about firebug,
But if you use linux you may try this command,
grep "element.style" -Rn .

Do you Want to change the Style or Something other.
If you want to change Style of a Particular Element, Just Follow the Steps
F12
Select Inspect Tool
Click on the Element where you want to change
In a FireBug Window look at Right and Make Sure style Tab is Selected
Just Single Click on value of a Particular Property
If you are not finding solution, Please Determine the Problem bit Clearly.