可在devtools断点暂停时直接修改变量值，通过sources面板设断点、scope面板编辑或console赋值，支持条件断点和debugger语句，但const变量不可重赋值，修改不持久且不影响源码。
在 JS 项目中，你可以直接通过浏览器开发者工具（DevTools）的断点功能，在代码暂停执行时修改变量值，无需重启或重新构建。关键在于“暂停时修改”，而不是“运行后覆盖”——此时变量仍处于作用域内，修改会立即生效并影响后续逻辑。
在 Sources 面板设置断点并修改变量
打开 DevTools（F12 或 Cmd+Opt+I），切换到 Sources 标签页，找到对应 JS 文件（可借助左侧文件树、Ctrl+P 搜索文件名，或用 Ctrl+Shift+O 跳转函数）。点击行号左侧灰色区域设置断点（红色圆点），刷新页面或触发对应逻辑，代码会在该行暂停。
- 暂停后，在右侧 Scope 面板能看到当前作用域内的变量（Local、Closure、Global 等），鼠标悬停变量名可查看值，双击值（如数字、字符串、布尔值）即可编辑
- 也可在下方 Console 面板直接输入变量名赋值，例如：
count = 99、user.name = "test"，回车即生效（前提是变量在当前作用域可访问） - 修改后按 F8 继续执行，或 F10/F11 单步，观察行为是否符合预期
利用条件断点动态干预特定场景
右键行号旁断点 → “Edit breakpoint”，输入条件表达式（如 i === 5、id === "abc"），只有满足条件时才会暂停。这特别适合调试循环或事件频繁触发的场景。
- 暂停后可修改循环变量（如
i = 10）、跳过某次校验（isValid = true）、伪造接口返回（response.data = { status: "success" }） - 注意：若变量是
const声明，DevTools 中无法直接重赋值（会报错），但可尝试修改其属性（如const obj = {}→obj.a = 1合法）；若需彻底替换，改用let声明或在 Console 中用eval（不推荐）绕过限制
配合 console.log 和 debugger 语句快速定位
在代码中插入 debugger; 语句，运行时会自动在该行中断，效果等同于手动设断点，适合临时调试或 CI 环境下无法手动点选的情况。
- 搭配
console.log使用：先打印原始值（console.log("before", x)），再debugger，暂停后修改，再console.log("after", x)验证 - 修改完别忘了删掉
debugger，否则上线后可能意外阻塞用户操作
注意事项与常见问题
修改的是内存中的运行时值，不会改变源码，刷新页面即丢失。它只是调试手段，不是持久化方案。
- 异步回调里的变量（如
setTimeout、Promise.then）需在对应回调内部设断点才能访问，外层断点看不到其作用域 - 压缩后的代码（如 webpack 生产构建）需开启 source map，并确保浏览器加载了 .map 文件，否则断点可能错位或无法命中
- Vue/React 等框架中，响应式数据（如
ref、useState）建议通过框架 API 修改（如ref.value = xxx），直接改原始属性可能不触发更新
