3

We have an angular application (angular 8), the code is set up on an Ubuntu vm. and using Visual Studio Code + Remote Development Tool (Microsoft) for development.

While development is working fine I am facing issues while debugging the app.

launch.json configuration { "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 command used for port forwarding : "Forward Port From Active Host"

angular.json config for 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" } ] } }

with this I am able to connect to the remote from local, however, the "Attach to Chrome" is not able to find the files and producing errors like

Unable to open 'dashboard.man~de6ca691.77f46380879a4a0699b4.js': Unable to read file (Error: File not found (vscode-remote://ssh-remote+angular_serve/kite/angular_proj/dashboard/dashboard.man~de6ca691.77f46380879a4a0699b4.js)).

Is remote debugging like this is possible? Am I missing any configurations?

Ketu
  • 1,608
  • 2
  • 14
  • 30

1 Answers1

0

To debug angular code follow these steps:-

Option 1 Using VS-code

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

OR

Option 2 You can directly use the chrome.

  1. ctrl+shift+I and go to the source tab
  2. ctrl+p you will get the list of files. choose your file for ex. app.component.ts
  3. Now you can see your code and use the sidebar you have line numbers to select debug points.