Как отлаживать угловое приложение с помощью Visual Studio Code + VSCode Remote + Chrome debugger

У нас есть приложение angular (angular 8), код настроен на Ubuntu vm. и с помощью 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 env { "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)).

Возможна ли такая удаленная отладка? Мне не хватает каких-либо конфигураций?




Ответы (1)


Чтобы отладить угловой код, выполните следующие действия: -

Вариант 1 Использование VS-кода

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

OR

Вариант 2 Вы можете напрямую использовать хром.

  1. ctrl + shift + I и перейти на вкладку исходного кода
  2. ctrl + p вы получите список файлов. выберите свой файл, например. app.component.ts
  3. Теперь вы можете увидеть свой код и использовать боковую панель с номерами строк для выбора точек отладки.
person Rakesh Choyal    schedule 08.09.2020