How does one figure out what piece of JavaScript changes a given HTML tag?

Question

I often want to change some releatively minor detail about how JS changes the DOM, but I can never figure out which function in what script changes a given tag. How does one do this?

For example, on this page, I want whatever JS is adding the "selected" class to various a tags to also add it to the enclosing li tags. However, I have no idea how to figure out where this is taking place.

Clarification: As much as I'd like an answer to my current, specific conundrum, I'd much rather be taught how to figure it out myself.

CLARIFICATION:Is there a way to point at a certain object in the DOM and find out what script(s) are/were accessing/modifying that object? In other words "watch" that object for JS access/modification.

This question is not clear. Please post the relevant code here and if possible a demo to show what failed and what's the expected result. — elclanrs, Jun 13 '13 at 23:15

score 3 · Accepted Answer · edited May 23 '17 at 10:25

3

What you need is DOM breakpoints in WebKit's Developer Tools.

They're designed for tracking DOM mutation events - such as change of an attribute of an element (which is your case), element removal, or addition of subelement. You can refer to tutorial in DevTools documentation.

In basic cases you might want to use grep for searching the strings such as "selected" in your code.

edited May 23 '17 at 10:25

Community

1
1

answered Jun 13 '13 at 23:23

NikitaBaksalyar

2,414
1
24
27

YES! This works! Finally - this is exactly what I've been looking for, or nearly. – technillogue Jun 13 '13 at 23:45

score 1 · Answer 2 · answered Jun 13 '13 at 23:30

I’m not aware of any debugging tools that’ll tell you when a DOM element is being acted upon by a script.

(If anyone knows of any, dear lord please tell me about them — I’m a freelancer, so I spend most of my working days trying to figure out old, knotty DOM-manipulating JavaScript that someone else wrote.)

You basically have to search through every bit of JavaScript file included in the page, and identify lines that might be taking the action you’re seeing.

In the case of a class name being added to an element, an obvious search is for the class name itself, although that’s not guaranteed to work. E.g.

el.className = el.className + 'sel' + 'elected'

If jQuery is in use, I’d definitely search for addClass.

Once you think you’ve found the right line, then if you have access to the JavaScript code, you can change it and see if your change takes effect.

(And, because view source is still a part of the web, you can get access to the code by saving it all to your computer.)

The selected answer would appear to be what we've been looking for. — technillogue, Jun 13 '13 at 23:45

How does one figure out what piece of JavaScript changes a given HTML tag?

2 Answers2