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

77

我到处都看过了，但在VS Code中调试TypeScript时仍然遇到问题。我已经阅读了该线程，但是仍然无法击中TypeScript文件中的断点，击中.js文件中的断点都可以正常工作。

这是我建立的最简单的“ hello world”项目。

  • 应用程式：

    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上的其他位置后，断点再次变为灰色并且没有被击中。我在此测试项目中所做的不同之处在于，通过使用以下命令编译TypeScript文件来使用内联源地图：tsc app.ts --inlinesourcemap

我将上述示例项目上载到GitHub，因此您可以在此处查看它。

javascript  debugging  typescript  visual-studio-code 
— 弗拉基米尔·阿米尔科夫（Vladimir Amiorkov）
source

Answers:

30

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

"outFiles"值应与tsconfig.jsonfor中的一组匹配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

— v-安德鲁
source
3
非常感谢！我花了整整一天的时间来寻找解决问题的方法，并将outDir与sourceMaps结合使用终于解决了它！
— Maksym
在使用VSC 1.8.1和Node.js 8.9.1的Windows下，我必须进行以下更改launch.json："outFiles": [],而不是，outDir": "${workspaceRoot}/compiled",我必须从切换"program": "${workspaceRoot}/app.js",到"program": "${workspaceRoot}\\app.js",so \而不是/。
— surfmuggle
17

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

上下文：我遵循的是Visual Studio Code HelloWorld示例，但发现自己无法在断点处停止。

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

— 迪特尔
source
3
请注意：对我而言，确实需要将sourceMaps设置为true，但是我还必须按照下一个答案中的说明设置outFiles。
— fool4jesus
同样在这里！没有，vscode只停止了debugger;（嗯，至少是这样。作为开始的石蕊测试...）。–"outDir": "${workspaceRoot}/build"断点也可以很好地工作...（所以，很有可能，vscode无法在没有...的情况下在构建侧（它正在自然地运行）显示源端断点）
— Frank Nocke
6

我认为问题可能出在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}"
}
— 之中
source
我将“程序”：“ $ {workspaceRoot} /app.js”更改为“程序”：“ $ {workspaceRoot} /app.ts”，但仍未命中.ts文件中的断点，只有一个.js文件被击中。
— 弗拉基米尔·阿米奥尔科夫'16
您能否遵循我在以下文章中给出的答案：stackoverflow.com/questions/35606423/…从检查map.js文件中的路径开始。它应该可以帮助您查明问题。
— 在一片
从该线程（github.com/7brutus7/stackoverflow）运行示例项目时，我确实在.ts文件中获得了一个断点。不幸的是，我完全迷失了它在该项目中的工作方式，而不是在我的采样器项目中。
— 弗拉基米尔·阿米奥尔科夫'16
在您的原始代码中-您使用本地安装的tsc还是全局（检查task.json）？在上一个线程中，全局实例存在一些问题。
— 在一片
我使用全局tsc，在自动生成的task.json中，将其设置为““ command”：“ tsc”“。tsc版本为1.8.7
— Vladimir Amiorkov
5

面对相同的问题，并通过更正.ts文件路径来解决。
我的项目包含srcand distdirs，问题是生成的.map文件没有正确的路径到srcdir。

解决方法- tsconfig.json：

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

最初，我sourceRoot指的src是src里面没有目录dist。

另外，sourceMaps应设置为trueinside launch.json。

— 特布卡鲁
source
这是主要问题的很好总结。如上所述，launch.json中的sourceMaps是必需的，但是由于更改了launch.json“程序”值以指向.js文件而不是.ts文件，所以我遇到了一个问题。VS Code达到断点。.重新工作！加油！
— jwwishart '16
我花了很多时间sourceRoot来解决这个问题，结果您的建议就是解决方案。啊! 我希望这不是很辛苦的工作。我希望您在运行tsc --init与该sourceRoot字段相关的注释时更具描述性，并解释了该文件实际期望的结构，以便您找出正确的值。无论如何，谢谢！
— Michael Tiller
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",
— 埃里克·哈特福德
source
感谢共享，由于某种原因，我还必须添加该sourceMapPathOverride。
— M. Herold
3
diagnosticLogging现在已弃用...trace改为使用。
— 卢卡斯
3

