VSCode调试无断点在webpack hot module replacement暂停怎么办

使用VSCode调试前端项目时，编辑器会持续在webpack的hot module replacement文件处暂停，暂停位置为if (me.hot.active) {代码行。

当前工程未手动设置任何断点，断点列表为空。

当前使用的Launch调试配置如下：

{
  "type": "pwa-chrome",
  "request": "launch",
  "trace": true,
  "name": "Launch vscode not extension",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}"
}

出现该问题的核心原因是VSCode内置的JS调试器默认会在抛出异常的位置暂停，而webpack HMR运行时代码的路径没有被加入调试跳过列表，就会出现无自定义断点却自动停在第三方代码里的情况，按以下任意一种方式调整即可：

• 修改launch.json调试配置，从根源规避
  在原有配置基础上补充skipFiles、smartStep和异常暂停配置，修改后配置如下：

  {
    "type": "pwa-chrome",
    "request": "launch",
    "trace": true,
    "name": "Launch vscode not extension",
    "url": "http://localhost:3000",
    "webRoot": "${workspaceFolder}",
    "smartStep": true,
    "pauseOnExceptionEnabled": false,
    "skipFiles": [
      "${workspaceFolder}/node_modules/**/*.js",
      "**/webpackHotDevClient/**/*.js",
      "**/hot module replacement*.js"
    ]
  }
  

  配置后调试器会自动跳过node_modules下所有代码、webpack HMR相关代码，不会再在这些非业务代码处暂停。
• 调试时快速临时处理
  再次触发暂停时，在断点所在行右键，选择「永远不要在此处暂停」；也可以直接打开调试侧边栏的断点面板，取消勾选「捕获的异常」「未捕获的异常」两个自动暂停选项即可。
• 检查调试控制栏状态
  确认调试工具栏中「单步跳过所有语句」的按钮（无附加圆点的暂停图标）未处于激活状态，激活状态下调试器会在每一行代码执行时都暂停。

内容的提问来源于stack exchange，提问作者Dashiell Rose Bark-Huss