How to debug Angular app in a Docker container Visual Studio Code?

Question

I followed this tutorial and successfully I'm able to run Docker container as it's given in this tutorial using e.g.

  docker run -it \
  -v ${PWD}:/usr/src/app \
  -v /usr/src/app/node_modules \
  -p 4200:4200 \
  --rm \
  myimage

Everything works as it should including hot-reloading and so on. Now the problem comes out when I want to debug this app in Visual Studio Code using Debugger for Chrome extension. I thought that this will be piece of cake and I just have to place a breakpoint and start debugging using the default Launch Chrome configuration.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Debugging started, Chrome launched and I've led the application to hit the breakpoint. Now the fun part begins because my breakpoint was moved two lines away (I placed it inside a test function that fires up after clicking on the link). Moreover, sometimes it works and my breakpoint is in the place I placed it, sometimes it opens a read-only file ( my file but only read-only ) with Webpack comments on the end of the file and finally, sometimes app doesn't hit my breakpoint.

So I don't know what to do because I never had to deal with such a problem. Maybe I'm totally wrong and this isn't the way of debugging Angular apps in Docker or maybe I made a mistake somewhere.

EDITED:

After several tests, it turned out that this is not a bug related to Docker. Normal debugging (without Docker) doesn't seem to work too. More details here.

Bardr · Accepted Answer · 2018-03-28 21:27:36Z

4

That was related to sourcemaps problem. This launch.json works:

{
   "version": "0.2.0",
   "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*"
      }
    }
  ]
}

answered Mar 28, 2018 at 21:27

Bardr

2,5592 gold badges14 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to debug Angular app in a Docker container Visual Studio Code?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related