如何扫描数千个网站并分析每个网站的 JavaScript 对页面 DOM 所做的更改答案

【问题标题】：How to scan thousands of websites and analyze the changes each site's JavaScript makes to the page's DOM如何扫描数千个网站并分析每个网站的 JavaScript 对页面 DOM 所做的更改
【发布时间】：2014-11-20 15:42:51
【问题描述】：

我的任务是：

给定一个 URL，解析其 html 页面（简单），提取所有 javascript（简单），并分析每个 javascript 在做什么/每个 javascript 如何更改 DOM。

我尝试过的：各种 javascript 引擎 - 无济于事，不懂 DOM phantomjs/casperjs - page.evaluateJavaScript API 看起来很有希望，但无法使其工作，无处可找到任何文档/示例

非常感谢任何建议。谢谢。

【问题讨论】：

我不确定你在问什么..
所以你在这里做某种逆向工程？
一个html页面可能包含许多javascript，每个javascript块的执行（以结束）可能会改变DOM。我要问的是，当执行 javascript 块时，我如何知道 DOM 的哪一部分被更改/更新。
如果一个DOM元素被一段代码改变了，它应该在代码中告诉你哪个元素被改变了。发布一些代码，我们将能够为您指出。
最好从头开始编写一个全新的 JS 引擎（任何现有的开源引擎都对您没有帮助，因为它们的目的完全不同）即使您使用无头浏览器（例如僵尸）来处理它/casper/幻象例如每个网站都需要大量的处理能力。提示：模仿蜘蛛猴很容易，这样您就可以为目标脚本块提供有效的 DOM 实现，这是一个很好的起点github.com/w3c/Amaya/blob/master/Amaya/amaya/javascript.c

标签： javascript dom

【解决方案1】：

您似乎在寻找MutationObserver。这是允许您注册您的代码将被告知有关 DOM 更改的方法。

您似乎需要在每个您想知道它是否发生变化的元素上设置一个 MutationObserver。为此，您需要遍历 DOM，将 MutationObservers 添加到元素中。

一般来说，您应该避免在大多数生产代码中使用 MutationObservers，因为它们会显着影响性能。但是，听起来你是想专门调查一些代码的操作，而不是经常使用它。为此，他们应该没问题。

A brief overview
A more in-depth discussion
A screencast by Chromium developer Rafael Weinstein
The mutation summary library
The DOM standard 定义了 MutationObserver 接口
Old Mutation events interface

示例代码：

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

// later, you can stop observing
observer.disconnect();

附加阅读列表及以上代码取自MutationObserver page on MDN。该页面将示例代码的来源列为this blog post。

编辑 2：

对于您描述的如此庞大的任务（“以可编程方式扫描数千个网站”），您可能更容易下载 Firefox 的源代码并修改该代码以记录每个页面的 JavaScript 对页面的 DOM。这可以非常合理地记录哪段代码、哪个函数，甚至源代码中的哪个行号进行了更改。

您想要“以可编程方式扫描数千个网站”。这不是一个小项目，需要大量的自动化工具。存在自动化浏览器操作的工具（例如Selenium）。浏览器已经完成了所有解释 JavaScript 代码和对 DOM 进行更改的工作，同时确切知道哪一行代码/函数正在进行更改。 easy 解决方案对公开可用的源代码进行最小限度的更改，仅将发生更改、发生更改的行/函数等转储到控制台。浏览器已经将函数/行转储到控制台以查找 JavaScript 异常。所有这一切都需要对源代码进行微小的更改，以调用将 JavaScript 函数和行号转储到控制台的现有函数。控制台可以是redirected to store output in a file。

【讨论】：

我确实查看了 Mutation Observer，但对我的情况没有帮助。我需要以可编程方式扫描数千个网站（不是我的网站）并分析某些特定的 javascript 块以查看它们执行的 DOM 更改。
找出他们对 DOM 做了哪些更改的唯一有保证的方法是观察 DOM 并查看实际进行了哪些更改。他们可以通过许多不同的方法进行更改，并且这些方法可以是间接的。
您希望只分析特定的代码部分，还是网站上的所有代码部分？
如果没有现有的软件/技术可以提供帮助，修改浏览器/js引擎代码将是我最后的选择。
请在问题中提供更详细的要求和限制说明，这样我们就不会笨手笨脚地为您提供不符合要求的答案满足您的需求。作为其中的一部分，请解释哪些要求阻止了帧缓冲区的存在（没有附加监视器的帧缓冲区，目标是远程主机进行显示，甚至是虚拟主机）。

【解决方案2】：

在我的脑海中，有几种方法可以查看一段 JavaScript 代码并找出正在更改的元素。

// Single Element
    var elementById = document.getElementById("elementID"); // Reference by ID
    var elementByClass = document.getElementByClass("elementClass"); // Reference by Class
    var elementByTag = document.getElementByTagName("elementTag"); // Reference by Tag Name

// Multipe Element
    var elementsByClass = document.getElementsByClassName("elementsClass"); // Reference by Class
    var elementsByTag = document.getElementsByTagName("elementsTag"); // Reference by Tag

如果您需要进一步的帮助，请更直接地提出您的问题。

【讨论】：