如何在 VS 2017 中调试打字稿代码?

How do I debug typescript code in VS 2017?

我有一个 ASP.NET 使用 TypeScript 的核心项目。

是否可以在 Visual Studio 中调试 TypeScript 代码?

在 Visual Studio 的早期版本中,这是不可能的。

然而,在 Visual Studio 2017 年,此问题已得到修复。只需使用 IE(或 Chrome)设置你的断点和 运行 你的项目,你的断点将在你的 ts 文件中命中,你可以在 VS 环境中单步执行代码(而不是在浏览器代码调试中window)。这是 Typescript 开发向前迈出的一大步。

有趣的是,如果代码跳转到另一个没有匹配 ts 文件的文件,代码将转换为 js,然后在可以时再次转换回 ts。

确保启用浏览器 link 以查看命中 TS 断点。选项是VS2017中浏览器选择下拉右边的蓝色箭头圈,好像默认是禁用的

调试 JavaScript 和 TypeScript 使用 Microsoft Edge DevTools Protocol which became available with the Windows 10 April 2018 Update (Version 1803). You also need Visual Studio 2017 Version 15.7 或更高版本非常容易。

之前,我在 JavaScript 调试到 运行 时遇到很多问题,但有了这些更新,它就可以立即使用了:

  • 我刚刚开始调试您的 ASP.NET 项目
  • 在您的 TypesScript(或 JavaScript)文件中设置断点
  • 如果没有开启JS调试,会出现提示信息window开启。此设置也可以在 VS 选项中找到(搜索 "debug" 以快速找到):工具 > 选项 > 调试 > 常规 > 为 ASP.NET 启用 JavaScript 调试(Chrome , Edge 和 IE)
  • 不需要重新启动。立即命中断点。

注意:使用Edge时会提示开发者工具服务器已启动:

我试图将 dotnetcore ReactRedux 模板转换为 Typescript,但无法获取断点来命中我的 typescript 文件。

我能够确定在您的 tsconfig.json 文件中您需要设置选项 inlineSourceMap:trueinlineSources:true

我发现两个条件不会在 Visual Studio 2017(ver15.9.5) 中被破坏。

1) .UseContentRoot
在Program.cs中的WebHost.CreateDefaultBuilder方法中,如果使用UseContentRoot()更改内容路由,VS不会Break。

2) wwwroot 文件夹
您可以通过 UseWebRoot() 更改 webroot,这可以正常工作。
但是如果你删除项目根目录中的 "wwwroot" 文件夹,VS 不会中断。