VS Code使用Chrome JS Debugger调试时断点未绑定无法触发如何解决？

问题根因&解决步骤 #

• 先卸载已废弃的[Deprecated] Debugger for Chrome插件，避免和内置的JavaScript Debugger产生功能冲突，操作完成后重启VSCode。
• 修正launch.json配置：你当前调试的是HTML内联JS代码，没有单独的JS源文件和sourceMap文件，开启sourceMaps反而会干扰路径映射，同时需要确认webRoot和访问路径的匹配关系：
  如果你用VSCode直接打开的是test1文件夹作为工作区根目录，用以下配置即可：

  {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "pwa-chrome",
        "request": "launch",
        "name": "JS Client Debugger",
        "url": "http://localhost:80/index.html",
        "webRoot": "${workspaceFolder}",
        "sourceMaps": false
      }
    ]
  }
  

  如果你打开的工作区根目录是test1的上层文件夹，保持url为http://localhost:80/test1/index.html即可。
• 临时验证调试连通性：可以在你要打断点的代码前添加debugger;语句，如下：

  <script type='text/javascript'>
    debugger;
    var statusElement = document.getElementById('test');  
  </script>
  

  启动调试后如果Chrome自动触发暂停，说明调试通道正常，后续直接在VSCode里打断点即可正常绑定。
• 额外检查：确认本地80端口的Web服务正常运行，访问配置的url可以正常打开index.html页面，不存在404/502等加载错误。

内容的提问来源于stack exchange，提问作者PowerNow