chrome devtools 断点调试核心是“暂停—观察—步进”三步闭环，关键在于明确断点位置、触发原因及暂停后需查看的变量、调用栈和表达式监控。
JS 开发者用 Chrome DevTools 做断点调试，核心是“暂停—观察—步进”三步闭环。关键不在会点几下，而在于知道在哪停、为什么停、停了之后看什么。
打开 Sources 面板并定位源码
按 Ctrl+Shift+I（Windows/Linux）或 Cmd+Opt+I（Mac）打开 DevTools，切换到 Sources 面板。左侧文件树里找你的 JS 文件——如果看到的是 bundle.js 或 min.js，说明 source map 没生效，需检查构建配置是否开启 devtool: 'source-map'（Webpack）或 build.sourcemap: true（Vite）。
设置不同类型的断点
断点不是只有“点一下行号”这一种：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 行断点：直接点击行号左侧空白处，出现蓝色标记；代码执行到该行前自动暂停
-
条件断点：右键行号 → Add conditional breakpoint → 输入表达式（如
id === 123），只在条件为真时触发，橙色标记 -
debugger 语句：在源码中写
debugger;，运行时自动暂停（前提是 DevTools 已打开） - 事件/异常/DOM 断点：在 Elements 面板右键元素选 Break on，或在 Sources → Event Listener Breakpoints 中勾选 click、load 等，或勾选 Pause on caught exceptions
暂停后重点看什么
代码停住时，别急着点 F8 继续：
- 右侧 Scope 面板里展开 Local，查看当前函数内所有变量值，双击数值可临时修改，验证逻辑走向
- 下方 Console 可直接输入变量名、调用函数、甚至改写局部状态（比如
count = 0），再继续执行看效果 - 顶部调用栈（Call Stack）显示函数调用链，点击某一层可跳转到对应源码位置，快速回溯入口
- 左下角 Watch 区域可添加表达式（如
items.length > 5），持续监控变化
高效步进与管理断点
暂停后用快捷键推进，比鼠标点更稳：
- F10（Step Over）：执行当前行，不进入函数内部
- F11（Step Into）：跳进被调用的函数第一行（适合查第三方方法或嵌套逻辑）
- Shift+F11（Step Out）：跳出当前函数，回到上一层调用处
- Ctrl+Shift+F8（Win/Linux）或 Cmd+Shift+F8（Mac）：一键停用/启用所有断点，避免干扰
- 在 Breakpoints 侧边栏里可批量勾选、右键删除或禁用单个断点
