typescript - 在 VsCode 中使用附加调试器进行调试时在 Typescript 文件上打断点

Question

我正在尝试使用 在 VsCode 中设置调试器附上 在 Docker 容器中运行的 Typescript 代码库上的模式。当我运行我的 docker 容器并通过 VsCode 附加调试器时，我能够命中断点，但它们总是以编译的 Javascript 代码而不是 Typescript 代码结束。

从图中可以看出，代码是一个无限循环内的简单日志语句。
index.ts

console.log('Hello world');

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

在使用 Docker 进行设置之前，我检查了 docs并在本地尝试了调试器，并且在 typescript 文件上的断点没有问题。以下是有关设置的更多信息:
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 和常规节点尝试了多种设置，但这些设置都无法命中断点并将结果指向 Typescript 文件。附加到进程时是否可以执行此操作？

Answer 1

所以在回到这个问题之后，我设法解决了它。以下是一些需要检查的重要事项。

连接时检查端口和地址是否实际连接。留言说Debugger connected如果可行，应该会出现在您的控制台中。

如果您的调试器已连接，但断点未绑定(bind)，或者您在调试器终端中看到错误，请尝试以下步骤:

确保sourceMaps在您的 launch.json 中设置为 true和 sourceMap在您的 tsconfig.json 中设置为 true .这会生成在 TS 文件上打断点所需的文件，并告诉您的调试器使用它们。

如果您在 docker 中使用特定工作区(例如 WORKSPACE /opt/project )，请确保您的 remoteRoot在您的 launch.json设置为该值。如果您没有使用任何工作区，请确保将该值设置为 / , 我在使用 ./ 时遇到了一些问题.

添加 resolveSourceMapLocations您的属性(property)launch.json这应该可以帮助您的调试器找到您的 .map.js如果找不到文件。 link

如果您的项目不包含在根文件夹中，请确保 localRoot属性指向包含您的代码的目录。

如果所有这些步骤都失败了，请尝试查看您是否使用的是 VsCode v16.0 或更高版本，在撰写本文时，有一个 known issue使用 v16 及更高版本的 VsCode 调试器。这些设置适用于 v15.8.2

这些是我必须执行的步骤才能使其发挥作用。这是 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
  }
 ]
}