How can I tell which Javascript module created an element/table on a webpage?
Question
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.
2 answers
solution1
2 2017-01-10 17:08:09
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.
solution2
1 2017-01-10 16:15:55
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.