docker - VsCode'da ekli bir hata ayıklayıcı kullanırken Typescript dosyalarında kesme noktalarına ulaşma

Bir Docker konteynerinde çalışan bir Typescript kod tabanı üzerinde attach modu kullanarak VsCode'da bir hata ayıklayıcı kurmaya çalışıyorum. Docker konteynerimi çalıştırdığımda ve VsCode üzerinden hata ayıklayıcıyı eklediğimde, breakpoint'lere ulaşabiliyorum, ancak bunlar her zaman Typescript kodu yerine derlenmiş Javascript kodunda oluyor.

Görüntüden de görebileceğiniz gibi, kod sonsuz bir döngü içinde basit bir log ifadesidir.

index.ts

console.log('Hello world');

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

Docker ile kuruluma geçmeden önce, belgeleri kontrol ettim ve hata ayıklamayı yerel olarak denedim ve Typescript dosyalarında kesme noktalarına ulaşmada herhangi bir sorun olmadı. İşte kurulum hakkında daha fazla bilgi:

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. */
  }
}

Nodemon ve normal node kullanarak birden fazla kurulum denedim, ama bu kurulumların hiçbiri kesme noktalarına ulaşmayı ve sonucu TypeScript dosyalarına yönlendirmeyi başaramadı. Bunu bir sürece bağlanırken yapmak mümkün mü?

Cevap #1

Bu soruna geri döndükten sonra onu düzeltebildim. İşte kontrol edilmesi gereken bazı önemli şeyler.

  1. Bağlarken port ve adresin gerçekten bağlanıp bağlanmadığını kontrol edin. Bu işe yararsa, konsolunuzda Debugger connected mesajı görünmelidir.

Eğer hata ayıklayıcınız bağlanıyorsa ancak kesme noktalarınız bağlı değilse ya da hata ayıklayıcı terminalinizde hatalar görüyorsanız, bu adımları deneyin:

  1. Kodunuzdaki launch.json dosyasında sourceMaps değerinin true olarak ayarlandığından ve tsconfig.json dosyanızda sourceMap değerinin true olarak ayarlandığından emin olun. Bu, TS dosyalarında breakpoint’lere ulaşmak için gereken dosyaları oluşturur ve hata ayıklayıcınıza bunları kullanmasını söyler.
  2. Docker'ınızda belirli bir çalışma alanı kullanıyorsanız (örneğin WORKSPACE /opt/project), launch.json dosyanızdaki remoteRoot değerinin bu değere ayarlandığından emin olun. Hiçbir çalışma alanı kullanmıyorsanız, değerin / olarak ayarlandığından emin olun, ./ kullanırken bazı sorunlarla karşılaştım.
  3. resolveSourceMapLocations özelliğini launch.json dosyanıza ekleyin, bu, hata ayıklayıcınızın .map.js dosyalarını bulmakta zorlanması durumunda bulmasına yardımcı olmalıdır. bağlantı
  4. Projeniz kök klasörde değilse, localRoot özelliğinin kodunuzu içeren dizini gösterdiğinden emin olun.
  5. Tüm bu adımlar başarısız olursa, VsCode sürümünüzün 16.0 veya daha yüksek olup olmadığını kontrol etmeyi deneyin; bu yazının yazıldığı sırada, v16 ve üzeri VsCode'un hata ayıklayıcısıyla ilgili bilinen bir sorun vardır. Bu ayarlar v15.8.2 sürümünde çalışır.

Bunu çalıştırabilmek için geçmem gereken adımlar bunlardı. İşte şu anda kullandığım launch.json.

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/? 
     linkid=830387
  
 "version": "0.2.0",
 "configurations": [
 {
  "type": "node",
  "request": "attach",
  "name": "Debug: App",
  "remoteRoot": "/opt/project/",
  "localRoot": "${workspaceFolder}",
  "port": 9229,
  "restart": true,
  "sourceMaps": true,
  "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"]

  // Only enable for debug purposes.
  // "trace": true
  }
 ]
}

Cevap #2

Sonuç olarak, TypeScript süreç düzeyinde JavaScript'e derlenir ve uzaktan normal hata ayıklayıcı kullanıldığında, kaynağın orijinal formatının hangisi olduğu doğru şekilde tespit edilemeyebilir.

Bu, Docker'da çalışan bir Node Typescript uygulamasını VS Code'da hata ayıklama ile ilgili bir kopya olabilir

Konteyner süreci için kaynağı eşleştirme konusunda daha iyi bir deneyim elde etmek amacıyla, kısmen bu amaç için Microsoft tarafından geliştirilen "Remote development" uzantısını kullanmalısınız.

İlgili makaleler