文章/答案/技术大牛

发布

社区首页 >问答首页 >如何辨别哪个Javascript模块在网页上创建了元素/表？

问如何辨别哪个Javascript模块在网页上创建了元素/表？
EN

Stack Overflow用户

提问于 2017-01-11 00:03:12

回答 2查看 422关注 0票数 2

我开始在一个已经有一个巨大的网页应用程序的地方工作。我受雇于使用Selenium进行前端测试，但我很好奇这个应用程序的内部工作原理。我的问题是，使用Chrome开发工具或类似的工具，我如何知道是哪个Javascript模块创建了我在页面上看到的元素/表/表单？我可以“检查元素”并查看DOM，但我想知道应该深入哪个.js文件来查看元素是如何构建的。

本质上，在Chrome开发工具中，如何在DOM检查器和构建DOM的源文件之间架起桥梁。

javascript

google-chrome-devtools

回答 2

Stack Overflow用户

发布于 2017-01-11 01:08:09

我制作了一个Chrome Extension，让您检查页面并查看每个DOM元素的相关JavaScript代码。它仍然很不稳定，但可能值得一试。

它在一定程度上是基于Pranay建议的方法。

票数 2

Stack Overflow用户

发布于 2017-01-11 00:15:56

创建DOM元素可以通过设置任何DOM元素的innerHTML或调用appendChild方法来完成。所以使用JavaScript Proxy代理这两个。要知道位置，可以使用chrome控制台方法console.trace()；

例如：

假设您有这样的HTML

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

您的代理应该是这样的

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

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

如果执行以下代码，则代码中的某些位置

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

您可以在控制台中看到它的调用位置。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41573121

复制

相似问题

问如何辨别哪个Javascript模块在网页上创建了元素/表？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何辨别哪个Javascript模块在网页上创建了元素/表？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何辨别哪个Javascript模块在网页上创建了元素/表？
EN