中断变量值的变化

Posted 2023-02-22

【中文标题】中断变量值的变化

【英文标题】：Break on a change of variable value

【发布时间】：2011-12-16 04:09:45

【问题描述】：

与此处的其他问题类似，like this one。

有没有办法在任何 javascript 调试器中？ （如 IE 开发工具、Visual Studio 或 Firebug）？

我猜它类似于“监视变量”，但我希望能够看到调用堆栈并在变量实际发生更改时暂停它。

另一种方法可能是使用自定义设置器覆盖值设置，并在其中放置一个断点，但不幸的是，这不适用于 IE AFAIK。

更新 似乎这种行为至少可用于非托管代码written in C++ 所以我想也许用 C++（Google 的 V8）编写的 javascript 引擎可能有类似的东西，但这似乎也不是我想要的。

【问题讨论】：

完全破坏线程的简单方法是发出警报，这很烦人，但是您可以警报任何您想要的东西，您的变量，字符串，任何真正的东西。如果你使用类似 firebug 的东西并且你的代码中有日志，那么你可以很容易地通过警报单步执行你的程序。

问题是，我不知道变量在哪里改变。它可能发生在另一个文件（或几个文件之一）中。我不会在我的代码中乱扔警报语句以试图找到它的变化。在这一点上，我不妨使用调试器逐行遍历代码。不过还是谢谢。

【参考方案1】：

您甚至不需要 IDE - 您可以使用“Object.watch()”：

Object.Watch Tutorial

如果您使用任何一种调试器，我强烈推荐 Firebug。满足您所有的 Javascript、html 和 CSS 需求:-):

http://getfirebug.com/javascript

================================================ =============

2019 年更新：

Object.Watch 是古代历史。巧合的是，它在大多数现代浏览器中都不可用。

我个人最近最喜欢的JS调试工具是Chrome Developer Tools。

我个人最喜欢的 JS IDE（用于 Angular、.Net Core 等）是 Microsoft Visual Studio Code (MSVC)。

您几乎可以使用 Chrome 调试器执行任何“预期的”调试操作 - 包括设置监视（就像使用 FF Firebug 一样）。

Chrome 调试器与 MSVC IDE 完美集成。

两者都是“免费的”（至少“像啤酒一样免费”）；两者都在 Windows、Mac 和 Linux 上运行良好。

【讨论】：

+1 b/c 我想这会起作用。但是，我不认为它与很多浏览器 atm 兼容，b/c 它是非标准的 javascript 1.8.6：developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…

无法尝试，但正如上面的链接所指定，使用 setter/getter 方法可能是更好的方法：developer.mozilla.org/en-US/docs/JavaScript/Guide/…

2016 在 Firefox 或 Chrome 中不受支持。

这个polyfill for Object.watch 在符合 ES5 的浏览器中工作（在 Chrome 51 中测试）。

Object.prototype.watch() 是 Firefox 特有的。它已在 FF 58 中被删除。使用getters and setters 并将debugger statement 放入其中。

【参考方案2】：

我在 Chrome 中使用这个库取得了成功，它看起来支持所有主流浏览器。

https://gist.github.com/eligrey/384583

只需包含 .js 文件，然后调用：

yourObject.watch('someProperty', function()  
    doWhatYouWant(); 
    debugger; 
    console.write('this too'); 
    alert('Object Changed'); //etc 
);

【讨论】：

使用 Chrome 对我不起作用。我首先运行了 Gist JavaScript。然后我执行了watch(myObject, 'propertyName', function() console.log('changed!'); );。即使属性值发生了变化，console.log 消息也没有出现。

调用 watch() 时检查控制台中的错误。该库肯定可以工作，所以我猜要么它没有加载，要么你对它的调用没有成功。

通常我会使用 jsFiddle，但它们现在已经关闭，所以这是一个工作示例。看起来我的语法是错误的，或者他们使方法更流畅（可能是前者）：codepen.io/anon/pen/DAegv

也不适合我，但我正在尝试观察一个闭包变量......不确定这是否支持。没有收到错误，但它永远不会触发调试器语句。

【参考方案3】：

我不知道我是否误解了你的问题。如果你想在 Chrome 开发者工具的 js 调试会话中观察表达式并在它达到某个值时停止，这是相当简单的。

您可以简单地在要检查的值所在的行上放置一个断点，然后用鼠标右键单击它并选择“编辑断点...”。将弹出一个对话框，提示输入一个表达式，当其值为 true 时，执行将停止。

例如，假设您有一个循环，并且您正在向其中的变量添加一个单元，并希望在变量等于 3 时停止执行。循环中的表达式如下所示：

n = i++;

您必须在该行设置断点，并且要观察的表达式（在“编辑断点...”提示后）将是 n == 3。在运行您的代码时，当您的变量达到该值时，它将停在那里。

您会注意到您的条件已设置，因为您的断点变为橙色而不是蓝色。

【讨论】：

如果在相邻行上你有 n = i++ （所以现在你有一个循环，其中 i 递增两次）并且你没有在相邻行上放置断点，当 n 转时它会停止吗3 在邻线？如果没有，那么这不会做我想要的。或者，如果 n 是一个对象的属性并且可以在很多地方设置，那么将手表放在 n 的一个 setter 上是否足以覆盖所有文件中 n 的所有设置？

没有尝试过那个精确的例子，但据我所知，我会说是的，因为在“编辑断点...”对话框中评估的表达式不需要与代码相同在放置断点的行中。它也不需要是“var 等于值”；例如，您可以输入 i+j <= k*n 之类的内容。您甚至可以评论表达式以禁用它。它的工作原理与将if(n==3) dummy = true 放在代码中并将断点放在dummy 行中相同，但只是将其保留在断点对话框的“边缘”中。自己尝试确认；）

我相信表达式只有在断点被命中时才会被评估。因此，在两行 n = i++ 的示例中，仅在其中一个上设置断点，根据您将断点放在哪一行和 i 的初始值，您的 n == 3 断点可能不会被命中。

对不起，我在上一条评论中对“命中”的使用有点松散，因为我用它来表示两个不同的东西。当断点被命中时（我的意思是它所在的行被执行并且它包含的表达式被评估），除非表达式评估为真，否则它不会停止。但是我不相信表达式会在任何时候 n 更改时被评估，除非在断点被命中时。