How to check JavaScript execution history on DOM

Question

<div class="box"></div>

// First script
$('.box').width(100);

// Second script
$('.box').addClass('color');

// Third script
$('.box').fadeOut();

result:

<div class="color" style="width: 100px; display: none;"></div>

It might has change to do something to one DOM by different js file, if the script code was separated to many js file, it's really hard to find out the div was affected by who, is there any tool could check the execution history on DOM?

You may want to check this [link][1] out first. [1]: http://stackoverflow.com/questions/6435868/what-happens-when-you-have-two-jquery-document-ready-calls-in-two-javascript — Addarsh Chandrasekar, Jul 01 '15 at 06:09
@dfsq Isn't breakpoints is use on JavaScript code, but in my case I don't know the div was changed by who — Chan, Jul 01 '15 at 07:24
I mean you can set breakpoints in Chrome developer tools on subtree modifications, attributes modifications ... — dfsq, Jul 01 '15 at 07:59

score 0 · Answer 1 · answered Jul 01 '15 at 06:20

0

Of course there is, you just need to open developer tools (F12), open network section activate it (if not activated, happens alot in IE) and refresh your site, you will see all the tracing that has occurred on your web and every file that was called in the order it was called.

answered Jul 01 '15 at 06:20

Barr J

10,636
1
28
46

It's not like answer my question – Chan Jul 01 '15 at 07:23
a tool to check the execution history is only the network section in developer tools, as js is created on the run. The only way to debug js through a compiler is using IE when you run it and only in VS. – Barr J Jul 01 '15 at 07:30

How to check JavaScript execution history on DOM

result:

1 Answers1