'How to debug angular frontend with django server on vscode (Unverified Breakpoint)?

I'm running a django server for the backend of my application and angular for the frontend side. Basicaly to make my application work I start my django server:

python manage.py runserver

And on angular I use:

ng build --output-path django_static_folder/ang --watch --output-hashing none

I'm trying to debug angular code using vscode. I have an issue with "Unverified Breakpoint" on vscode. I checked many thread about this issue but none of them talked about how to debug when the server is not managed by angular using ng serve

Here is my actual configuration:

{
  "version": "0.1.0",
  "configurations": [
    {
      "name": "Angular debug",
      "type": "firefox",
      "request": "launch",
      "url": "http://127.0.0.1:8000/",
      "webRoot": "${workspaceFolder}",
    }
  ]
}

The workspaceFolder is my angular workspace folder.

The url is the one from django server. So when I start the debugger, the firefox app launch and I'm in my application but I cannot put any breakpoint.

I believe that the issue is coming from the fact that I'm not using angular server. Maybe I should but then I don't know how to redirect to the correct url on the django server side ?

Can anyone help me on this subject ?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to debug angular frontend with django server on vscode (Unverified Breakpoint)?

Sources

Related Questions