VS Code中Chrome调试设置失败、Firefox调试可正常运行问题求助

• 安装调试扩展
  目前VSCode不再默认内置Chrome调试能力，你提到的无需额外安装扩展是旧版本特性，现在需手动安装「Debugger for Chrome」扩展，或者新版兼容Chrome的「Debugger for Microsoft Edge」扩展。
• 修正.vscode/launch.json中Chrome配置错误
  你当前配置中给Chrome调试添加了Firefox独有的reAttach参数，Chrome调试器无法识别该参数会直接导致初始化异常，删除该参数即可。同时调整路径映射规则适配Chrome的解析逻辑，修改后的Chrome配置参考如下：

  {
    "type": "chrome",
    "request": "launch",
    "name": "vuejs: chrome",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceFolder}/src",
    "breakOnLoad": true,
    "sourceMapPathOverrides": {
      "webpack:/*": "${webRoot}/*",
      "/./*": "${webRoot}/*",
      "/src/*": "${webRoot}/*",
      "/*": "${webRoot}/*",
      "/./~/*": "${webRoot}/node_modules/*"
    },
    "preLaunchTask": "serve"
  }
  

  如果仍有异常，可在配置中添加"runtimeArgs": ["--disable-extensions"]临时禁用Chrome第三方扩展，排查广告拦截、脚本拦截类扩展导致的sourcemap加载失败问题。
• 优化sourcemap配置
  把vue.config.ts中的devtool参数调整为开发环境更适配Chrome的配置，加载速度更快且映射更准确：

  module.exports = {
    configureWebpack: {
      devtool: 'eval-cheap-module-source-map'
    }
  }
  

• 启动调试后强制刷新
  启动Chrome调试后，按Ctrl+F5执行强制刷新，跳过Chrome的静态资源缓存，确保加载的是带完整sourcemap的最新编译文件。

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