Find the events that were changing the attributes of an element in FireBug

Problem Statement

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..

Step1: open Firebug
1. Click on f12 in firefox if you ahve firebug extension else install firebug and click on f12

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
After right clicking on the element there is an option called “Break on attribute change”. So when we click on this element and if some attribute of this element is changed by some javascript code then immediately the execution will break at the place where the change was done.

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 5:
On the right side we can see stack trace and we can click on event item to see the js event that is changing the elements attribute

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

Advantages
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.

Thanks,
Pavan