Question

是否有任何工具可以通过Javascript记录DOM的更改，然后慢慢重新运行以进行调试？基本上我想每秒记录一下html源代码，然后逐个浏览它们，看看javascript是如何改变页面的。

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

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

Answer 1

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

要打开开发工具，请在Windows上按 F12 或 Ctrl Shift I ，或 Cmd 选择 我在Mac上。
转到＆＃34;元素＆＃34;选项卡，右键单击要观察的元素，选择＆＃34; Break on ...＆＃34;，然后选择要暂停的事件。
然后让脚本运行，并且应该出现一个黑色叠加层，说＆＃34;在调试器中暂停＆＃34;。如果尚未自动选择，请转到＆＃34;来源＆＃34;开发工具中的选项卡。
从那里你可以看到整个调用堆栈，并查看和修改所有全局和局部变量和闭包使用F8，您可以恢复脚本执行（直到下一个断点），使用F11，您可以前进到下一个功能。
当然你仍然可以使用控制台和＆＃34; Elements＆＃34;页面暂停时选项卡。

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

要在源代码中设置断点，请在＆＃34; Sources＆＃34;中找到您的脚本。选项卡，通过左下角的 {} 按钮对其进行美化，然后单击脚本中的行号。在此之后，行号应该会出现蓝色箭头。

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

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

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

记录Chrome中DOM结构的变化

1 个答案: