How can I tell which Javascript module created an element/table on a webpage?

问题

I started working at a place that has a huge webpage app built already. I have been hired to do front-end testing with Selenium, but I'm curious to see the inner workings of the app. My question is, with Chrome dev tools or something similar, how can I tell what Javascript module created an element / table / form that I am seeing on the page? I can 'inspect element' and look at the DOM, but I want to know which .js file to dig into to to see how the element was built.

In essence, in Chrome dev tools, how do I bridge the gap between the DOM inspector and the Source files that built the DOM.

回答1:

creating DOM elements can be done by setting the innerHTML of any DOM element or calling appendChild method. So proxy these two using JavaScript Proxy. To know the location you can chrome console method console.trace();

Ex:

Suppose you have this HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div></div>
</body>
</html>

your proxy should be like this

var divEl = document.querySelector('div');

divEl.appendChild = new Proxy(divEl.appendChild, {
  apply: function(target, thisArg, argumentsList) {
    console.trace();
    target.apply(thisArg, argumentsList);
  }
});

some where in the code if following code is executed

var pEl = document.createElement('p');
divEl.appendChild(pEl);

you can see from where it is called in the console.

回答2:

I made a Chrome Extension that let's you inspect a page and see the relevant JavaScript code for each DOM element. It's still very flaky, but might be worth giving it a try.

It's based in part on the approach Pranay has suggested.

来源：https://stackoverflow.com/questions/41573121/how-can-i-tell-which-javascript-module-created-an-element-table-on-a-webpage

标签

javascript

google-chrome-devtools