Debugging DOM mutations with Firebug before page loading

Question

I am having problems debugging DOM changes represented by some JavaScript code that I am running. Somewhere in the code the class is changing and I'm trying to pinpoint where . Unfortunately, the new class name is so universal that searching all over the JS code yields too many results to be a viable option.

I tried debugging the Firebug bit, but despite the nice “Break on Attribute Change” , I can’t get it working as I would like. The Firebug demo is working correctly, but this is the situation after loading.

The problem is that I want to observe the mutations until the page is fully loaded . I assume that the changes happen somewhere in $(document).ready() , therefore in the DOM, but I can’t select the elements for the user interface breakpoints, as would be the case with the demo (after loading the page).

Is there any way to debug such a situation other than grepping / passing code manually?

Answer 1

I suggest removing the target object where its class name changes. With some luck, you can create a bug in your JavaScript code to find where your problem is.

Otherwise, if this is done using jQuery (addClass), you may need to modify the jQuery code itself to define the call column.

The code will look like this (make sure this code is the first code to be called after jQuery is enabled):

 (function () { var addClass = jQuery.fn.addClass; jQuery.fn.addClass = function (value) { for (var i = 0, l = this.length; i < l; i++) { // Here you put your method to start the debugger if you get your right element if (this[i].id === "abc") { debugger; } } addClass(value); } })(); 

Hope this helps.

Answer 2

This answer may seem rather lame, but I honestly think that the best solution for such errors is to "deconstruct" your program. Just make a copy of the whole project and then tear it apart. Take out the pieces of code one by one. Rotate function calls into stub functions or something else to make everything work. Find the minimum amount of code causing the error. Then the solution should be obvious.

Answer 3

Have you considered adding mutation events ? The event that I think you want DOMAttrModified is not supported in webkit, so you may have to test Firefox or Opera. In fact, it is deprecated at DOM 3 level .

There are two jQuery plugins for mutation events here ( documentation ) and here , but since you want to do this before the page loads, this may not be the answer.

Perhaps you are best off writing your own JavaScript binding for this event - there is an example in the answer if there is an alternative to DOMAttrModified that will work in webkit

Hope this helps.

Answer 4

If you want to use the "Undo Attribute Change" function for debugging, you can do the following:

• Comment all the JS on the page (hopefully everything is in the head ), except for the jQuery base load.

• Download the page and set the clock.

• Add a button that launches JS in the HTML. Or maybe start it from the console.

• Run boot / fire js. We hope your watch and break points will shoot at will.

For example, suppose your page loads / has:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> <script src="/Library_X.js" type="text/javascript"></script> <script src="/MyJS.js" type="text/javascript"></script> 

Then you can run this code in the console after setting the watchpoints:

 function addJS_Node (text, s_URL) { var scriptNode = document.createElement ('script'); scriptNode.type = "text/javascript"; if (text) scriptNode.textContent = text; if (s_URL) scriptNode.src = s_URL; document.head.appendChild (scriptNode); } addJS_Node (null, '/Library_X.js'); //-- Possible pause here. addJS_Node (null, '/MyJS.js'); // etc. 

Or temporarily name the button that launches the same JS in the HTML page.