Recording the change in DOM structure in Chrome

Question

Is there any tool to record the change of DOM by Javascript and then re-run it slowly to debug ? Basically I want to log the html source code every second and then go through them one by one to see how the javascript is changing the page.

There is huge javascript which is difficult for me to understand. It is minified. I am only interested in watching how that script changes the state of a particular node in DOM. The changes are very fast and I want to observe it slowly.

Update: I can add break point to pause execution of javascript whenever a dom element changes. But as I have said the element is changed too frequently. It there is something like "pause execution of JS when the number changes % 100 == 0" it would serve the requirement well

Why do you need to record and replay? Why don't you look at what's happening "live" ? There are many ways to slow things down, for example you could stop JS every time a DOM element is changed. — XCS, Dec 11 '15 at 11:48
`"pause execution of JS when the number changes % 100 == 0" ` Listen for DOM changes, increment a counter a do exactly that. You can stop JS execution by showing an `alert` for exmaple. http://stackoverflow.com/questions/3219758/detect-changes-in-the-dom — XCS, Dec 11 '15 at 11:49
@Cristy : I can't observe too fast. In live mode I can see the final change - but not the intermediate states which persist for very small amount of time — Ashish Kedia, Dec 11 '15 at 14:53

score 5 · Answer 1 · answered Dec 11 '15 at 11:54

You can set breakpoints in the Chrome dev tools, which will pause all script execution on that page and give you time to examine everything.

To open the dev tools, press F12 or CtrlShiftI on Windows, or CmdOptI on Mac.
Go to the "Elements" tab, right-click on the element you want to observe, select "Break on...", and choose the events on which you want to pause.
Then let the script run, and a dark overlay should appear, saying "Paused in debugger". If not selected automatically already, go to the "Sources" tab in the dev tools.
From there you can see the entire call stack, and see and modify all global and local variables and closures.
With F8 you can resume script execution (until the next breakpoint), and with F11 you can step forward into the next function.
Of course you can still use the console and the "Elements" tab while the page is paused.

If you need finer breakpoints, you can set a breakpoint in the source code, or replace a function in some object reference.

To set a breakpoint in the source, find your script in the "Sources" tab, prettify it via the {} button at the bottom left, and click a line number in the script. The line number should get a blue arrow after that.

To set a breakpoint by replacing a function, you'll need some object reference to work with.
Let's say we're working with jQuery, so we have a $ variable, which has a .ajax() method. We can inject a breakpoint there by doing the following:

var oldAjax = $.ajax;
$.ajax = function()
{
    debugger;
    return oldAjax.apply($, arguments);
};

If there is no object like $, to which you have access from the console, you can still use it, if you can set a breakpoint so that such an object will show up somewhere in the variable scope of one of the invoked functions.
From there you can right-click the value of the variable, select "Store as Global Variable" and then proceed with the method above, just using temp1 instead of $.

Recording the change in DOM structure in Chrome

1 Answers1