How to track DOM modification by JS or Jquery?

Question

On my website, after loading a page, CSS height is adding to the DOM and I am unable to find from where it was modified. Is there any way to debug it?

Below is the demo example.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <style>
            .div { border: 1px solid; }
        </style>
    </head>
    <body>
        <div class="div"> <b>hello</b> </div>
        <script>
            $(document).ready(function(){
                $('.div').css("height", "200px");
                $('body > div').css("height", "200px");
            });
        </script>
    </body>
</html>

DOM can modify from any file and in any way. How can I debug it on a large website?

Thank you.

@AlirezaAhmadi I think you missed these bits of the question: *below is the demo **example**.* and *DOM can modify from any file and in any way* — freedomn-m, Jul 22 '21 at 10:46
Does this answer your question? [Detecting class change without setInterval](https://stackoverflow.com/questions/42121565/detecting-class-change-without-setinterval) — freedomn-m, Jul 22 '21 at 10:47
Use [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) — freedomn-m, Jul 22 '21 at 10:48
If you wanna try a more modern aproach try https://alpinejs.dev/. There is a big hipe about it recently. — Gkiokan, Jul 22 '21 at 11:19

score 0 · Answer 1 · answered Jul 22 '21 at 10:51

0

You can listen to any resize on your element by ResizeObserver

        $(document).ready(function () {
            $('.div').css("height", "200px");
            $('body > div').css("height", "200px");
        });

        
        new ResizeObserver((e) => {
            console.log("cahnged");

        }).observe($('.div')[0])

.div {
            border: 1px solid;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        
<div class="div"> <b>hello</b> </div>

answered Jul 22 '21 at 10:51

Alireza Ahmadi

8,579
5
15
42

1

I want to know from which JS file, It was changed? – 26vivek Jul 22 '21 at 11:00
@26vivek I don't think you can get Origin or caller of event unless you send extra data when changing the height – Alireza Ahmadi Jul 22 '21 at 11:09
my problem is I am unable to find who is adding height to the dom in my website. – 26vivek Jul 22 '21 at 11:10
You can find it by trial and error. exclude some js file and see the result and keep going to find it – Alireza Ahmadi Jul 22 '21 at 11:11
@26vivek Which IDE do you use? If you are using visual studio put `debugger` and see the call stack – Alireza Ahmadi Jul 22 '21 at 11:14
I use phpstorm. – 26vivek Jul 22 '21 at 11:15
Can you put your code in stackblitz to better explore that? – Alireza Ahmadi Jul 22 '21 at 11:17
@26vivek Did you figure this out? I am in the same boat. I have a 3rd party JS file loaded on my web site modifying my DOM and I can't tell which one is doing it – Pascal Mar 08 '23 at 02:35

Kemal Kaplan · Accepted Answer · 2021-07-22T11:12:14.933

0

You can observe all changes in the DIV element by using MutationObserver.

let observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
     console.log(mutation.attributeName);
  });
});

observer.observe($('#test')[0], {childList:true, attributes:true}); 

//test  
$('#test').height("50px")      
setTimeout(function(){$('#test').height("100px")},3000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">

https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord

edited Jul 22 '21 at 11:12

answered Jul 22 '21 at 11:04

Kemal Kaplan

932
8
21

How will I get the JS file path if it was changed from a different file? – 26vivek Jul 22 '21 at 11:06
maybe you can put a breakpoint on the .resize() function for the div, and expect that the offending file revels itself in the call stack. Just a wild guess... – Kemal Kaplan Jul 22 '21 at 11:19
Yes, resize browser width and debugger works. Thank you. – 26vivek Jul 22 '21 at 11:31

How to track DOM modification by JS or Jquery?

2 Answers2