VS Code：“断点被忽略，因为找不到生成的代码”错误答案

【问题标题】：VS Code: "Breakpoint ignored because generated code not found" errorVS Code：“断点被忽略，因为找不到生成的代码”错误
【发布时间】：2016-06-30 14:22:33
【问题描述】：

我到处寻找，但在 VS Code 中调试 TypeScript 仍然存在问题。我已经阅读了this 线程，但我仍然无法命中放置在 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) 时，执行所有这些步骤后，断点灰显“由于找不到生成的代码而忽略断点（源映射问题） ?)。”我附上了我观察到的截图：

我错过了什么？

编辑：

嗨，我仍然坚持这一点。我设法制作了一个达到断点的示例项目，但是在我尝试将该项目复制到我的 HDD 上的不同位置后，断点再次变为灰色并且没有被命中。我在这个测试项目中所做的不同之处是通过使用tsc app.ts --inlinesourcemap 编译 TypeScript 文件来使用内联源映射

我把上面提到的示例项目上传到了 GitHub，你可以看看here。

【问题讨论】：

标签： javascript debugging typescript visual-studio-code

【解决方案1】：

我认为问题可能出在您的 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}"
}

【讨论】：

我将 "program": "${workspaceRoot}/app.js" 更改为 "program": "${workspaceRoot}/app.ts" 但 .ts 文件中的断点仍然是没有被击中，只有 .js 文件中的那个被击中。
您能否按照我在以下帖子中给出的答案进行操作：stackoverflow.com/questions/35606423/… 从检查 map.js 文件中的路径开始。它应该可以帮助您查明问题。
从该线程 (github.com/7brutus7/stackoverflow) 运行示例项目时，我确实在 .ts 文件中找到了一个断点。不幸的是，我完全迷失了它在那个项目中的工作原理，而不是在我的采样器项目中。
在您的原始代码中 - 您使用本地安装的 tsc 还是全局（检查 tasks.json）？在上一个线程中，全局实例存在一些问题。
我用的是全局的tsc，在自动生成的tasks.json里面是这样设置的 ""command": "tsc"" tsc版本是1.8.7

【解决方案2】：

如果切换到visual studio类型的脚本项目就可以正常调试ts文件了我认为 app.js.map 生成文件中的问题这是来自 visual studio app.js.map

的示例

{"version":3,"file":"app.js","sourceRoot":"","sources":["app.ts"],"names":["HelloWorld","HelloWorld .constructor"],"mappings":"AAAA;IACIA,oBAAmBA,OAAcA;QAAdC,YAAOA,GAAPA,OAAOA,CAAOA;IAEjCA,CAACA;IACLD,iBAACA;AAADA,CAACA,AAJD,IAIC;AAAED,IAAI,KAAK, GAAG,IAAI,UAAU,CAAC,kBAAkB,CAAC,CAAC;AAC/C,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC"}

vs visual studio 代码 app.js.map

{"version":3,"file":"app.js","sourceRoot":"","sources":["../app.ts"],"names":[],"映射":"AACA;IACI,oBAAmB,OAAc;QAAd,YAAO,GAAP,OAAO,CAAO;IAEjC,CAAC;IACL,iBAAC;AAAD,CAAC,AAJD,IAIC;AACD,IAAI,KAAK,GAAC,IAAI,UAAU, CAAC,aAAAa,CAAC,CAAC;AACxC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AAC3B,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC"}

尝试替换它并重试不要忘记考虑源的目录层次结构

【讨论】：

【解决方案3】：

更新：TypeScript 调试现已添加到 0.3.0 更新：始终清除断点，然后附加，然后添加断点。这是一个错误并已报告。

【讨论】：

【解决方案4】：

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

背景：我在关注Visual Studio Code HelloWorld example，发现自己无法在断点处停下来。

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

【讨论】：

请注意：对我来说，sourceMaps 确实需要设置为 true，但我还必须按照下一个答案中的说明设置 outFiles。
这里也一样！没有，vscode 仅在debugger; 上停止（嗯，至少是这样。作为开始的试金石......）。 – 使用"outDir": "${workspaceRoot}/build" 时，断点也可以很好地工作...（因此，如果没有...，vscode 可能无法在构建端（它正在运行）显示源端断点...）

【解决方案5】：

遇到同样的问题并通过更正.ts文件的路径解决了它。
我的项目包含src 和dist 目录，问题是生成的.map 文件没有src 目录的正确路径。

修复 - tsconfig.json:

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

最初，我的sourceRoot 指向src，而dist 内部没有src 目录。

