Question

我开始在一个已经建立了巨大网页应用的地方工作。我被聘请与Selenium进行前端测试，但我很想看到应用程序的内部运作。我的问题是，使用Chrome开发工具或类似的东西，我怎么能告诉Javascript模块创建了一个我在页面上看到的元素/表格/表单？我可以'检查元素'并查看DOM，但我想知道要挖掘哪个.js文件以查看元素是如何构建的。

从本质上讲，在Chrome开发工具中，如何弥合DOM检查器与构建DOM的源文件之间的差距。

Answer 1

创建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);

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

Answer 2

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

它部分基于Pranay建议的方法。

如何判断哪个Javascript模块在网页上创建了元素/表？

2 个答案: