pavanarya

Let us share the knowledge

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

leave a comment »

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
1

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

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

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
4

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

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

Written by pavanarya

October 26, 2013 at 2:27 pm

Posted in FireBug, Java script, Jquery

Tagged with ,

Follow

Get every new post delivered to your Inbox.

Join 69 other followers

%d bloggers like this: