在 Javascript 中在运行时动态设置断点答案

【问题标题】：Setting breakpoints dynamically at runtime in Javascript在 Javascript 中在运行时动态设置断点
【发布时间】：2016-10-11 06:50:54
【问题描述】：

firebug 和 webkit 浏览器中的内置控制台都可以在运行的 Javascript 代码中设置断点，因此您可以像使用任何其他语言一样对其进行调试。

我想知道是否有任何方法可以指示 firebug 或 webkit 在运行时在文件 Y 的 X 行上设置断点，并能够检查特定范围内的变量我已经暂停了。

我需要可以在 Chrome（或任何其他 webkit 浏览器）和 Firefox 中运行的东西。对于后者，Firebug 是可接受的依赖项。支持 IE 不是必需的。

我一直在构建一个浏览器内的 IDE（感兴趣的快速视频：http://www.youtube.com/watch?v=c5lGwqi8L_g）并且想给它更多的肉。

我尝试过的一件事是将debugger; 添加为用户设置它们的额外行，但这并不是一个理想的解决方案。

【问题讨论】：

【解决方案1】：

我想说您绝对可以使用远程调试协议为 webkit 浏览器执行此操作。这是基于一个 websocket 连接和一个来回的 json 消息协议。

您可以阅读announcement 和整个protocol schema。

Chrome 还在其remote developer-tools docs 中提供了更多相关信息。

另一方面，正如您在 https://developer.mozilla.org/en-US/docs/Tools/Debugger-API 和 https://wiki.mozilla.org/Remote_Debugging_Protocol 中看到的那样，Mozilla 似乎也在努力解决这个问题，尽管我不知道它的完成状态。

在这种情况下，您可以使用Debugger.Script API setBreakPoint、getBreakPoint、getBreakpoints、clearBreakpoints 和 clearAllBreakpoints 处理断点

我希望这可以帮助您继续前进。

【讨论】：

【解决方案2】：

不存在这样的事情，至少不使用 JavaScript 的公共、可编写脚本的一面。如果您有一个可以为您执行此操作的特权浏览器扩展程序，那将是可能的。例如，Firebug 有一个debug method，您可以从它的命令行调用它，但不能从页面内的脚本调用。

所以，你有两个解决方案：

实现您自己的 JavaScript 解释器，您可以随意控制它。不过可能有点过于雄心勃勃...
依靠浏览器扩展，它可以在代码的任何位置设置断点，向公共代码公开一些 API，并通过 JavaScript 与之交互。但这意味着用户必须安装一些额外的软件才能使用您的“Web IDE”。

【讨论】：

【解决方案3】：

使用_defineSetter__ 观察变量，并在发生赋值时将其与对debugger 的调用结合使用。

__defineSetter__("name", function() { debugger; });

或定义属性：

function setter () { debugger; }

Object.defineProperty(Math, 'name', { set: setter });

参考文献

【讨论】：