浏览器原生不支持属性变更断点，因JavaScript无此机制；只能在赋值语句（如obj.prop = value）设断点，或用Object.defineProperty拦截set、Proxy代理对象配合debugger实现主动监控。
浏览器原生不支持直接在对象属性被修改时自动暂停，因为 JavaScript 没有“属性变更断点”这一机制。你无法像在 Java 中对字段设监听断点那样，在 obj.name = 'Alice' 的赋值发生前、或 name: 'Alice' 定义处点击加断点——后者根本不是可执行语句，前者虽可设断点，但需你提前知道哪一行改了它。
只能在赋值语句上设断点
真正能触发暂停的位置，必须是实际执行赋值的代码行：
-
user.profile.name = 'Tom';—— 点击这行左侧行号可设断点 -
this.data = newData;—— 同样有效 -
Object.assign(target, { x: 1 });—— 断点设在这行，而非{ x: 1 }字面量内部
如果你不知道哪行改了属性，盲目搜索所有 = 或 set 调用效率很低。这时需要更主动的监控手段。
用 Object.defineProperty 拦截赋值
这是最轻量、兼容性最好的运行时拦截方式，适合调试阶段临时注入：
立即学习“Java免费学习笔记（深入）”；
- 重定义目标属性，用
set描述符包裹原逻辑，并插入debugger - 例如：
const originalValue = obj.prop;
Object.defineProperty(obj, 'prop', {
set(value) {
debugger;
originalValue = value;
},
get() { return originalValue; }
});
之后任何 obj.prop = xxx 都会触发调试器暂停，且能看清调用栈来源。
用 Proxy 监控整个对象
若需观察多个属性或动态新增属性，Proxy 更灵活：
- 创建代理对象，拦截
set操作，统一加debugger - 示例：
const proxied = new Proxy(originalObj, {
set(target, key, value) {
debugger;
target[key] = value;
return true;
}
}); - 注意：Proxy 不会改变原对象行为，只对通过代理的操作生效；调试完记得切换回原对象引用
Chrome DevTools 中的替代方案
虽然不能监听属性变化，但可借助其他断点类型缩小范围：
-
DOM 断点：如果属性变更最终反映在 DOM 上（如
el.dataset.id），右键元素 → “Break on” → “Attribute modifications” - XHR 断点：若属性来自接口响应，可在 Network 面板中右键请求 → “Break on request”
-
条件断点：在疑似赋值行设条件断点，例如
obj.status === 'pending'时才暂停
