3

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.

Improve this question
3
  • 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. Commented Jun 13, 2013 at 23:15
  • Attempted clarification. Commented Jun 13, 2013 at 23:18
  • 2
    Great question. It’s difficult. Commented Jun 13, 2013 at 23:20

2 Answers 2

Reset to default
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.

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

1 Comment

YES! This works! Finally - this is exactly what I've been looking for, or nearly.
1

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.)

Improve this answer

1 Comment

The selected answer would appear to be what we've been looking for.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.