CODEWITHSUNDEEP
javascriptjquerygoogle-chrome-devtools
Alexander Solonik
Alexander Solonik

Reputation: 10230

Detect which line of JS is manipulating a given HTML element

I was just coding my site HERE

username: purplefront

password: purple123

Now the problem is in the gallery, go to the gallery section and click on any of the images and you'll see that after the popup appears and closes, the image on the thumbnail disspears , if you check the inspect element , there is some JS that is obviously manipulating the display property.

I did a small hack that is set the display:block !important .

Is there anyway to zero down and identify which line of JS is doing the manipulation?

P.S. I use chrome for debugging.

Upvotes: 0

Views: 67

Answers (1)

Niels Keurentjes
Niels Keurentjes

Reputation: 41958

As an inline style is technically a DOM-tree modification you can just right-click the element in the 'Elements' tab, select 'Break on...' at the bottom, and then 'Attribute Modifications'. It will then pause in the JS debugger with a full callstack to zero in on the location.

Upvotes: 3

Related Questions