JS浏览器断点调试核心是建立“停得准、看得清、走得稳”直觉，通过真实问题（如token报错）练习行断点→查Scope与Call Stack→匹配四类断点场景→善用三处信息区→精准使用F11/F10/Shift+F11单步。
学JS浏览器断点调试，核心不是记步骤，而是建立“停得准、看得清、走得稳”的直觉。它不靠死记硬背，而靠在真实问题中反复验证——比如点击没反应、数据没渲染、接口参数错乱，这些才是你练习的起点。
从一个具体问题开始练手
别一上来就翻面板功能。选一个你刚遇到的小问题，比如“表单提交后控制台报 Cannot read property 'token' of undefined”。按这个顺序走：
- 先在疑似出错的那行代码前打个行断点（比如
api.send({ token: user.token })） - 刷新页面，触发操作，等执行暂停
- 立刻看 Scope 面板：user 是不是
undefined？还是有但没 token 属性？ - 再点开 Call Stack：往上翻，看是哪个函数调用时传进了空值
四类断点对应四类问题
每种断点解决一类典型场景，记住“问题→断点类型”映射：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 行断点：已知错误出现在某段代码里（如循环结果不对、变量赋值异常）
- 条件断点：问题只在特定数据下出现（如第100次请求失败、某个用户ID导致崩溃）
- XHR/Fetch 断点：想抓接口发出前的参数（尤其是加密字段生成逻辑）
- DOM 断点：元素莫名消失、样式突变、列表渲染错乱，找不到谁改的
停住之后，三处必看
断点命中不是为了暂停而暂停，关键在三块信息区：
- Scope 面板：展开 Local 看当前函数内所有变量值；注意 this 是什么——90% 的 “xxx of undefined” 是 this 指向丢失
- Call Stack：从上往下读，顶上是你当前执行位置，底下是调用源头；点任意一层可跳转并查看那一层的 Scope
-
Watch 面板：手动加表达式，比如
JSON.stringify(data, null, 2)或error.stack，比反复点开对象更可靠
单步执行别乱按，三键各司其职
F11、F10、Shift+F11 不是随机键，分工明确：
-
F11（Step Into）：想进函数内部看细节，比如点进
encryptParams()查签名怎么算的 -
F10（Step Over）：确认工具函数没问题，比如
formatDate()，整行执行完再停 - Shift+F11（Step Out）：已在深层嵌套里，不想一步步出来？一键跳出到调用它的那行
