VSCode本身不支持监听DOM属性变化，该功能仅存在于Chrome DevTools中；需在Elements面板右键元素选择“Break on Attribute modifications”，并正确配置launch.json的webRoot、sourceMaps等以实现源码映射。
VSCode 本身不支持直接监听 DOM 属性变化
你无法在 VSCode 编辑器里对 HTML 元素右键选“Break on attribute modification”——这个功能只存在于 Chrome DevTools 的 Elements 面板中。VSCode 的断点系统面向的是 JavaScript 执行流，不是 DOM 状态变更。所以别在 launch.json 里找类似 domBreakpoints 这种配置项，它根本不存在。
真正起作用的是 Chrome DevTools 的 DOM 断点
要在属性变化时暂停执行，必须用浏览器原生能力：
- 打开 Chrome，按
F12进入 DevTools - 在 Elements 面板中找到目标元素（比如
<div id="app">） - 右键该元素 → 选择
Break on→ 勾选Attribute modifications - 之后只要 JS 修改了它的任意属性（如
el.setAttribute('data-loading', 'true')），执行就会停在修改那行 JS 上
注意：这个断点会停在触发变更的 JavaScript 行（可能是你写的 toggle()，也可能是框架内部代码），不是 HTML 行。VSCode 只能同步显示这行源码（前提是 source map 正确）。
VSCode 要配合好，得靠 launch.json 映射对路径
如果断点停在压缩后代码或错位行，说明 VSCode 没把浏览器发来的调试位置映射回原始源码。关键配置项是：
立即学习“前端免费学习笔记（深入）”；
-
"webRoot": "${workspaceFolder}"：确保和你本地项目根目录一致 -
"sourceMaps": true：强制启用 source map 解析 -
"sourceMapPathOverrides"：Vite 项目常见要加"webpack:///./src/*": "${webRoot}/src/*"；Vue CLI 项目可能需"webpack:///src/*": "${webRoot}/src/*" - 确认构建时生成了
.map文件：Vite 用户检查vite.config.ts中build.sourcemap是否为true；Webpack 用户确认devtool: 'source-map'
配错任意一项，Chrome 触发的 DOM 断点就只能停在 app.bundled.js:1234，而不是你编辑器里的 components/Modal.vue 第 42 行。
为什么不能只靠 Live Server + 点击行号设断点
很多人试过右键 HTML 文件 → Open with Live Server，然后在内联 <script> 里点行号设断点，结果 DOM 断点完全不响应。这是因为：
- Live Server 启动的是
http://127.0.0.1:5500/xxx.html，但你的launch.json如果写的是"file": "${workspaceFolder}/index.html"，VSCode 就不会接管这个请求，DOM 断点失效 - 必须用
"type": "pwa-chrome"+"url": "http://127.0.0.1:5500/index.html"才能建立完整调试通道 - 内联脚本断点有效，但 DOM 断点依赖浏览器底层事件监听，只有通过 Chrome DevTools 或 VSCode 经由 Debugger for Chrome 扩展发起的调试会话才能激活
最易忽略的一点：DOM 断点只对「运行时实际存在的元素」生效。如果你在 Vue 的 onMounted 里才创建该元素，那在组件挂载前设置的 DOM 断点是白设的——它还没进 DOM 树，浏览器根本不监听。
