My current challenge involves setting up a debugger in VsCode with the attach mode on a Typescript codebase running in a Docker container. Despite successfully attaching the debugger in VsCode and hitting breakpoints, I consistently find myself landing on the compiled Javascript code rather than the Typescript code.
https://i.sstatic.net/BJCBe.png
A simple log statement within an infinite loop is illustrated in the image provided.
index.ts
console.log('Hello world');
while(true) {
console.log('a')
}
Prior to transitioning to Docker setup, I referenced the documentation, tested the debugger locally without any issues in hitting breakpoints on Typescript files. Below is more information about the setup:
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Launch Program",
"port": 9229,
"restart": true,
"address": "localhost",
"remoteRoot": "./",
"localRoot": "${workspaceFolder}",
"outFiles": ["${workspaceFolder}/dist/**/*.js"],
"sourceMaps": true
}
]
}
docker-compose.yml
version: '3.8'
services:
nodeserver:
command: nodemon --inspect=0.0.0.0:9229 ./dist/index.js
build:
context: ./
dockerfile: ./build/Dockerfile
ports:
- '3000:3000'
- '9229:9229'
Dockerfile
FROM node:15-alpine3.11 as production
WORKDIR /opt/project
COPY package.json .
RUN yarn global add typescript
RUN yarn global add nodemon
RUN yarn install
COPY src src
COPY tsconfig.json .
RUN tsc
tsconfig.json
{
"compilerOptions": {
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
"sourceMap": true, /* Generates corresponding '.map' file. */
"outDir": "./dist", /* Redirect output structure to the directory. */
"strict": true, /* Enable all strict type-checking options. */
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
"skipLibCheck": true, /* Skip type checking of declaration files. */
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
}
}
I've experimented with various setups employing nodemon and regular node, but none have successfully enabled breakpoints pointing back to the Typescript files while attaching to a process. Is this achievable?