Determine which JS file/line is modifying an eleme

问题:

I need to determine which JS file/line is modifying an element on my page. I'm trying to find a needle in a haystack here. For example, I'm digging through 35 .js files to find out which file is responsible for a change to some text on a webpage. It seems like too much work for such a simple task.

It could be changing it in many many different ways using jQuery, or just javascript. Method is unknown. But it happens on page load.

Is it possible to see this information in Chrome (Developer Tools)?

回答1:

In Google Chrome:

1. Right-click on the element you want to detect changes to.
2. In the Elements pane of the Developer Tools that shows up, right click on the element again (in this case a <label> element.
3. Choose Break on… ▶ Attributes Modifications (or Subtree Modifications)
4. Reload. Voila! You are stopped at the JavaScript code making the modification.

回答2:

I hope following link would help you

https://developers.google.com/chrome-developer-tools/docs/javascript-debugging#breakpoints-mutation-events

It basically tells you how to track down events that mutated given dom element