Develop Reference

Which JS added inline styles?

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.

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.

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.

How to set html to a element in extjs

1) How to set HTML to already created panel or any other Element?
I am a beginner. I tried the below to set some content inside the HTML
var clickedElement = Ext.getCmp('id').el.child('>');
clickedElement.setHTML("hello");
The above is working fine but the problem is that as the panel has many div's inside it.. the above approach is erasing those inside html (i.e div's) and replacing it with the above content.
I saw through Chrome that the panel has three nested div's. So, if I want to add HTML to it then I need to give something like below:
var clickedElement = Ext.getCmp('id').el.child('>').child('>'); //two times child
When I tried the above approach, I am successfully adding the html content and also the div's doesn't remove. Here the problem is that, I can't see the added content (maybe because of some default stylings, I can see the content is being added in Chrome console though.)
I am just asking whether there is any efficient way of adding HTML to the panel. In my opinion, this should be very easy approach which I am complexing here.
2) How to check whether a Element has a particular child ?
Suppose, for example, If I added a extjs Button as a child(item) into my panel while creating it. (which I can do). How to check whether the panel has the particular element (i.e button here)?
Before asking here, I searched alot and found somewhat relative but not helpful link to my problem.

In ExtJS most components are considered to have only one body element even if you see more on the dom. In contrast to jQuery which is basically added above a markup ExtJS generate the whole markup by itself.
Now to your question, to update the HTML of a component you can simply call the update() method like that
Ext.getCmp('id').update('hello');
See JSFiddle

Ext.ComponentQuery.query('#itemIdOfComponent').update('new value');
Do not set id's on components instead add an itemId configuration and see the documentation for Ext.ComponentQuery.query.

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.