Javascript 中断变量值的变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7910623/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Break on a change of variable value
提问by user420667
Similar to other questions here, like this one.
类似于这里的其他问题，比如这个。
Is there a way to break on the change of a variable value in any JavaScript debugger? (like IE Developer tools, Visual Studio, or Firebug)?
有没有办法在任何 JavaScript 调试器中中断变量值的更改？（如 IE 开发工具、Visual Studio 或 Firebug）？
I guess it's something like a "watch variable", but I want to be able to see the callstack and pause it when the change to the variable actually occurs.
我想它类似于“观察变量”，但我希望能够看到调用堆栈并在实际发生变量更改时暂停它。
An alternative approach might be to override the value setting with a custom setter, and put a breakpoint in that, but unfortunately that won't work for IE AFAIK.
另一种方法可能是使用自定义设置器覆盖值设置，并在其中放置一个断点，但不幸的是，这不适用于 IE AFAIK。
UPDATEIt appears that this type of behavior is available at least for unmanaged code written in C++So I thought maybe a javascript engine written in C++ (Google's V8) might have something similar, but that doesn't appear to have what I want either.
更新似乎这种行为至少适用于用 C++ 编写的非托管代码，所以我认为用 C++ 编写的 javascript 引擎（Google 的 V8）可能有类似的东西，但这似乎也没有我想要的东西。
采纳答案by paulsm4
You don't even need an IDE - you can use "Object.watch()":
您甚至不需要 IDE - 您可以使用“Object.watch()”：
If you use any one debugger, I'd strongly recommend Firebug. For all your Javascript, HTML and CSS needs :-):
如果您使用任何一种调试器，我强烈推荐 Firebug。对于您所有的 Javascript、HTML 和 CSS 需求:-)：
http://getfirebug.com/javascript
http://getfirebug.com/javascript
===========================================================
================================================== ==========
Update for 2019:
2019 年更新：
Object.Watchis Ancient History. Uncoincidentally, it's unavailable in most contemporary browsers.
My personal favorite JS debugging tool these days is Chrome Developer Tools.
My personal favorite JS IDE (for Angular, .Net Core, etc) is Microsoft Visual Studio Code(MSVC).
You can do just about any "expected" debugging operation - including set watches - with the Chrome debugger (just as you could with FF Firebug).
Chrome debugger is well integrated with the MSVC IDE.
Both are "free" (at least "free as in beer"); both run well on Windows, Mac and Linux.
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 上运行良好。
回答by rainabba
I'm having success with this library in Chrome and it looks to support all major browsers.
我在 Chrome 中使用这个库取得了成功，它看起来支持所有主要浏览器。
https://gist.github.com/eligrey/384583
https://gist.github.com/eligrey/384583
Just include the .js file, then call:
只需包含 .js 文件，然后调用：
yourObject.watch('someProperty', function() {
doWhatYouWant();
debugger;
console.write('this too');
alert('Object Changed'); //etc
});
回答by Pere
I don't know if I misunderstood your question. If you want to watch an expression and stop when it reaches a certain value while in a js debugging session in Chrome Developer Tools, it's rather trivial.
我不知道我是否误解了你的问题。如果你想在 Chrome 开发者工具中的 js 调试会话中观看一个表达式并在它达到某个值时停止，这是相当简单的。
You can simply put a breakpoint on the line where the value you want to check is, then click with right mouse button on it and select "Edit breakpoint...". A dialog will pop up prompting for an expression, where execution will stop when its value its true.
您可以简单地在要检查的值所在的行上放置一个断点，然后在其上单击鼠标右键并选择“编辑断点...”。将弹出一个对话框提示输入表达式，当其值为真时执行将停止。
For instance, let's say you have a loop and you are adding one unit to a variable inside it and want to stop execution when the variable equals to 3. The expression in loop would look like this:
例如，假设您有一个循环，您正在向其中的一个变量添加一个单元，并希望在变量等于 3 时停止执行。循环中的表达式如下所示：
n = i++;
n = i++;
You must set your breakpoint on that line and the expression to watch (after prompted by "Edit breakpoint...") would be n == 3. When running your code it will stop there when your variable reaches that value.
您必须在该行上设置断点，并且要监视的表达式（在“编辑断点...”提示后）将为n == 3. 运行您的代码时，它会在您的变量达到该值时停止。
You'll notice your condition is set because your breakpoint turns orange instead of blue.
您会注意到您的条件已设置，因为您的断点变为橙色而不是蓝色。
