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

Question

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

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

索引.ts

console.log('Hello world');

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

在使用 Docker 进行设置之前，我检查了文档并在本地尝试了调试器，在 Typescript 文件上命中断点时没有出现任何问题。以下是有关设置的更多信息：

启动.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

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

1. 连接时检查端口和地址是否实际连接。Debugger connected如果有效的话，您的控制台中应该会出现一条消息。

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

1. 确保sourceMaps在您的 中设置为 truelaunch.json并sourceMap在tsconfig.json. 这会生成在 TS 文件上命中断点所需的文件，并告诉调试器使用它们。
2. 如果您在泊坞窗中使用特定工作区，（例如WORKSPACE /opt/project）请确保您的remoteRoot设置launch.json为该值。如果您没有使用任何工作区，请确保将该值设置为/，我在使用时遇到了一些问题./。
3. 将该resolveSourceMapLocations属性添加到您的文件中，这应该可以帮助您的调试器在找不到文件时launch.json找到您的文件。关联.map.js
4. 如果您的项目不包含在根文件夹中，请确保该localRoot属性指向包含您的代码的目录。
5. 如果所有这些步骤都失败，请尝试查看您是否使用的是 VsCode v16.0 或更高版本，在撰写本文时，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
  }
 ]
}