How setup VSCode + Chrome Debugger + Docker in MacOS (Docker for Mac)

Question

I use Docker for Mac (Version 18.06.1-ce-mac74 (26766)) and I needed to configure the Google Chrome Debugger in VSCode. The configurations found on the internet did (How https://medium.com/@drcallaway/debugging-es6-in-visual-studio-code-4444db797954) not work for me. I share how I configured everything to work:

Answer 1

Structure Project

/.vscode
  /launch.json
/admin
  /node_modules
  /public
  /src
  /package.json
/docker-compose.yaml

/.vscode/launch.json

{
  "version": "0.2.0",
  "configurations":{
    "name": "Chrome",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000",
    "webRoot": "${workspaceRoot}/admin/src",
    "sourceMapPathOverrides": {
      "/srv/my-admin/src/*": "${webRoot}/*"
    },
    "runtimeArgs": [
      "--remote-debugging-port=9222"
    ]
  }
}

docker-compose.yaml

version: '3.5'

services:
  node:
    image: node:8.11.4-alpine
    working_dir: /srv
    volumes:
      - $PWD/admin:/srv/my-admin
    ports:
      - 3000:3000
      - 9222:9222
    command: yarn --cwd my-admin start

Try and fun!!!