VS代码：“由于生成的代码未find而忽略断点”错误

我已经到处寻找，我仍然有问题在VS代码中debuggingTypeScript。 我已经读过这个线程，但仍然无法击中放置在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);上设置了一个断点console.log(message); 行并从“debugging”选项卡启动程序（F5），断点呈灰色显示“由于生成的代码未find而被忽略的断点（源映射问题？）”。 我附上了我正在观察的截图：

我错过了什么？

编辑：

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

我把上面提到的示例项目上传到GitHub，所以你可以在这里看看。

Answer 1

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

Answer 2

我遇到了这个问题，同时寻找解决我遇到的类似问题。 尽pipe和OP的问题有所不同，但也可以帮助其他人。

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

我通过更改.vscode/launch.json来解决我的问题，以便在启动configuration下设置"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文件的path来解决它。
我的项目包含src和dist dirs，问题是生成的.map文件没有正确的path到src目录。

修复 – tsconfig.json ：

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

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

此外，在sourceMaps ， sourceMaps应该设置为true 。

Answer 5

整天把头发拉出来后，我终于find了工作。

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

诊断logging是帮助我弄明白的关键。

微软请让这更容易…真的，vscode本来可以想出这个或至less引导我更多的过程。

无论如何，这是什么终于在我的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", 

Answer 6

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

Answer 7

面对相同的问题，并通过更正launch.json中的"webRoot"configuration来解决这个问题。 这是我的工作区的资源pipe理器视图。

由于编译结果main.js and main.js.map "./project/www/build"位于"./project/www/build"目录，因此我将"webRoot"条目从"${workspaceRoot}/project/www/build"改为"${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" } ] } 

Answer 8

没有其他答案为我工作。

然后，我意识到我的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"] } 

这解决了我的问题！

Answer 9

 outFiles": ["${workspaceRoot}/compiled/**/*.js"], 

这拯救了我的生命，因为TS不是在寻找子代。 非常感谢

Answer 10

实际上只有一种解决方法，就是查看实际使用的源映射path。

launch.json添加到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 ，使path匹配到你的实际源path。 我发现我需要为不同的项目稍微不同的configuration，所以理解如何debugging真的有帮助。

Answer 11

如果你切换到Visual Studiotypes的脚本项目，你可以debuggingts文件通常我认为这里的app.js.map生成文件中的问题是从Visual Studio app.js.map

{ “版本”：3 “文件”： “app.js”， “sourceRoot”： “”， “源”：[ “app.ts”]， “名称”：[ “的HelloWorld”， “HelloWorld.constructor” ]， “映射”：“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 视觉工作室代码 app.js.map

{ “版本”：3 “文件”： “app.js”， “sourceRoot”： “”， “源”：[ “../ app.ts ”]，“ 名称 ”：[]，“ 映射”： “AACA; IACI，oBAAmB，OAAc; QAAd，亚奥，会计，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“}

尝试replace它，并再次尝试不要忘记考虑源的目录层次结构

Answer 12

晚了，但你可以在github上检查这个post在启动configuration＃12254中testingoutFiles对outFiles属性的支持 。

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

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

Answer 13

launch.json中的这个configuration工作：

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

Answer 14

我想贡献几个小时的头撞。

我使用了Debugger for Chrome for VS代码（你不需要webstorm），我会build议花费10分钟阅读他们的页面 ，它会启发你的世界。

安装debugging器扩展后，确保安装了source-map ，在我的情况下，我也需要source-map-loader 。 检查你的package.json 。

我的launch.json是铬debugging器configuration（所有我的源文件在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}/*" } } ] } 

Answer 15

如果这给你一个很难的时间，我会尝试实际使用

debugger;

命令只要把它放在你的代码中任何你打算在你的javascriptdebugging，然后看看你的代码是如何改变（或检查为什么生成的代码没有find）