VSCode中Angular 5的Chrome Debugger无法访问localhost问题求助

我来帮你一步步排查这个问题，看起来是几个常见的配置或操作细节出了问题，咱们逐个解决：

• 首先检查端口是否匹配
  Angular CLI默认启动的项目端口是4200，但你的launch.json里配置的url是http://localhost:1234，这大概率是核心问题。先在终端执行ng serve，看终端输出的访问地址是不是http://localhost:4200：

  • 如果是，直接把launch.json里的url字段改成http://localhost:4200；
  • 如果你确实想用1234端口，就执行ng serve --port 1234来启动项目，保持和配置里的端口一致。

• 确保调试前项目已正常启动
  点击VSCode调试按钮之前，必须先启动Angular项目！先运行ng serve，等终端显示Compiled successfully的提示后，再触发调试，不然localhost对应的服务根本没运行，自然会提示无法访问。

• 验证webRoot配置的准确性
  对于Angular项目，webRoot需要指向你的源代码根目录，默认项目结构下应该是${workspaceFolder}/src，而不是直接用${workspaceFolder}。修改后的配置片段如下：

  "webRoot": "${workspaceFolder}/src"
  

  这样调试器才能正确映射你的Angular源码，也能避免后续可能遇到的断点无效问题。

• 如果使用Attach模式，需开启Chrome远程调试
  要是你想用Attach to Chrome这个调试配置，得先做以下操作：

  1. 关闭所有正在运行的Chrome窗口；
  2. 通过命令行启动Chrome并开启远程调试端口：
     • Windows：执行 chrome.exe --remote-debugging-port=9222
     • Mac：执行 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
     • Linux：执行 google-chrome --remote-debugging-port=9222
  3. 在启动的Chrome里打开你的Angular项目页面，再回到VSCode点击Attach调试按钮。

• 基础排查：手动验证localhost访问
  先直接在Chrome浏览器里输入你配置的url（比如http://localhost:1234），看能不能正常打开项目页面：

  • 如果打不开，说明项目没启动或者端口被占用，先解决这个基础问题；
  • 如果能打开，再回到VSCode检查调试配置的细节。

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