logo标签列表

如何在Chrome源代码调试中倒退调试JavaScript？

google-chrome-devtoolsjavascript-debugger
53

Chrome源码调试有“步过”、“步入”和“步出”按钮。但没有向后倒带的功能，以查看先前的函数。

3
在Chrome的调试器中没有这样的概念，如果要在非纯语言中实现这一点将会很“不平凡”：如何反向遍历任意副作用？我不知道有任何调试器支持这个功能。 - user2246674
2
只是记账一切都是一个选项，就像Ollydbg调试器为汇编语言所做的那样。 - HLL
3
Internet Explorer支持此功能。 - Sandy
@Sandy IE可能支持这个功能，但是Edge似乎不支持。我听说Edge使用了Chrome的调试软件。 - undefined
6个回答
26

如果你在右侧的“调用堆栈”中单击并查看父函数，你可以以某种方式向后跳转。

Chrome中还有一个设置，可以让您查看未截断的调用堆栈。 - Nate Anderson
2
只是为了明确，你说的“可以有点倒退”的说法是正确的——虽然它允许你进入调用者并查看导致调试器实际暂停在该行的上下文，但它实际上并没有撤消任何先前的执行。 - Alexander Nied
8

如我在这个答案中所说，您可以通过设置新断点并重新启动实际函数来后退。希望这样做可以解决问题。

1
这确实是正确的，但是你应该使用Chrome的实际语言“重新启动当前帧”，而不是说“重新启动实际函数”，因为它仅意味着重新尝试整个调试会话。 - G. Stoynev
7

我需要的在右侧边栏中，右键单击调用栈中的项目 -> 重新启动帧。这将从第一行重新启动所选函数。

2

我发现的一个快速解决方法是，在你处于断点中间时对源文件进行一些小的更改（空格、注释或其他任何更改），然后按Ctrl+s（保存文件），它会跳回到该源文件的第一个断点。然后您可以检查您的更改（F10“逐步进入”），如果需要，进行另一个更改，保存并重新启动。这是目前我所知道的最快速的方法。

0
2
“时间旅行调试”是一种不同且更高级的概念，与“反向调试”或“历史调试”不同。 OP正在询问反向调试 - 以“步进后退”的方式向后移动执行的能力。此外，“时间旅行调试”还允许用户根据需要编辑历史记录。请参见反向调试和时间旅行调试进行比较。 - dionyziz
0

replay.io

免责声明：我的朋友在这家公司工作，我是通过他了解到replay.io的。他没有要求我写这篇文章，我是出于自己的主动性写的，因为反向调试很棒。我还没有测试过它。我希望了解这种可能是闭源工具的知识有助于推动开源技术的发展。他们有一些开源项目，例如：https://github.com/replayio/devtools，但我不知道它覆盖了多少功能。 https://www.replay.io/似乎具有倒退/时间旅行调试功能。它可能不是完全的FOSS，但该网站声明“Replay将始终免费提供给个人”，所以至少是免费的。
时间旅行调试功能在此文档中有详细说明：https://docs.replay.io/debugging#d8966bc9bbb24a6f897c36ff70d398d1。

replay.io 似乎是基于追踪的：首先记录一次执行，然后您可以重复播放完全相同的内容，如果需要，还可以倒退时间。

一旦您有了追踪记录，每次执行都完全相同，包括例如获取 HTTP 响应等异步事件的确切时间，因此录制可能包含诸如异步事件之类的内容。

这种类型的反向调试器的常见用例是每次运行 CI 都要通过它运行，以便能够重现取决于竞争条件的错误。

在编译语言领域，令人惊叹的开源 Mozilla rr 实现了一些类似的功能。

一个很酷的事情是，replay.io 似乎能够在回溯时呈现 DOM，就像在浏览器上每个步骤都呈现一样。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接