面对同样的问题，并通过更正"webRoot"launch.json中的配置解决了它。 这是我工作区的资源管理器视图。

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

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"
        }
    ]
}
— 希望太阳
source
感谢您的解决方案，帮助我解决了问题。由于没有发现断点，我越来越沮丧。
— LearnToLive
@LearnToLive，很高兴听到您解决了您的问题。我想说谢谢您帮助我获得了第一个徽章。
— Hope Sun
2

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

— 穆罕默德·叶希亚
source
2

没有其他答案对我有用。

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

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

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

这为我解决了这个问题！

— 大流士
source
1

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

将以下行添加到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即可使该路径与您的实际源路径匹配。我发现我为不同的项目需要略有不同的配置，因此了解如何调试它确实有帮助。

— 科布斯·克鲁格
source
1

经过大量时间解决此问题后，事实证明，最好的方法是通过在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”，不再使用。

— ŽeljkoTomić
source
1

我将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}" }

包括'“ sourceMapPathOverrides”'是我的解决方案

— YainaVillafañes
source
0

launch.json中的此配置有效：

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

— User1分钟
source
0

我想为腾出几个小时的头部撞击做出贡献。

我使用了Debugger for Chrome for VS代码（网络风暴不需要它），建议您花10分钟阅读他们的页面，它将启发您的世界。

安装调试器扩展后，请确保已安装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中切换到Debug Console并运行.scripts。这是一个非常有用的命令，因为它显示了将生成的代码映射到了哪个源。

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

如果这是错误的，那么您必须在launch.json中验证您的sourceMapPathOverrides，示例可以在扩展页面上找到

— 阿尤布·卡亚提（Ayoub Khayati）
source
0

是！以我为例，在launch.json文件中更改此设置可以解决问题：

  "sourceMapPathOverrides": {
    "webpack:///./~/*": "${webRoot}/node_modules/*",
    "webpack:///./*":   "${webRoot}/*",
    "webpack:///*":     "*",
    "webpack:///src/*": "${webRoot}/*",
  }
— 沃尔特
source
0

使用Angular，我发现我总是将文件夹目录指向 src文件文件夹-这样，我的工作空间就不会被我从未使用过的根文件所困扰。但这在过去给了我几个问题，尤其是在使用VSCode时，因为我认为许多功能都可以查看文件夹结构，然后从那里开始运行文件。（期待一些丢失的文件）

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

我还相信，以上有关更改文件和文件夹结构的许多答案都是解决此问题的解决方法，该问题不会在根文件夹中打开您的工作项目，无论您使用的是哪种框架/语言。

— 阿尔法·布拉沃（Alfa Bravo）
source
-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; AAED，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

{“版本”：3，“文件”：“ app.js”，“ sourceRoot”：“”，“源”：[“ ../ app.ts”]，“名称”：[]，“映射”： “ AACA; IACI，oBAAmB，OAAc; QAAd，YAAO，GAAP，OAAO，CAAO; IAEjC，CAAC; IACL，iBAAC; AAAD，CAAC，AAJD，IAIC; AACD，IAAI，KAAK，GAAC，IAAI，UAAU，CAAC，aAAa ，CAAC，CAAC； AACxC，OAAO，CAAC，GAAG，CAAC，KAAK，CAAC，OAAO，CAAC，CAAC； AAC3B，OAAO，CAAC，GAAG，CAAC，OAAO，CAAC，CAAC”}

尝试替换它，然后再试一次不要忘记考虑源的目录层次结构

— 穆罕默德·叶希亚
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.