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

Posted 2023-03-07

【中文标题】对象值更改时在 Web 浏览器中停止调试器

【英文标题】：Stop debugger in web browser when object value changed

【发布时间】：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" 属性中是否有硬值。

【参考方案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()

希望这会有所帮助。