记录Chrome中DOM结构的变化

Question

有没有什么工具可以通过Javascript记录DOM的变化然后重新慢慢运行来调试？基本上我想每秒记录 html 源代码，然后一一浏览它们以查看 javascript 如何更改页面。

有大量的 JavaScript 对我来说很难理解。它被缩小了。我只感兴趣观察该脚本如何更改 DOM 中特定节点的状态。变化很快，我想慢慢观察。

更新：每当 dom 元素发生变化时，我可以添加断点来暂停 javascript 的执行。但正如我所说，该元素更改得太频繁了。如果有类似“当数字变化% 100 == 0时暂停执行JS”的内容，它可以很好地满足要求

Answer 1

您可以在 Chrome 开发工具中设置断点，这将暂停该页面上的所有脚本执行，让您有时间检查所有内容。

要打开开发工具，请在 Windows 上按F12或CtrlShiftI在CmdOptIMac 上。
转到“元素”选项卡，右键单击要观察的元素，选择“中断...”，然后选择要暂停的事件。
然后让脚本运行，并且应该出现一个黑色覆盖层，显示“在调试器中暂停”。如果尚未自动选择，请转到开发工具中的“源”选项卡。
从那里您可以看到整个调用堆栈，并查看和修改所有全局和局部变量以及闭包。
使用 F8，您可以恢复脚本执行（直到下一个断点），使用 F11，您可以前进到下一个函数。
当然，当页面暂停时，您仍然可以使用控制台和“元素”选项卡。

如果需要更精细的断点，可以在源代码中设置断点，或者替换某些对象引用中的函数。

要在源代码中设置断点，请在“源”选项卡中找到您的脚本，通过{}左下角的按钮对其进行美化，然后单击脚本中的行号。之后行号应该有一个蓝色箭头。

要通过替换函数来设置断点，您需要一些对象引用来使用。
假设我们正在使用 jQuery，所以我们有一个$变量，它有一个.ajax()方法。我们可以通过执行以下操作在其中注入断点：

var oldAjax = $.ajax;
$.ajax = function()
{
    debugger;
    return oldAjax.apply($, arguments);
};

如果没有像 之类的对象$，您可以从控制台访问它，但您仍然可以使用它，如果您可以设置断点，以便这样的对象将显示在所调用函数之一的变量范围中的某个位置。
从那里，您可以右键单击变量的值，选择“存储为全局变量”，然后继续执行上面的方法，只需使用temp1代替$。