2

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

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

启动.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))。

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

4

1 回答 1

0

要调试角度代码，请按照下列步骤操作：-

选项 1 使用 VS 代码

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. 现在您可以查看您的代码并使用具有行号的侧边栏来选择调试点。
于 2020-09-08T10:00:23.310 回答