如何使用 Visual Studio Code + VSCode remote + Chrome 调试器调试 Angular 应用程序答案

【问题标题】：How to debug angular application using Visual Studio Code + VSCode remote + Chrome debugger如何使用 Visual Studio Code + VSCode remote + Chrome 调试器调试 Angular 应用程序
【发布时间】：2019-09-25 13:31:56
【问题描述】：

我们有一个 Angular 应用程序（Angular 8），代码设置在 Ubuntu 虚拟机上。并使用 Visual Studio Code + Remote Development Tool (Microsoft) 进行开发。

虽然开发工作正常，但在调试应用程序时遇到问题。

launch.json 配置 { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:4200/#", "webRoot": "${workspaceFolder}", "sourceMaps": true, "runtimeArgs": ["--disable-session-crashed-bubble"] }, { "type": "chrome", "request": "attach", "name": "Attach to Chrome", "port": 9222, "address": "localhost", "webRoot": "${workspaceFolder}", "sourceMaps": true } ] }

用于端口转发的vscode命令："Forward Port From Active Host"

用于开发环境的 angular.json 配置 { "dev": { "optimization": false, "outputHashing": "all", "sourceMap": true, "extractCss": true, "namedChunks": true, "aot": true, "extractLicenses": true, "vendorChunk": true, "buildOptimizer": false, "fileReplacements": [ { "replace": "ui/environments/environment.ts", "with": "ui/environments/environment.ts" } ] } }

有了这个我可以从本地连接到远程，但是，“附加到 Chrome”无法找到文件并产生类似的错误

无法打开“dashboard.man~de6ca691.77f46380879a4a0699b4.js”：无法读取文件（错误：找不到文件 (vscode-remote://ssh-remote+angular_serve/kite/angular_proj/dashboard/dashboard.man~de6ca691.77f46380879a4a0699b4.js)。

这样的远程调试可行吗？我是否缺少任何配置？

【问题讨论】：

标签： visual-studio-code angular8 vscode-debugger vscode-remote chrome-debugging

【解决方案1】：

要调试 Angular 代码，请按以下步骤操作：-

选项 1 使用 VS 代码

https://scotch.io/tutorials/debugging-angular-cli-applications-in-visual-studio-code

或

选项2可以直接使用chrome。

ctrl+shift+I 并转到源选项卡
ctrl+p 你会得到文件列表。选择你的文件前。 app.component.ts
现在您可以查看您的代码并使用您拥有行号的侧边栏选择调试点。

【讨论】：