Question

我到处寻找，我仍然在VS Code中调试TypeScript。我已经读过this线程，但我仍然无法点击放在TypeScript文件中的断点，点击.js文件中的断点一切正常。

所以这是最简单的＃34;你好世界＆＃34;我已经建立了项目。

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);行上设置断点并从＆＃34; Debug＆＃34;启动程序（F5）之后的所有步骤之后断点显示灰色的选项卡＆＃34;断点被忽略，因为找不到生成的代码（源映射问题？）。＆＃34;我附上了我观察的截图：

我错过了什么？

编辑：

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

编译TypeScript文件来使用内联源图

我将提到的示例项目上传到GitHub，以便您可以查看它here。

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

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

背景：我跟随Visual Studio Code HelloWorld example，发现自己无法停止断点。

我通过更改.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和dist dirs，问题是生成的.map文件没有到src目录的正确路径。

修复 - tsconfig.json：

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

最初，我的sourceRoot指向src，src内没有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",

Answer 6

面对同样的问题并通过更正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}"，并且有效！

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

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

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

Answer 8

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

Answer 9

其他答案都不适合我。

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

这解决了我的问题！

Answer 10

实际上只有一种解决方法，那就是查看实际使用的源地图路径。

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

Answer 11

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

cleaned_data

之前为：

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

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

Answer 12

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

Answer 13

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

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

Answer 14

我只需要重新启动我的Express服务器，然后重新连接调试器即可。

Answer 15

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

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

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

Answer 16

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

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

Answer 17

我愿意为一些小时的敲击做出贡献。

我使用调试器用于Chrome 用于VS代码（你不需要这个用于webstorm），我建议花10分钟阅读他们的page，这将启发你的世界。

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

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

＆＃13;

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

＆＃13;

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

这是一个例子：

＆＃13;

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
};

＆＃13;

然后你运行你的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 ，extension's page

上提供了示例

Answer 18

launch.json中的此配置工作：

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

Answer 19

晚会，但您可以在github Test globbing support for the outFiles attribute in the launch config #12254上查看此帖子。

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

我有一个类似的问题。我通过用outFiles

指示输出目录来修复

Answer 20

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

的示例

{＆＃34;版本＆＃34;：3，＆＃34;文件＆＃34;：＆＃34; app.js＆＃34;＆＃34; sourceRoot＆＃34;：＆＃34;＆＃ 34;，＆＃34;来源＆＃34;：[＆＃34; app.ts＆＃34]，＆＃34;名称＆＃34;：[＆＃34;的HelloWorld＆＃34;＆＃34; HelloWorld的。构造＆＃34]，＆＃34;映射＆＃34;：＆＃34; 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＆＃34;}

vs visual studio code app.js.map

{＆＃34;版本＆＃34;：3，＆＃34;文件＆＃34;：＆＃34; app.js＆＃34;＆＃34; sourceRoot＆＃34;：＆＃34;＆＃ 34;，＆＃34;来源＆＃34;：[＆＃34; ../ app.ts＆＃34]，＆＃34;名称＆＃34;：[]，＆＃34;映射＆＃34;：＆＃34; 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＆＃34;}

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

VS代码：＆＃34;断点被忽略，因为找不到生成的代码＆＃34;错误

20 个答案: