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

Question

提问by Vladimir Amiorkov

I have looked everywhere and I still have issue debugging TypeScript inside VS Code. I have read thisthread but still I am not able to hit my breakpoints placed inside a TypeScript file, hitting the breakpoints in .js files all works fine.

我到处寻找，但在 VS Code 中调试 TypeScript 仍然存在问题。我已经阅读了这个线程，但我仍然无法点击放置在 TypeScript 文件中的断点，点击 .js 文件中的断点一切正常。

So here is the simplest "hello world" project I have set up.

所以这是我设置的最简单的“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
        }
    ]
}

应用程序：

var message: string = "Hello World";

console.log(message);

配置文件

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

启动文件

{
    "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
        }
    ]
}

I have generated the js.map files by running the tsc --sourcemap app.tscommand.

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

After all of those steps when I set a breakpoint on the console.log(message);row and launch the program (F5) from the "Debug" tab that breakpoint is grayed out saying "Breakpoint ignored because generated code not found (source map problem?)." I attached a screenshot of what I am observing:

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

What am I missing?

我错过了什么？

Edit:

编辑：

Hi, I am still stuck on this. I managed to make one sample project that was hitting the break points but after I tried to copy that project to a different location on my HDD the break points again became gray and were not hit. What I did different in this test project was to use inline sourcemaps by compiling the TypeScript files with tsc app.ts --inlinesourcemap

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

I uploaded the mentioned sample project to GitHub so you can take a look at it here.

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

Answer 1

回答by v-andrew

Setting "outFiles" : ["${workspaceRoot}/compiled/**/*.js"]solved the issue for me.

"outFiles"value should match one set in tsconfig.jsonfor outDirand mapRootwhich is ${workspaceRoot}in your case, so try "outFiles": "${workspaceRoot}/**/*.js"

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

"outFiles"值应该与tsconfig.jsonfor中的一组匹配outDir，mapRoot这就是${workspaceRoot}你的情况，所以试试"outFiles": "${workspaceRoot}/**/*.js"

Here are my tsconfig.json

这是我的 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"
    ]
}

and launch.json

和 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
        }
    ]
}

Here is small project, where you may see all parameters set https://github.com/v-andrew/ts-template

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

Answer 2

回答by DieterDP

I came across this question while looking for a solution to a similar problem that I was having. Despite being different from OP's problem, it might help others.

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

Context: I was following the Visual Studio Code HelloWorld exampleand found myself unable to stop on break points.

上下文：我在关注Visual Studio Code HelloWorld 示例时发现自己无法在断点处停下来。

I solved my problem by changing .vscode/launch.jsonso that "sourceMaps": trueattribute under the Launch configuration was set (it starts default on false).

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

Answer 3

回答by Amid

I think the problem might be in your 'program' section of launch.json. Try it like this:

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

回答by tbutcaru

Facing the same issue and solved it by correcting the path to .tsfiles.
My project contains srcand distdirs and the problem was that the generated .mapfiles didn't have the correct path to the srcdir.

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

The fix - tsconfig.json:

修复 - tsconfig.json：

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

Initially, my sourceRootwas pointing to srcand there is no srcdir inside dist.

最初，我sourceRoot指向的src是src里面没有dir dist。

Also, sourceMapsshould be set to trueinside launch.json.

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

Answer 5

回答by Eric Hartford

After ripping my hair out all day, I finally got it to work.

把我的头发撕掉一整天后，我终于让它工作了。

The problem is there's three files to fiddle with - launch.json, tsconfig.json, and webpack.config.js so it's all combinatorial.

问题是需要处理三个文件 - launch.json、tsconfig.json 和 webpack.config.js，所以它们都是组合的。

the diagnosticLogging was key to helping me figure it out.

诊断日志是帮助我解决问题的关键。

Microsoft please make this easier... Really, vscode could have figured this out or at least guided me more on the process.

微软请让这更容易......真的，vscode 可以解决这个问题，或者至少指导我更多地了解这个过程。

Anyway here's what finally worked in my launch.json:

无论如何，这最终在我的 launch.json 中起作用了：

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

my tsconfig.json:

我的 tsconfig.json：

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

my webpack.config.js:

我的 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",

Answer 6

回答by Hope Sun

Facing the same issue and solved it by correcting "webRoot"config in launch.json. Here's my workspace's explorer view.

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

Since the compiling result main.js and main.js.mapare in "./project/www/build"directory, I change the "webRoot"entry to "${workspaceRoot}/project/www/build"from "${workspaceRoot}", and it worked!

由于编译结果main.js and main.js.map在 "./project/www/build"目录中，我将"webRoot"条目更改为"${workspaceRoot}/project/www/build"from "${workspaceRoot}"，它起作用了！

The launch.json file is as follow:

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"
        }
    ]
}

Answer 7

回答by Darius

None of the other answers worked for me.

其他答案都不适合我。

I then realised the programattribute in my launch.jsonwas pointing to the .jsfile, but my project is a TypeScript project.

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

I changed it to point to the TypeScript (.ts) file, and set the outFilesattribute to point to where the compiled code lives:

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

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

This solved the issue for me!

这为我解决了这个问题！

Answer 8

回答by Muhammad Yehia

Update: TypeScript debugging is now added in 0.3.0 Update: Always clear your breakpoints, then attach, then add breakpoints. This is a bug and has been reported.

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

Answer 9

回答by ?eljko Tomi?

After a lot of time wasted on resolving this issue, it turned out the best way is to turn on debugging trace by adding the following line in launch.json.

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

"trace": true

And see where the problem actually is. Your debug console will output something in the lines of:

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

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

Among a lot of other stuff, your console will have lines like these:

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

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

Use sourceMapPathOverride to fix it to actually match your path. The property "trace" used to be called "diagnosticLogging" which is no longer used.

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

Answer 10

回答by Yaina Villafa?es

I changed my config in launch.json for:

我在launch.json中更改了我的配置：

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

before was:

之前是：

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

Include '"sourceMapPathOverrides"' was my solution

包括 '"sourceMapPathOverrides"' 是我的解决方案

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

提问by Vladimir Amiorkov

回答by v-andrew

回答by DieterDP

回答by Amid

回答by tbutcaru

回答by Eric Hartford

回答by Hope Sun

回答by Darius

回答by Muhammad Yehia

回答by ?eljko Tomi?

回答by Yaina Villafa?es

相关推荐

最近更新

标签

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

提问by Vladimir Amiorkov

回答by v-andrew

回答by DieterDP

回答by Amid

回答by tbutcaru

回答by Eric Hartford

回答by Hope Sun

回答by Darius

回答by Muhammad Yehia

回答by ?eljko Tomi?

回答by Yaina Villafa?es

相关推荐

Javascript jQuery“点击后”事件

Javascript React.js 如何在组件内部渲染组件？

Javascript 0x80004005 (NS_ERROR_FAILURE) [nsIDOMHTMLFormElement.submit]

Javascript 根据另一个下拉列表中的选择填充一个下拉列表

相关推荐

最近更新

标签