This is simple guide to get started with debugging typescript node application in VS Code using the Remote Development extension. The issue with this use-case is that the application files are mounted to the container, built there and then server runs the built files from within the container, thus leaving the host folder open in VS Code completely disconnected from the server. The solution is to open the application folder inside the docker container in VS Code and then using the source-map there to debug (add breakpoints).
Pre-reqs
I'm assuming that you already have a working typescript application that has been set up to run inside a docker container using docker-compose or the docker CLI.
VS Code Remote Development
VS Code Remote Development is an extension pack that allows you to open remote folders in your installation of VS Code. For more details on how it works, I highly recommend going through the official documentation available here.
To get started, install the extension in VS Code.
Setting Up Project
Now that we've installed the extension, let's set up our application to make sure that debugging works as expected.
tsconfig.json
We need to make sure that our tsconfig.json is set up to create source-maps for our application so that VS Code can then use those source maps to place breakpoints.
Let's make sure that we have the following lines in tsconfig.json:
{
"compilerOptions": {
"sourceMap": true,
"outDir": "dist" ,
},
"include": ["src"]
}
docker-compose.yml
We need to make sure that we expose the debugger port on our docker application. To do this, add port 9229 under the ports section of your application.
The file should look something like this:
services:
service-name:
build:
context: .
dockerfile: Dockerfile
volumes:
- ./src:/path/to/app/src
container_name: container-name
expose:
- 4000
ports:
- "4000:4000"
- "9229:9229"
launch.json
Now we need to create a launch configuration for VS Code to attach the debugger to our node application.
I use this simple configuration:
{
"version": "0.2.0",
"configurations": [
{
"name": "Docker: Attach to Node",
"type": "node",
"request": "attach",
"restart": true,
"trace": true,
"port": 9229,
"address": "0.0.0.0",
"localRoot": "${workspaceFolder}/dist",
"remoteRoot": "/path/to/app/dist",
"outFiles": ["${workspaceFolder}/dist/**/**.js"],
"skipFiles": ["<node_internals>/**/*.js"],
"protocol": "inspector",
"sourceMaps": true
}
]
}
Connecting to Container (Remote)
Now we need to run our container in docker and connect VS Code to this container. First launch your container using docker-compose or docker CLI. Then click on the Remote Explorer option in VS Code sidebar. You should see a list of all the running docker containers here. Once you see your container, click on it and select the option Attach to container. This should open up a new instance of VS Code and start setting everything up for remote debugging. You can look at the Debug Console to track the progress. Once that is complete, you need to open the application folder in your container in this instance of VS Code. So click open folder and then select /path/to/app (mount location in docker-compose). You should now see your application files in VS Code along with the dist folder containing the built files and the source-maps.
At this point you're all set to start debugging in VS Code.
Debugging
Set breakpoints where you want and then go to the Run and Debug tab in VS Code sidebar and run Docker: Attach to Node (the name you set in launch.json).
Now when the line is reached, your code execution should stop there as expected and you should be able use all the debugging features of VS Code with your typescript docker app.
Next time when you open the project, just run the docker container, go to the Remote Explorer tab in VS Code and open your existing remote instance for this container and start debugging.