如何用vscode调试webpack

Posted 2023-04-17

参考技术A 打开vs
code，从命令行打开预先定义的文件夹，如:
e:\netcore\demo；
使用快键键调出命令行窗口，ctrl
+
`;
其实这里有两种方式，直接通过windows
命令行也是一样的。前提是安装了
.net
core
sdk.

如何调试打字稿代码，在 vscode/vs2015 中使用 webpack 捆绑

【中文标题】如何调试打字稿代码，在 vscode/vs2015 中使用 webpack 捆绑

【英文标题】：How to debug typescript code, which is bundled using webpack in vscode/vs2015

【发布时间】：2016-07-09 22:51:14

【问题描述】：

这是我的工作流程。

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

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

所以我有以下工作流程： gulp --> webpack (ts-loader) --> 将 *.js 与 source-maps 捆绑在一起。我还使用browsersync 来运行简单的服务器并自动更新页面。

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

什么可能导致问题？

【问题讨论】：

你有没有让它工作？如果是这样，你能添加一个解释如何的答案吗？谢谢

【参考方案1】：

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

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

从0.8.1 版本开始，TypeScript 提供源代码级调试

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

【参考方案2】：

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

webpack 选项：

 
   devtool: 'inline-source-map'
 

您可以在我的 youtube 完整的 typescript 课程中了解 typescript 项目的 webpack 设置。

我会在 webpack 中为你提供 typescript 代码的 sourcemap 链接。 webpack sourcemap video