Find the events that were changing the attributes of an element in FireBug
I am working on an aspx page and i have more js logic than server side logic. So i have a html element
<div id="divOptions" class="form form-inline" style="display:none; position:absolute; left:200px; top:200px; padding:5px;">
There are multiple js files that were manipulating the “display” attribute of this html.
In one scenario i am clicking on a div xyz and in js i am making the “display as block for #divOptions”.. But some how it is getting back to “none”. I am not able to find a clue about the event which is changing the display attribute back to “none”.
Thank God….. I have FireBug with me
Firebug is a Firefox add-on that helps developers to work comfortably with client side code..
Now coming to the point on how firebug helped me..
Step 2 : Click on Html tab
After clicking on the html tab search for the element that you want. We can find search at top right corner of firebug tool.
Step 3 : Right click on the elemnt
Step4 : Now we are ready to execute our action
Now once you performed step 3, we can perform our action and see what are the events that are modifying the element
Now i am clicking on the div xyz which is making the display property of “divOption” to block..Now it will stop the execution at the place where the event is fired.
Step 6 :
Now click on play button and it will break at all the places where the elements attribute is changed..Now when it breaks the execution repeat step 5
1. This helped me a lot in finding all the events that are changing the attributes of the elements that i am interested in. We need not set any break points explicitly.