如何调试在vscode / vs2015中使用webpack捆绑的typescript代码

Question

这是我的工作流程。

我有模块化的打字稿代码。导入如下：import { Logger } from './../data/logger';

然后我使用webpack（精确地，webpack-stream）和ts-loader捆绑它。我使用gulp运行webpack。

所以我有以下工作流程： gulp - ＆gt; webpack（ts-loader） - ＆gt;与源映射捆绑* .js。我还使用browsersync来运行简单的服务器并自动更新页面。

我可以从浏览器调试此代码，但我不能从vscode（使用Chrome Debugging for VS Code，甚至来自vs2015。

什么可能导致问题？

Answer 1

试一试 调试TypeScript

调试TypeScript就像JavaScript一样简单。

转到调试配置（ CMD + SHIFT + P 并键入调试配置）

将程序设置为 /src/server/app.ts （或您的路径）

运行启动 app.ts配置

在 app.ts

中设置断点

Answer 2

调试Typescript与调试c＃代码有点不同。您需要从 SourceMap 进行调试。

要了解有关SourceMap的更多信息，请check this link。

自版本0.8.1

以来，TypeScript中提供了源级别调试

如果您想了解有关在Visual Studio 2015中使用TypeScript的更多信息，Telerik在其developer blog上发布了一篇很棒的帖子。

Answer 3

我们需要在tsconfig.json文件中将源映射启用为true。在webpack中，我们需要使用该选项

webpack选项：

 {
   devtool: 'inline-source-map'
 }

您可以在我的YouTube打字稿完整课程中了解打字稿项目的Webpack设置。

我将为您提供Webpack中源代码的打字稿代码链接。 webpack sourcemap video