断点 breakpoints 是调试器会自动暂停 JavaScript 执行的地方。当代码被暂停时可以进行检查当前的变量，在控制台执行命令等操作，通过设置断点可以对代码进行调试。

在代码编辑器页面打开脚本，点击脚本语句左侧相应的行号即可创建断点（蓝色箭头标注）。在右侧的 JavaScript 调试面板中有相断点列表，可以取消选中断点来临时禁用对应的断点，点击断点可以快速跳转至相应的源代码，也可以右键选择移除来删除断点。

Tip

可以通过 JavaScript 调用面板顶部的按钮 启用/禁用所有的断点 Deactivate breakpoints 批量操作，快捷键 Ctrl + F8。

function hello(name) {
  let phrase = `Hello, ${name}!`;
  debugger;  // <-- 调试器会在这停止
  say(phrase);
}

Tip

启动/禁用出现错误时自动暂停脚本 Pause on exceptions 是另一种暂停脚本运行的方式，任何一个脚本的错误都会导致该脚本执行自动暂停，然后可以分析当前的变量来看一下什么出错了。

设置好断点后就可以执行脚本以跟踪调试代码，根据相应的触发条件运行脚本，如重新加载页面。

在 JavaScript 调用面板会显式脚本运行过程中详细信息：

• 察看 watch 显示任意表达式的当前值。可以点击加号 + 然后输入一个表达式。调试器将随时显示它的值，并在执行过程中自动重新计算该表达式。
• 调用栈 call stack 显示嵌套的调用链，即不断进行的函数调用顺序。堆栈底部的函数是第一个运行的函数，它会调用堆栈上的第二个函数，以此类推。函数一直保留在堆栈上，直到前面的函数返回了。
  

  

• 作用域 Scope 显示当前的变量。Local 显示当前函数中的局部变量，它们的代码会在代码编辑面板中高亮显示出来。Global 表示全局变量（不在任何函数中）。

当脚本遇到断点时会暂停，在 JavaScript 调试面板顶部会有不同操作按钮以不同的方式继续执行脚本：

• 恢复 Resume 继续执行，快捷键为 F8。如果没有其他的断点，那么程序就会继续执行，并且调试器不会再控制程序。
• 下一步 Step 运行下一条指令快捷键 F9。一次接一次地点击此按钮，整个脚本的所有语句会被逐个执行（如果下一步是调用函数，就会进入函数内部并在第一行暂停执行，且忽略异步方法）。
• 跨步 Step over 运行下一条指令，快捷键 F10。运行下一条指令，但如果下一步是调用函数则直接执行完该函数后立即暂停，如果我们对该函数的内部执行不感兴趣，这命令会很有用。
• 步入 Step into 和下一步 Step 类似，快捷键 F11。但在异步函数调用情况下表现不同，会进入到代码中并等待（如果需要）。
• 步出 Step out 继续执行到当前函数的末尾，快捷键 Shift+F11。当偶然地进入到一个嵌套调用，但对这个函数不感兴趣时想尽可能的继续执行到最后。

使用 Chrome 对 Android 进行远程调试，桌面端 下载 Chrome Canary （这是 Chrome 开发者版本，使用 Chrome 也同样可以）和移动端都需要安装有Chrome 浏览器。

1. 在 Android 设备上打开 USB 调试（以下步骤适用于 坚果 pro 系统为 v6.7.1）
   • 设置 -> 关于本机 -> 下拉到最后，不断点击 软件版本（约7次）至提示开启了 开发者选项 Developer Option
   • 全局高级设置 -> 开发者选项 -> 打开 USB 调试 Enable USB Debugging
2. 在桌面端 Chrome 开启 Remote devices 标签栏，并确保开启 Discover USB devices
   

   

3. 使用 USB 电缆将 Android 设备直接连接到开发的计算机，并打开移动端 Chrome
   • 移动端可能会弹出提示，请信任计算机对其访问
   • 首次连接时，通常会看到 DevTools 检测到未知设备。 如果您 Android 设备的型号名称下显示绿色圆点和 Connected 文本，则表示 DevTools 已与您的设备成功建立连接。
4. 调试
   

   

   
   也可以访问 chrome://inspect/进行远端调试，点击 inspect fallback 打开实时同步预览调试窗口

   

   在该页面上修改代码，可同时在移动端和桌面端预览窗口查看

   

• iOS WebKit 调试代理(英)
• Testing Mobile: Emulators, Simulators And Remote Debugging(英)
• 如何用 Chrome DevTools 调试 iOS Safari
• 基于 iOS 设备的移动端前端开发调试 - 论坛