Chrome开发者工具是JavaScript调试最常用高效环境，核心为“暂停—观察—步进”闭环；需打开Sources面板、设行/条件/日志断点或debugger语句；暂停后通过Scope、Call Stack、Watch和Console分析状态；用F8/F10/F11/Shift+F11快捷键控制执行节奏。
Chrome 开发者工具是 JavaScript 调试最常用、最高效的环境。它不依赖额外插件，开箱即用，核心在于“暂停—观察—步进”这一闭环流程。掌握几个关键操作，就能快速定位变量异常、逻辑跳转错误或异步执行问题。
打开并定位到 Sources 面板
调试前必须进入正确的界面：
- 在页面上按 F12 或 Ctrl+Shift+I（Mac 为 Cmd+Opt+I）唤出开发者工具
- 点击顶部标签栏的 Sources 选项卡，这是断点调试的主战场
- 在左侧文件树中展开 Page，找到你正在运行的 JS 文件（如 hello.js、script.js），或从 Snippets 新建临时脚本
设置断点并触发暂停
断点是让代码“停下来等你看”的开关，有多种设置方式：
- 在代码行号左侧空白处单击，出现蓝色圆点即设好行断点
- 右键行号 → Edit breakpoint 可添加条件，例如
i > 10，只在满足时暂停 - 右键行号 → Add logpoint 输入表达式如
Fetching user: ${id}，不中断但输出日志 - 在 JS 源码中直接写
debugger;，运行到此处自动暂停（适合临时插入） - 需要监听 DOM 变化时，右键 Elements 面板中的元素 → Break on → 选子节点/属性/删除事件
暂停后查看和分析执行状态
一旦代码停住，右侧调试区立刻提供上下文信息：
- Scope 面板列出当前作用域所有变量（Local、Closure、Global），值实时可读
- Call Stack 显示函数调用链，点击某一层可直接跳转到对应源码位置
- 在 Watch 区域点击 + 号，输入任意合法 JS 表达式（如
user.name || 'N/A'），持续监控其变化 - 按 Esc 呼出 Console 面板，在暂停状态下可直接执行代码、修改变量（如
count = 0），再继续运行验证效果
用快捷键控制执行节奏
单步操作帮你厘清每一步发生了什么：
- F8：继续运行，直到下一个断点或脚本结束
- F10：逐行执行，遇到函数调用不进去（Step over）
- F11：进入当前行调用的函数第一行（Step into）
- Shift+F11：跳出当前函数，回到上层调用处（Step out）
- 在 Call Stack 中右键某帧 → Restart Frame，可从该函数开头重新执行，无需刷新页面
