Javascript 比较两页的内容

关于现有工具的问题

背景： 我有一个我们经常使用版本控制的系统。为了比较版本，我们现在将信息转储为文本格式，然后用彩色标记打印文本的两个版本。我看起来不好看，用户很难理解

我想在此基础上进行改进，并实际显示两个版本的网页重新设计标记，然后使用某种css标记来显示这两个页面之间的差异。我认为这种方法的问题在于dom中有很多对象不会直接影响渲染，因此需要过滤掉这些对象才能使差异变得有意义

问题: 是否有任何现有的工具可以让我将的DOM与页面进行比较，然后对添加、更改或删除的内容应用某种视觉线索？它只需要在浏览器中运行。

---

这是一种可行的方法吗？

实现这一点的一种方法是（自动）截取2 dom结构的屏幕并比较这些图像。这样就不会保存/呈现dom。您甚至可以使用类似于无头浏览器的节点来为您执行此操作，从而使其快速、轻松地集成到自动化测试中

有几种工具可以帮助您做到这一点，而不是从头开始编写自己的代码，例如。（但是，如果您愿意，您可以使用并使用他们的api自己编写

这些工具允许您突出显示两幅图像中的差异

---

还有一篇很好的文章，它是另一个节点包，可以比较dom渲染的两个屏幕截图。

我看到过使用图像和png/屏幕截图的方法，但不渲染两个页面中保存的dom。有什么原因导致两个屏幕截图的差异高亮显示是不够的吗？@atmd如何获得高光截图？