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 a
Solution 1:
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.
Solution 2:
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.
Post a Comment for "How Can I Tell Which Javascript Module Created An Element/table On A Webpage?"