VS Code调试Edge中JavaScript时出现chrome-error源映射错误及连接问题

核心问题拆解 #

• 出现chrome-error:相关错误是因为Edge基于Chromium内核，调试时加载的错误页面属于Chromium生态的资源路径，并非实际调用Chrome，无需纠结这个前缀。
• 真正的问题是**localhost refused to connect**，这直接导致Edge加载错误页面，进而触发source map读取失败的报错。

解决步骤 #

1. 确认本地服务正常运行
   手动打开Edge浏览器，访问http://localhost:8080：

   • 如果无法访问，说明你的本地开发服务器（如Vite、Webpack Dev Server等）未启动，先启动服务再尝试调试。
   • 如果服务启动但端口不对，修改launch.json里的url字段为实际服务端口。

2. 优化launch.json配置
   调整配置项，提升调试兼容性：

   {
       "version": "0.2.0",
       "configurations": [
           {
               "name": "Launch Edge",
               "request": "launch",
               "type": "msedge",
               "url": "http://localhost:8080",
               "webRoot": "${workspaceFolder}",
               "runtimeExecutable": "msedge", // 明确指定Edge可执行文件路径，避免歧义
               "timeout": 30000, // 延长超时时间，适配服务启动延迟
               "userDataDir": "${workspaceFolder}/.vscode/edge-profile", // 使用独立的Edge用户目录，避免插件干扰
               "sourceMaps": true // 确保source map功能正常，若仍报错可临时设为false
           }
       ]
   }
   

3. 检查调试插件状态

   • 确保VSCode中安装的是最新版的「Microsoft Edge Tools for VS Code」插件，旧版本可能存在兼容性问题。
   • 禁用其他可能冲突的浏览器调试插件（如Chrome Debugger）。

4. 清理Edge缓存与状态

   • 关闭所有Edge窗口，重新启动浏览器后再尝试调试。
   • 若仍有问题，可在launch.json的runtimeArgs中添加--incognito，以无痕模式启动Edge调试：

     "runtimeArgs": ["--incognito"]
     

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