Hit breakpoints on Typescript files while debugging using an attached debugger in VsCode

Question

I'm attempting to setup a debugger in VsCode using the attach mode on a Typescript codebase running in a Docker container. When I run my docker container and attach the debugger via VsCode, I'm able to hit breakpoints, but they always end up on the compiled Javascript code instead of the Typescript code.

As you can see from the image, the code is a simple log statement inside an infinite loop.

index.ts

console.log('Hello world');

while(true) {
  console.log('a')
}

Before moving to the setup with Docker, I checked the docs and tried the debugger locally and that had no problems hitting breakpoints on Typescript files. Here is more info on 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 tried multiple setups using nodemon and regular node, but none of these setups have been able to hit breakpoints and point back the result onto the Typescript files. Is it possible to do this while attaching to a process?

Niklas Niklas · Accepted Answer · 2021-06-22T00:15:08

In the end, TypeScript is compiled into JavaScript on process level and when using regular debugger remotely, it might not properly identify which was the original format of the source.

This might be duplicate of Debug in VS Code a Node Typescript app running in Docker

You should use extension "Remote development" which is developed by Microsoft partially for this purpose, to get better experience on mapping the source for container process.

Hit breakpoints on Typescript files while debugging using an attached debugger in VsCode

1 Answers