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

Question

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

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

Answer 1

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

但是，在Visual Studio 2017中，这已得到修复。只需设置您的断点并使用IE（或Chrome）运行您的项目，您的断点将在您的ts文件中点击，您可以在VS环境中（而不是在浏览器代码调试窗口中）单步执行代码。这是Typescript开发的一大进步。

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

Answer 2

确保启用浏览器链接以查看TS断点被点击。该选项是VS2017中浏览器选择下拉列表右侧的蓝色箭头圆圈，它似乎默认为禁用。

Answer 3

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

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

Answer 4

Microsoft Edge DevTools Protocol可以很容易地调试JavaScript和TypeScript，而Windows 10 April 2018 Update (Version 1803)则可以使用它。您还需要Visual Studio 2017 Version 15.7或更高版本。

在运行JavaScript调试出现很多问题之前，但有了这些更新，它开箱即用：

• 我刚刚开始调试您的ASP.NET项目
• 在TypesScript（或JavaScript）文件中设置断点
• 如果未启用JS调试，则会出现一个消息窗口，提示您启用它。也可以在VS选项中找到此设置（搜索“调试”以快速查找）：工具>选项>调试>常规>为ASP.NET（Chrome，Edge和IE）启用JavaScript调试
• 无需重新启动。断点会立即被击中。

注意：使用Edge时，将提示开发人员工具服务器已启动：

Answer 5

我发现在Visual Studio 2017（ver15.9.5）中不会中断的两个条件。

1）.UseContentRoot
在Program.cs的WebHost.CreateDefaultBuilder方法中，如果使用UseContentRoot（）更改内容路由，则VS不会中断。

2）wwwroot文件夹
您可以通过UseWebRoot（）更改webroot，此方法可以正常运行。
但是，如果删除项目根目录中的“ wwwroot”文件夹，VS将不会中断。