此外，sourceMaps 应设置为 true 内 launch.json。

【讨论】：

这是对重大问题的一个很好的总结。如前所述，launch.json 中的 sourceMaps 是必需的，但由于将launch.json“程序”值更改为指向.js 文件而不是.ts 文件，我遇到了一个问题。 VS Code 命中断点.. 再次工作！干杯！
我花了很多时间来解决这个问题，而你关于sourceRoot 的提示最终成为了解决方案。啊!我希望这不是很难开始工作。我希望当您运行tsc --init 时，与sourceRoot 字段关联的注释更具描述性，并解释了文件实际期望的结构，以便您找出正确的值是什么。无论如何，谢谢！

【解决方案6】：

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

"outFiles" 值应该与 tsconfig.json 中的一组 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
        }
    ]
}

这是一个小项目，你可以看到所有的参数设置https://github.com/v-andrew/ts-template

【讨论】：

在使用 VSC 1.8.1 和 Node.js 8.9.1 的 windows 下，我必须进行这些更改 launch.json："outFiles": [], 而不是 outDir": "${workspaceRoot}/compiled",，我必须从 "program": "${workspaceRoot}/app.js", 切换到"program": "${workspaceRoot}\\app.js", 所以 \ 而不是 /。
outFiles 功能自 2020 年 9 月起已更改。请参阅 github.com/microsoft/vscode/issues/107615

【解决方案7】：

面临同样的问题，并通过更正 launch.json 中的 "webRoot" 配置解决了它。 Here's my workspace's explorer view.

由于编译结果main.js and main.js.map在"./project/www/build"目录中，我将"webRoot"条目从"${workspaceRoot}/project/www/build"更改为"${workspaceRoot}/project/www/build"，并且成功了！

launch.json文件如下：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8100",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/project/www/build"
        },
        {
            "name": "Attach to Chrome",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "url": "http://localhost:8100",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/project/www/build"
        }
    ]
}

【讨论】：

【解决方案8】：

实际上只有一种方法可以解决这个问题，那就是查看实际使用的源映射路径。

将以下行添加到launch.json：

"diagnosticLogging": true,

在很多其他的东西中，你的控制台会有这样的行：

SourceMap: mapping webpack:///./src/main.ts => C:\Whatever\The\Path\main.ts, via sourceMapPathOverrides entry - "webpack:///./*": "C:/Whatever/The/Path/*"

然后您只需调整您的sourceMapPathOverrides 以使路径与您的实际源路径匹配。我发现对于不同的项目我需要稍微不同的配置，所以了解如何调试它真的很有帮助。

【讨论】：

【解决方案9】：

在把头发扯了一天之后，我终于让它工作了。

问题是要摆弄三个文件——launch.json、tsconfig.json 和 webpack.config.js，所以它们都是组合的。

诊断记录是帮助我解决问题的关键。

Microsoft 请让这更容易......真的，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",

【讨论】：

感谢分享，出于某种原因，我还必须添加该 sourceMapPathOverride。
diagnosticLogging 现已弃用...改用trace。

【解决方案10】：

派对迟到了，但你可以在 github Test globbing support for the outFiles attribute in the launch config #12254 上查看这篇文章。

基本上在新版本的 vscode 中，您现在必须在 task.json 中使用带有属性 outFiles 的 glob 模式。

我有一个类似的问题。我通过用outFiles指示输出目录来修复

【讨论】：

【解决方案11】：

其他答案都不适合我。

然后我意识到launch.json 中的program 属性指向.js 文件，但我的项目是一个TypeScript 项目。

我将其更改为指向 TypeScript (.ts) 文件，并将 outFiles 属性设置为指向已编译代码所在的位置：

{
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "program": "${workspaceRoot}/src/server/Server.ts",
    "cwd": "${workspaceRoot}",
    "outFiles": ["${workspaceRoot}/dist/**/*.js"]
}

这为我解决了问题！

【讨论】：

【解决方案12】：

launch.json 中的这个配置有效：

{ "type": "node", "request": "launch", "name": "Launch Program - app", "program": "${workspaceRoot}/src/server.ts", "cwd": "${workspaceFolder}", "outFiles": ["${workspaceRoot}/release/**"], "sourceMaps": true }

【讨论】：

【解决方案13】：

我想为节省几个小时的头疼做出贡献。

我使用 Debugger for Chrome 进行 VS 代码（webstorm 不需要这个），我建议花 10 分钟阅读他们的page，它会启发你的世界。

安装调试器扩展后，确保 source-map 已安装，在我的情况下，我还需要 source-map-loader。检查您的 package.json。

