对象值更改时在 Web 浏览器中停止调试器答案

【问题标题】：Stop debugger in web browser when object value changed对象值更改时在 Web 浏览器中停止调试器
【发布时间】：2017-06-20 10:04:31
【问题描述】：

我有一个<input type="hidden">。我需要看看它的价值何时发生变化。我有很多 JavaScript 文件在改变它的值。

我可以到处更改值并添加debugger 语句，但这需要很多时间。我已经了解了Object.watch()，但它只在值更改之后执行特定函数，虽然我想查看它在代码中更改的位置，而不是何时更改.

有什么方法可以实现，比如输出行号和 JavaScript 文件名，或者在 Web 浏览器中停止调试器？

【问题讨论】：

Object.watch 是一个自定义的 Firefox API。无论如何，Internet Explorer 从不支持它。
隐藏元素通常在表单的提交处理程序中填充值。您可以使用调试选项卡搜索“.value =”或使用 DOM Explorer 查看 value="some hidden value" 属性中是否有硬值。

标签： javascript google-chrome-devtools firebug developer-tools firefox-developer-tools

【解决方案1】：

DOM 更改断点支持您。

转到 DevTools 的 Elements 面板。
在 HTML 窗格中查找元素。
右键单击元素。
选择Break On > 属性修改。

如果您还需要查看元素值的更改，则右键单击该元素的父元素，然后选择子树修改。

【讨论】：

【解决方案2】：

以下代码将引发Cannot assign to read only property.. 错误（带有堆栈跟踪），您可以捕获（或在开发工具中查看）：

'use strict';
var o = {a: 29};
throwOnChange(o, 'a');

// as much code as you like here..

o.a++; // this will throw an error

function throwOnChange(obj, prop) {
  Object.defineProperty(obj, prop, {
    value: obj[prop],
    writable: false
  });
}

类似地在你的input.value上使用它。

两个注意事项：

您必须'use strict' 才能工作，否则它会忽略分配。
请看Object.defineProperty()

希望这会有所帮助。

【讨论】：