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

【问题标题】：Hit breakpoints on Typescript files while debugging using an attached debugger in VsCode在 VsCode 中使用附加的调试器进行调试时在 Typescript 文件上命中断点
【发布时间】：2021-06-15 14:44:55
【问题描述】：

我正在尝试在 Docker 容器中运行的 Typescript 代码库上使用 attach 模式在 VsCode 中设置调试器。当我运行我的 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 文件。是否可以在附加到进程时执行此操作？

【问题讨论】：

标签： typescript docker debugging visual-studio-code

【解决方案1】：

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

在附加时检查端口和地址是否实际连接。如果可行，您的控制台中应该会显示一条消息Debugger connected。

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

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

【讨论】：

【解决方案2】：

最后，TypeScript 在进程级别被编译成 JavaScript，当远程使用常规调试器时，它可能无法正确识别源的原始格式。

这可能与 Debug in VS Code a Node Typescript app running in Docker 重复

您应该使用微软为此部分开发的扩展“远程开发”，以获得更好的容器进程源映射体验。

【讨论】：