Chrome DevTools 调试 JS 源码的核心是“暂停—观察—步进”三步闭环：通过 Sources 面板设断点暂停执行，利用 Scope、Call Stack、Watch 和 Console 观察变量与调用链，再用 F10/F11/Shift+F11 步进定位问题。
JS 开发者用 Chrome DevTools 调试源码，核心是“暂停—观察—步进”三步闭环。不需要改代码、不依赖 console.log，靠断点就能实时看清变量、调用链和执行路径。
打开 Sources 面板并定位脚本文件
按 Ctrl+Shift+I（Windows/Linux）或 Cmd+Opt+I（Mac）打开 DevTools，切换到 Sources 面板。左侧文件导航区会列出所有加载的资源，包括 HTML、CSS 和 JS 文件。找到你要调试的 .js 文件（比如 hello.js 或 main.js），点击即可在中间区域显示源码。如果页面用了构建工具（如 Webpack、Vite），建议开启 Source Maps，这样能看到原始未压缩的代码，而不是 bundle 后的混淆内容。
设置断点快速暂停执行
在代码行号左侧的空白处单击，出现蓝色圆点即为行断点；刷新页面后，执行流到达该行就会自动暂停。常见用法包括：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 在函数入口设断点，比如
function add(a, b) {这一行，便于观察入参 - 在可疑逻辑前设断点，比如字符串拼接、类型转换、条件判断之前
- 右键行号可添加 条件断点，输入
a === 'test'等表达式，只在满足时暂停 - 在事件监听器上用 Event Listener Breakpoints（展开 Mouse → click），点击按钮就自动停在事件处理函数第一行
暂停时检查变量与执行上下文
代码暂停后，右侧调试区会同步更新：
- Scope 面板列出当前作用域的所有变量（局部、闭包、全局），值一目了然；双击数值可临时修改，验证逻辑变化
- Call Stack 显示函数调用链条，点某一层可跳转到对应源码位置，方便回溯来路
- 按 Esc 呼出底部 Console，直接输入变量名、调用函数或执行表达式，比如
typeof num1或getNumber1() - 在 Watch 区手动添加表达式（如
num1 + num2），它会在每次暂停时自动求值并更新
用步进控制执行节奏
暂停后，顶部工具栏提供几种步进方式：
- Step over（F10）：执行当前行，不进入函数内部
- Step into（F11）：进入当前行调用的函数，适合深入子逻辑
- Step out（Shift+F11）：跳出当前函数，回到上层调用位置
- Resume script execution（F8）：继续运行，直到下一个断点或脚本结束
遇到字符串相加得 “51” 而非 6 的典型 bug，用 Step into 逐行跟进，很快就能发现 getNumber1() 返回的是字符串而非数字，问题根源一目了然。
