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

Question

我们有一个 Angular 应用程序（Angular 8），代码设置在 Ubuntu 虚拟机上。使用 Visual Studio Code + Remote Development 工具（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 环境

``` { "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" } ] } } ```

通过这样的配置，我能够从本地连接到远程，但是 "Attach to Chrome" 找不到文件并产生错误，如：

无法打开 'dashboard.man~de6ca691.77f46380879a4a0699b4.js'：无法读取文件（错误：未找到文件

（vscode-remote://ssh-remote+angular_serve/kite/angular_proj/dashboard/dashboard.man~de6ca691.77f46380879a4a0699b4.js））。

像这样进行远程调试是否可行？ 我是否遗漏了任何配置？

- Ketu

Answer 1

调试 Angular 代码，请按照以下步骤进行：

选项1 使用 VS Code

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

或者

选项2 您可以直接使用Chrome。

1. 按下ctrl+shift+I并转到源选项卡
2. 按下ctrl+p，您将获得文件列表。选择您的文件，例如 app.component.ts
3. 现在您可以看到您的代码并使用侧边栏，您有行号 选择调试点。

- Rakesh Choyal