How can i trace changes made to the DOM by JavaScript?

Question

I have a large website in development with a large amount of JS in different files. I have come across an issue where something is removing a class from the DOM. I can see it when I view source but not in Firebug.

Normally I would place some alerts/console.log calls with the hasClass value but because I have no idea where to start I wanted to know if I can trace the change back when it occurs somehow?

Denis

See http://stackoverflow.com/questions/648996/how-do-i-monitor-the-dom-for-changes — Crescent Fresh, Oct 05 '09 at 13:22
Also http://stackoverflow.com/questions/1218445/is-there-any-ondocumentchange-event (specific to IE) — Crescent Fresh, Oct 05 '09 at 13:22

score 1 · Accepted Answer · answered Oct 05 '09 at 15:04

1

Firebug lets you set a breakpoint and single-step through your code. This should make it clear where the issue is happening.

answered Oct 05 '09 at 15:04

Tim Howland

7,781
4
26
46

That would mean stepping through every line of each JS file? If so it's not practical. – Denis Hoctor Oct 07 '09 at 13:04

score 0 · Answer 2 · answered Oct 05 '09 at 15:00

0

that specific class name must be in use in that hidden function that remove it, right? so either grep for it on posix-based system, or, if you are using Win system, use your IDE "search-in-files" function to trace that modification.

answered Oct 05 '09 at 15:00

Tzury Bar Yochay

8,418
4
47
71

a friend of mine (http://intellectronica.net/) just sent me a comment on this one (at friendfeed) here is what he says: in YUI3, every attribute of every object has a corresponding change event, so you can just create a handler for the change event of the class attribute, put a breakpoint there and examine the stack trace. It's such a brilliant idea, they should adopt it as a standard for the DOM. – Tzury Bar Yochay Oct 05 '09 at 20:05

How can i trace changes made to the DOM by JavaScript?

2 Answers2