Find javascript that is changing DOM element

Question

Are there any techniques I can use to find what javascript is altering an HTML element? I am having some trouble finding how a particular element is getting an inline style of display:none added on load. I know I will find the script that does this eventually, but I want that process to be easier.

My ideal solution would be some way of breaking javascript execution as soon as a DOM element is modified. I am aware of Chrome's dev tools ability to right click an element and select Break On > Attribute Modifications. However, this is happening sometime during page load, so it'd be really nice if I could insert some script before all other script declarations that says 'watch for an element with class XYZ' and break JS execution on element modification. Then, JS execution would either break where I can see the JS that modified the element, or perhaps that could be found by looking at the call stack, but either way, I would be able to see the script that triggered the break to happen. I have found some answers that tell me how to do that using Chrome dev tools / Firebug, but like I said, this question is about the programmatic approach.

Why note just get all the JS into one directory and do a grep for 'none'? — Ed Heal
– Ed Heal, Commented Jul 25, 2014 at 20:12

JohnnyHK · Accepted Answer · 2021-03-01 17:31:52Z

135

Right click on DOM element > Break on > Attributes Modifications

Via #3 in https://elijahmanor.com/blog/7-chrome-tips-developers-designers-may-not-know

edited Mar 1, 2021 at 17:31

JohnnyHK

313k70 gold badges632 silver badges479 bronze badges

answered Apr 30, 2015 at 19:04

Nighto

4,2623 gold badges28 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nighto Over a year ago

@VitalyZdanevich can you provide a codepen example?

Tyguy7 Over a year ago

Ok, so you can't set this kind of breakpoint and reload the page.... only seems to work with sources breakpoints.

Colin · Accepted Answer · 2020-08-18 17:02:21Z

12

The accepted answer doesn't fully answer the question, because it doesn't help with page loads.

I solved this issue but putting a script block immediately following the element in question.

<script type="text/javascript"> debugger; </script>

I was then able to attach the dom motification break points. By right clicking the element and selecting "break on" -> "attribute modifications" in the developer tools as described in other answers.

answered Aug 18, 2020 at 17:02

Colin

1311 silver badge4 bronze badges

2 Comments

p e p Over a year ago

I would have appreciated this back when I posted the question! I was able to do what I needed way back when but this is what I was missing.

abePdIta Dec 24, 2024 at 18:04

You can also set a breakpoint early in the JS code and, when the execution stops, add the "break on" condition. Tested in Firefox.

Community · Accepted Answer · 2017-05-23 12:26:06Z

7

you can use :-

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
  }
}, false);

Have a look at this :-

Event detect when css property changed using Jquery

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Jul 25, 2014 at 20:14

Alok

5221 gold badge3 silver badges15 bronze badges

2 Comments

Steven Kalt Over a year ago

Yep, looks like DOMAttrModified is deprecated in all major browsers according to MDN

shaune Over a year ago

Seems like the replacement for this DOMAttrModified is using the newer MutationObserver. Still, this answer doesn't directly help the poster figure out what they need, unless you add the tip of adding a debug statement and inspecting the stack, or perhaps using console.trace() instead of console.log()

Collectives™ on Stack Overflow

Find javascript that is changing DOM element

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related