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

【问题标题】：How do I debug typescript code in VS 2017?如何在 VS 2017 中调试打字稿代码？
【发布时间】：2016-12-03 05:45:32
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

我所知道的是，当调试器启动时，VS 会与浏览器进行一些连接。
我可以让它与 IE 一起工作，但不能与 Chrome 一起工作。知道为什么吗？此外，如果您将所有脚本都放在一个 Bundle 中，这将无法正常工作 - （编辑！如果我刷新了浏览器链接就可以工作！）
@GregGum 我刚刚安装了 VS2017 社区版，但找不到要添加到项目的打字稿文件。你能建议如何使用 VS2017 社区版的打字稿，因为它不存在。那么我需要下载和安装什么才能在 VS2017 社区版中获取 typescript 文件和项目模板？
地图是否被复制到输出目录？
“地图是否被复制到输出目录？”是什么意思？我使用 bundles 将所有 Js 文件放在一个 bundle 中；我也应该包括地图文件吗？当我放置断点（在 VS2017 TS 文件中）时，我收到“未加载代码”的警告。

【解决方案2】：

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

【讨论】：

根据docs.microsoft.com/en-us/aspnet/core/client-side/…：“您可以使用浏览器链接一次在多个浏览器中刷新您的Web应用程序，这对于跨浏览器测试很有用。”因此，它与命中断点无关。

【解决方案3】：

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

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

【讨论】：

【解决方案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时会提示开发者工具服务器已经启动：

【讨论】：

【解决方案5】：

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

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

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

【讨论】：