VS代码:"忽略断点,因为找不到生成的代码"错误

Question

我到处寻找,我仍然在VS Code中调试TypeScript.我已经读过这个帖子但是我仍然无法点击放在TypeScript文件中的断点,点击.js文件中的断点一切正常.

所以这里是我设置的最简单的"hello world"项目.

• app.ts:

  var message: string = "Hello World";
  
  console.log(message);
  

• tsconfig.json

  {
      "compilerOptions": {
          "target": "es5",
          "sourceMap": true
      }
  }
  

• launch.json

  {
      "version": "0.2.0",
      "configurations": [
          {
              "name": "Launch",
              "type": "node",
              "request": "launch",
              "program": "${workspaceRoot}/app.js",
              "stopOnEntry": false,
              "args": [],
              "cwd": "${workspaceRoot}",
              "preLaunchTask": null,
              "runtimeExecutable": null,
              "runtimeArgs": [
                  "--nolazy"
              ],
              "env": {
                  "NODE_ENV": "development"
              },
              "externalConsole": false,
              "sourceMaps": true,
              "outDir": null
          }
      ]
  }
  

我通过运行tsc --sourcemap app.ts命令生成了js.map文件.

在所有这些步骤之后,当我console.log(message);在行上设置断点并从"调试"选项卡启动程序(F5)时,断点显示为"断点被忽略,因为找不到生成的代码(源映射问题？)".我附上了我观察的截图:

我错过了什么？

编辑:

嗨,我仍然坚持这个.我设法做了一个打破断点的示例项目但是在我尝试将该项目复制到我的硬盘驱动器上的不同位置后,断点再次变为灰色并且没有被击中.我在这个测试项目中做的不同之处是通过编译TypeScript文件来使用内联源图tsc app.ts --inlinesourcemap

我将提到的示例项目上传到GitHub,以便您在此处查看.

Answer 1

设置"outFiles" : ["${workspaceRoot}/compiled/**/*.js"],为我解决了这个问题.

"outFiles"value应匹配tsconfig.jsonfor 中的一个set outDir,mapRoot哪个匹配${workspaceRoot}你的情况,所以试试吧"outFiles": "${workspaceRoot}/**/*.js"

这是我的 tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es6",
        "outFiles": ["${workspaceRoot}/compiled/**/*.js"],
        "mapRoot": "compiled"
    },
    "include": [
        "app/**/*",
        "typings/index.d.ts"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

和 launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/compiled/app.js",
            "cwd": "${workspaceRoot}",
            "outDir": "${workspaceRoot}/compiled",
            "sourceMaps": true
        }
    ]
}

Answer 2

我在寻找解决类似问题的同时遇到了这个问题.尽管与OP的问题不同,它可能对其他人有所帮助.

上下文:我遵循Visual Studio Code HelloWorld示例,发现自己无法停止断点.

我通过更改解决了我的问题,.vscode/launch.json以便"sourceMaps": true设置启动配置下的属性(它默认为false).

Answer 3

我认为问题可能出在launch.json的"程序"部分.试试这样:

{
    // Name of configuration; appears in the launch configuration drop down menu.
    "name": "Launch",
    // Type of configuration.
    "type": "node",
    "request": "launch",
    // Workspace relative or absolute path to the program.
    "program": "${workspaceRoot}/app.ts",
    // Automatically stop program after launch.
    "stopOnEntry": false,
    // Command line arguments passed to the program.
    "args": [],
    // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
    "cwd": "${workspaceRoot}",
    // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
    "runtimeExecutable": null,
    // Optional arguments passed to the runtime executable.
    "runtimeArgs": ["--nolazy"],
    // Environment variables passed to the program.
    "env": {
        "NODE_ENV": "development"
    },
    // Use JavaScript source maps (if they exist).
    "sourceMaps": true,
    // If JavaScript source maps are enabled, the generated code is expected in this directory.
    "outDir": "${workspaceRoot}"
}

Answer 4

面对同样的问题,通过纠正.ts文件的路径来解决它.
我的项目包含src和distdirs,问题是生成的.map文件没有正确的src目录路径.

修复 - tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true,
        "outDir": "dist",
        "sourceRoot": "../src"
    }
}

最初,我sourceRoot指着src并且里面没有srcdir dist.

另外,sourceMaps应该设置在true里面launch.json.

Answer 5

在整天撕掉我的头发之后,我终于开始工作了.

问题是有三个文件可以摆弄 - launch.json,tsconfig.json和webpack.config.js所以它们都是组合的.

diagnosticLogging是帮助我解决问题的关键.

微软请让这个更容易......真的,vscode可以想出这个或者至少引导我更多关于这个过程.

无论如何这里是我的launch.json最终起作用的:

"url": "http://localhost:8080/",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"diagnosticLogging": true,
"sourceMapPathOverrides": { "webpack:///src/*": "${workspaceRoot}/src/*" }

我的tsconfig.json:

"outDir": "dist",
"sourceMap": true

我的webpack.config.js:

output: {
   path: 'dist/dev',
   filename: '[name].js'
},
...
module: {
    loaders: [...],
    preLoaders: [{
        test: /\.js$/,
        loader: "source-map-loader"
    }]
}
...
plugins: [
    new webpack.SourceMapDevToolPlugin(),
    ...
],
devtool: "cheap-module-eval-source-map",