javascript - 有没有办法在执行 JavaScript 时回显每一行？

Question

我有两个应该运行相同的程序。他们不是。我想看看他们的执行方式有何不同。 Chrome、Firefox 或 Safari 中是否有一个选项可以在执行时记录/回显每一行 JavaScript？或者还有其他方法可以做到这一点，而不是每隔几行手动添加 console.log ？注意:分歧是 10k 或 20k 也许 100k 行深，理想情况下我希望它打印类似于 Chrome 开发工具的变量。

然后我可以转储日志并找到差异

单步执行调试器中的代码并不是一个解决方案，因为单步执行到这一步需要数小时甚至数天的时间。

一个想法是使用 babel 或 uglify 插件使用最后一个为每一行发出代码来打印它将要执行或刚刚执行的操作。

另一个想法是是否有一种方法可以从 js 转储所有内存，以便我可以比较所有对象和所有引用。它们应该是相同的，所以当我看到两个不同的转储时，我就会发现我的错误。注意:JSON.stringify 不是一个选项，因为我需要查看所有变量/对象/类等。

注意:我不是在寻找诸如“使用 console.log”或“调试器中的步骤”之类的基本答案。我很感谢您的帮助，也许我忽略了一些简单的事情，但我确实有相当多的 JavaScript 经验。

也许一个例子会有所帮助。想象一下，您获得了像谷歌文档一样大的应用程序的源代码。你在它上面运行一些处理器，它不会破坏任何东西或改变任何东西。除非确实如此。你看看这些变化，看不出有什么问题。您所知道的是，当您运行它时，它会运行，但有些东西会被巧妙地破坏。所以你在那里设置一个断点，发现数据很糟糕。但什么时候变坏了呢？您不知道代码(您刚刚得到它)。以前可能有数百行或数千行。您不知道在哪里放置断点或console.logs。这可能需要几周的时间。但是，如果您知道代码应该运行完全相同，如果您可以打印所有执行行，您将在几分钟而不是几天内找到错误。

Answer 1

您可以在 function() 的开头或您想要的位置添加 debugger;，然后打开控制台。

当到达调试器时，它会停止执行。之后您可以逐步执行代码并添加一些 watch 。

它适用于所有最新的浏览器。

示例:

function test()
{
 var rand = Math.random();
 debugger;
 return rand;
}

test();