VSCode 的 Watch 面板无法监视 DOM 属性变化，因其仅重新求值表达式而不监听事件；有效方式是使用浏览器 DevTools 的 Attribute breakpoints 或代码中手写 MutationObserver。
VSCode 本身没有“监视面板”能直接监视 DOM 节点属性变化——这个功能只在 Chrome 或 Edge 的 DevTools 中原生存在。你无法在 VSCode 的 Watch 面板里输入 document.getElementById('x').attributes 并期待它自动响应后续的 setAttribute 调用。Watch 面板监听的是 JS 变量引用值或表达式求值结果，不是 DOM 状态变更事件。
为什么 Watch 面板对 DOM 属性无效
Watch 面板本质是 V8 调试器暴露的表达式求值接口，每次刷新都重新执行一次表达式。它不注册底层监听，也不触发 MutationObserver。常见误操作包括：
- 在 Watch 面板添加
el.getAttribute('data-status')→ 初始值能显示，但后续 JS 修改该属性后，面板不会自动更新（除非手动按回车重求值） - 写
el.attributes→ 返回的是NamedNodeMap快照，不是响应式对象 - 试图监视
el.dataset→ 同样是只读快照，属性变更不会触发刷新
真正有效的 DOM 属性监听方式只有两种
必须跳出 VSCode 的 Watch 面板思维，用浏览器原生机制：
-
Chrome/Edge DevTools Elements 面板右键 → Break on → Attribute modifications：这是唯一能“暂停执行”的方案，会停在调用
setAttribute、removeAttribute或设置el.id等属性的 JS 行上 -
手写
MutationObserver：在代码中显式监听，适合需要日志、条件判断或跨组件响应的场景。例如：
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === 'attributes' && mutation.attributeName === 'data-loading') {
console.log('loading 状态变了', mutation.target.getAttribute('data-loading'));
}
});
});
observer.observe(document.getElementById('main'), { attributes: true });
注意：MutationObserver 不会自动出现在 VSCode 的 Watch 面板里，但它输出的日志会出现在调试控制台，且断点可设在回调内部。
VSCode 能配合做什么（关键路径）
VSCode 的价值在于让上述两种方式“看得见源码”，而不是替代它们：
- 确保
launch.json中"webRoot"指向项目根目录，且"sourceMaps": true - Vite 项目确认
vite.config.ts中build.sourcemap = 'inline'或true - Chrome 触发 DOM 断点后，VSCode 才能准确跳转到
Modal.vue第 37 行的this.loading = false，而不是app.js:12456 - 如果用
MutationObserver，VSCode 可以在回调函数第一行设断点，并查看mutations数组结构
DOM 属性监听的本质是事件驱动，不是状态轮询。VSCode 的 Watch 面板连不上这个事件流——它只管变量，不管 DOM。