我的 launch.json 是 chrome 调试器配置（我所有的源文件在 src 下）：

{
  // 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": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "webRoot": "${workspaceRoot}/src"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceRoot}/",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*"
      }
    }
  ]
}

将devtool: 'source-map' 添加到您的 webpack.config.js。生成映射内联的其他参数不适用于 Chrome 调试器（他们在他们的页面上提到了这一点）。

这是一个例子：

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Tutorial",
      inject: "body",
      template: "src/html/index.html",
      filename: "index.html"
    }),
    new DashboardPlugin()
  ],
  devtool: 'source-map',  
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      },
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        query: {
          presets: ["es2017", "react"],
          plugins: ['react-html-attrs']          
        }
      }
    ]
  },
  watch: true
};

然后你运行你的 webpack：`webpack-dev-server --devtool source-map --progress --port 8080，我使用 webpack-dev-server 但它和 webpack 有相同的选项。

执行此操作时，您必须看到生成的应用程序的 .map 文件。如果没有，请返回并验证您的设置。

现在在 VS Code 中切换到调试控制台并运行 .scripts。这是一个非常有用的命令，因为它显示了生成的代码映射到了哪个源。

类似这样的： - webpack:///./src/stores/friendStore.js (/Users/your_user/Developer/react/tutorial/src/stores/friendStore.js)

如果这是错误的，那么您必须在您的 launch.json 中验证您的 sourceMapPathOverrides，示例可在 extension's page

上找到

【讨论】：

【解决方案14】：

是的！在我的情况下，在 launch.json 文件中更改它可以解决问题：

  "sourceMapPathOverrides": {
    "webpack:///./~/*": "${webRoot}/node_modules/*",
    "webpack:///./*":   "${webRoot}/*",
    "webpack:///*":     "*",
    "webpack:///src/*": "${webRoot}/*",
  }

【讨论】：

【解决方案15】：

使用 Angular，我发现我总是将我的文件夹目录指向 src 文件夹——这样我的工作空间就不会被我从不使用的根文件弄得那么混乱。但这在过去给我带来了一些问题，尤其是在使用 VSCode 时，因为在我看来，许多功能都是查看文件夹结构，然后从那里开始运行文件。（期待一些丢失的文件）

因此，我遇到了与此错误消息完全相同的问题，并且从过去的经验中学习，我意识到我打开了我的项目深一个文件夹，而不是根 <app name> 文件夹。所以我只是关闭了我的项目并打开了一个文件夹（以便所有其他文件也包含在文件夹结构中），我的问题立即得到解决。

我也相信，以上关于更改文件和文件夹结构的许多答案都是解决这个问题的解决方法，即无法在根文件夹中打开你的工作项目，无论你使用什么框架/语言。

【讨论】：

【解决方案16】：

在解决这个问题上浪费了很多时间，结果发现最好的方法是通过在launch.json中添加以下行来打开调试跟踪。

"trace": true

看看问题到底出在哪里。您的调试控制台将输出以下内容：

Verbose logs are written to: /Users/whatever/Library/Application Support/Code/logs/blah/blah/debugadapter.txt

在许多其他内容中，您的控制台将包含以下行：

SourceMap: mapping webpack:///./src/index.ts => C:\Some\Path\index.ts, via sourceMapPathOverrides entry - "webpack:///./*": "C:/Some/Path/*"

使用 sourceMapPathOverride 修复它以实际匹配您的路径。属性“trace”以前称为“diagnosticLogging”，现已不再使用。

【讨论】：

【解决方案17】：

我将 launch.json 中的配置更改为：

{ "name": "Debug tests in Chrome", "type": "chrome", "request": "attach", "port": 9222, "sourceMaps": true, "sourceMapPathOverrides": { "*": "${webRoot}/*" }, "webRoot": "${workspaceRoot}" }

以前是：

{ "name": "Debug tests in Chrome", "type": "chrome", "request": "attach", "port": 9222, "sourceMaps": true, "webRoot": "${workspaceRoot}" }

Include '"sourceMapPathOverrides"' 是我的解决方案

【讨论】：

【解决方案18】：

我只需要重新启动我的 express 服务器，然后重新附加调试器。

【讨论】：

【解决方案19】：

在阅读了这个帖子并尝试了几乎所有我能找到的方法都无济于事后，我在 Google 上搜索了更多内容，并偶然发现了他们在 2020 年 9 月在 VSCode 1.49.0 中所做的这个weeery有趣的变化. 简而言之，outFiles 不像以前那样工作了。

https://github.com/microsoft/vscode/issues/107615

【讨论】：