Chrome中不能在HTML本身设断点，但可通过Elements面板右键目标元素选择Break on→Subtree/Attribute/Node removal设置DOM断点，用于监听JS引发的DOM变更；框架场景应优先使用其专用devtools或在组件JS逻辑中加debugger。
Chrome DevTools 里怎么在 HTML 中设断点？
HTML 本身不能直接打断点——breakpoint 只能打在可执行的 JavaScript 上。但你常遇到的“想调试 HTML 相关行为”，比如点击后 DOM 没更新、元素没渲染、事件没触发，本质是 JS 控制逻辑出了问题，所以得从 JS 入手定位。
常见误操作：右键 HTML 元素 → “Break on” → 选了 attribute modifications 或 node removal，结果断点不触发。原因往往是：目标节点没被修改，或修改发生在 Shadow DOM / 框架内部（如 React 的 setState 不直接改 DOM）。
- 优先检查 JS 文件里的事件绑定是否生效（比如
addEventListener是否在元素存在后才调用） - 用 Elements 面板右键目标元素 →
Break on→ 选subtree modifications，适用于手动操作导致子节点增删（如innerHTML = '...'） - 若用框架（Vue/React），别依赖 DOM 断点，改用框架自带 devtools 或在组件 JS 逻辑里加
debugger
在 inline script 或外部 JS 里怎么单步运行？
这是最常用也最容易卡住的场景：写了 debugger，但页面刷新后没停住。根本原因是脚本执行太快、被缓存、或加载顺序不对。
-
debugger必须写在实际会执行到的代码路径里（比如放在if (false) { debugger; }里永远不会触发） - 确保 Chrome 开发者工具已打开（否则
debugger会被忽略） - 外部 JS 要确认已加载完成：可在 Network 面板看该文件状态码是
200，且没有net::ERR_ABORTED - 如果用了
defer或async，debugger可能因执行时机靠后而错过——临时改成同步加载测试
怎么调试动态插入的 script 标签？
比如通过 document.createElement('script') 加载的代码，DevTools 默认不显示其源码，导致无法设断点或单步。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 在 Console 里执行
debugger，然后在 Sources 面板的Page→(no domain)下找刚执行的脚本片段（通常叫VMxxx） - 给动态 script 加
src属性并指向一个真实 URL（哪怕本地 file://），DevTools 就能识别为可调试资源 - 更稳的做法：把逻辑抽成函数，从控制台手动调用，比如
window.myTestFunc()，再在函数开头加debugger - 注意：
eval()执行的代码同样出现在VMxxx，但每次执行都会生成新 ID，断点不会保留
为什么 step into 有时跳进 minified 代码？
你点了 Step into，结果进了压缩后的 node_modules 或 CDN 脚本，全是 a.b(c) 这种，没法读。
- Sources 面板右侧勾选
Ignore list，添加匹配规则（如node_modules、cdn.jsdelivr.net），之后 step 就会自动跳过 - 确保源码映射（source map）可用：检查 network 请求中 .js.map 文件返回 200，且 JS 响应头含
X-SourceMap或注释含//# sourceMappingURL=xxx.js.map - 如果用构建工具（Vite/Webpack），开发模式默认开 sourcemap；生产环境一般关闭，这时就别指望 step into 第三方库源码了
真正难的不是设断点，而是判断该在哪设——DOM 变化要盯 JS 执行流，异步逻辑得留意 Promise 链和微任务队列，框架里还得区分模板编译阶段和响应式更新阶段。这些地方一不留神就跳过了关键步骤。
