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

Question

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

我可以去所有更改值的地方并添加 debugger 语句，但这会花费很多时间。我了解了 Object.watch() 但它仅在 值更改后 执行特定功能，尽管我想看到 在哪里 它更改了在代码中，而不是 when.

有什么方法可以实现吗，也许是通过输出行号和 JavaScript 文件名，或者在网络浏览器中停止调试器？

Answer 1

以下代码将抛出一个 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 上类似地使用它。

不过有两个注意事项：

1. 你必须 'use strict' 它才能工作，否则它会忽略分配。
2. 请参阅Object.defineProperty()

希望这对您有所帮助。

Answer 2

DOM 更改断点得到了支持。

1. 转到 DevTools 的 Elements 面板。
2. 在 HTML 窗格中查找元素。
3. Right-click 在元素上。
4. Select 中断 > 属性修改.

如果您也需要查看元素值的更改，则在元素的父级上 right-click，以及 select 子树修改 .