debugger语句是js中最轻量的断点方式,需写为debugger;并确保开发者工具开启、脚本未被忽略、代码实际执行且构建工具未移除;它支持条件断点、适用于异步场景,可配合console.log和注释使用。

在 JS 项目中,直接写 debugger 语句是最简单、最轻量的触发浏览器断点的方式——只要代码执行到这一行,且开发者工具已打开,就会自动暂停。
怎么写 debuger 语句
在任意可执行的 JavaScript 代码位置(如函数内部、条件分支、循环体等),插入一行:
debugger;
注意:分号不能省略;它不是函数调用,也不是关键字加括号,就是一个独立的调试语句。
DMap GL地图JSAPI(dmapgl)开发指南。用于编写、审查、调试 DMap 地图 API 代码,涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
确保断点生效的前提
- 浏览器开发者工具(F12 或 Ctrl+Shift+I)必须已打开,且至少处于「Sources」或「Debugger」标签页
- 当前页面未启用“忽略列表”或“黑盒脚本”把对应文件设为不可调试(可在 Settings → Ignore list 中检查)
- 代码确实被执行到了那一行(比如写在未调用的函数里,或被 if(false) 包裹,就不会触发)
- 构建工具(如 Webpack/Vite)没有自动移除
debugger(部分生产环境配置会通过 UglifyJS/Terser 删除该语句,开发环境默认保留)
和 Chrome DevTools 断点的区别
debugger 是“代码级断点”,优势在于:
- 无需手动点击行号左侧设断点,适合动态逻辑、异步回调、不易手动定位的位置(如 Promise.then、setTimeout 回调)
- 可配合条件写法,实现简易条件断点:
if (userId === 123) debugger;
- 支持 Git 提交(但上线前建议删掉,避免用户误触)
实用小技巧
- 在 Vue/React 组件的 setup 或 useEffect 中加
debugger,快速捕获渲染或副作用触发时机 - 配合 console.log 使用,先输出信息再暂停:
console.log('进入 handleSave,data=', data); debugger;
- 多人协作时,可用注释说明用途,方便他人理解:
// TODO: 调试支付回调逻辑,临时断点 → debugger;










