Question

我正在尝试在新的Typescript项目中使用VS Code调试器。我是调试器和Typescript的新手，所以这并不容易。我设法使调试器工作，但是它仅调试index.ts，而模块则被忽略。由于我的项目具有Typescript + Babel 7，因此有必要在运行调试器之前将源转换为./dist/。

我已经配置了以下脚本：

// package.json
"scripts": {
    "build:js": "babel src --out-dir dist --extensions \".ts,.js\" --copy-files --source-maps",
  },

这是我的Babel配置

// babel.config.js
module.exports = {
  presets: [
    "@babel/env",
    "@babel/typescript",
  ],
  plugins: [
    "transform-dynamic-import",
    "@babel/proposal-class-properties",
    "@babel/proposal-object-rest-spread",
    [
      "module-resolver",
      {
        alias: {
          "@": "./src",
        },
      },
    ],
  ],
};

我的Typescript配置：

// tsconfig.json
{
  "compilerOptions": {
    "target": "ESNEXT",
    "module": "commonjs",
    "allowJs": true,
    "noEmit": true,
    "strict": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    "preserveSymlinks": false,
    "experimentalDecorators": true,
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

在我的./src/文件夹中，我有2个文件index.ts和module.ts。他们的内容是基本的JavaScript，没什么花哨的：

// index.js
require("./module.js")();

let n = 0;
for (let i = 0; i < 3; i++) {
  n = n + 1;                   //there is a breakpoint on this line
  console.log(String(n));      //there is a breakpoint on this line
}

// module.js
module.exports = function() {
  let n = 0;
  for (let i = 0; i < 3; i++) {
    n = 10 - i;               //there is a breakpoint on this line
    console.log(n);           //there is a breakpoint on this line
  }
  return n;
};

我在代码中放置了4个断点。每个文件2个。该代码按预期工作，并依次向控制台输出10、9、8、1、2和3。

为了调试代码，我对VS Code调试器进行了如下配置：

"configurations": [
  {
    "type": "node",
    "request": "launch",
    "name": "Debug TypeScript in Node.js",
    "preLaunchTask": "npm: build:js",
    "program": "${workspaceFolder}/src/index.ts",
    "cwd": "${workspaceFolder}",
    "protocol": "inspector",
    "outFiles": [
      "${workspaceFolder}/dist/**/*.*"
    ],
    "sourceMaps": true
  }
]

当我在调试器中运行此配置时，仅考虑index.ts中的断点。 module.ts中的断点带有工具提示Unverified breakpoint变为灰色圆圈。根据VSCode文档，其含义如下：

如果原始源不存在源图，或者源图已损坏，无法在源和源之间成功映射生成的JavaScript，然后断点显示为未经验证（灰色空心圆）。 Source

我认为调试器没有正确处理我的源映射，但是我不知道该怎么想。我查看了./dist/文件夹，并创建了.map文件，它们的内容对我来说还不错。我还在调试过程中拍摄了代码截图。

有什么主意吗？

非常感谢！

在VS Code中调试JS，将忽略断点

0 个答案: