82

有没有办法在 Visual Studio 中调试 TypeScript 源代码（而不是调试生成的 javascript）？

来自 TypeScript 语言规范：

TypeScript 可以选择提供源映射，从而启用源级调试。

因此，我希望能够在 ts 代码中放置断点并能够对其进行调试，但它不起作用。我没有在规范中找到任何其他关于调试的提及。我应该做些什么来完成这项工作吗？也许“可选”这个词暗示我需要做一些事情才能让它工作......有什么建议吗？

4

6 回答 6

71

VS2017 及更高版本的当前答案

自 VS2017 以来，直接在 Visual Studio 中调试 Typescript 成为可能。从文档中：

您可以使用 Visual Studio 调试 JavaScript 和 TypeScript 代码。您可以设置和命中断点、附加调试器、检查变量、查看调用堆栈以及使用其他调试功能。

还有关于在 Visual Studio 中调试 Typescript/Asp.NET Core 的其他资源。

也可以在Visual Studio Code中调试打字稿：

Visual Studio Code 通过其内置的 Node.js 调试器支持 TypeScript 调试，也通过 Debugger for Chrome 等扩展支持客户端 TypeScript 调试。

VS早期版本的原始答案：

您可能无法在 VS 中进行调试，但您可以在某些浏览器中进行调试。Aaron Powell 刚刚发表了一篇关于让断点在 Chrome Canary 中工作的博客：https ://www.aaron-powell.com/posts/2012-10-03-typescript-source-maps/ 。

总结（非常简要地）Aaron 所说的，您使用编译器上的开关在与源代码相同的目录中-sourcemap生成一个文件。*.js.map在支持源映射的浏览器中（Chrome Canary，可能是最近的 Firefox 构建，因为它们是 Mozilla 的想法），然后您可以像调试.ts普通.js文件一样调试源。

该博客以“希望 Visual Studio 或 IE（或两者）团队也选择 Source Maps 并添加对它们的支持”结束。- 这表明它还没有发生。

更新：

随着 TypeScript 0.8.1 的发布，Visual Studio 现在也可以进行 Source Map 调试：

https://blogs.msdn.com/b/typescript/archive/2012/11/15/announcing-typescript-0-8-1.aspx

来自公告：

调试 TypeScript 现在支持源代码级调试！源映射格式作为一种调试语言的方式越来越受欢迎，这种语言可以转换为 JavaScript，并受到各种浏览器和工具的支持。在 0.8.1 版本中，TypeScript 编译器正式支持源映射。此外，新版 TypeScript for Visual Studio 2012 支持使用源映射格式进行调试。从命令行，我们现在完全支持使用 --sourcemap 标志，它输出与 JavaScript 输出相对应的源映射文件。此文件将允许在启用源映射的浏览器和 Visual Studio 中直接调试原始 TypeScript 源。要在 Visual Studio 中启用调试，请在使用 TypeScript 项目创建 HTML 应用程序后从下拉列表中选择“调试”。

更新：

WebStorm 还增加了对通过 SourceMaps 进行调试的支持：http: //blog.jetbrains.com/webide/2013/03/webstorm-6-0-released-adds-typescript-debugging-with-source-maps-fresh-ui-以及更多/

首先，WebStorm 允许使用 TypeScript、CoffeeScript 和 Dart 等现代语言进行更智能、更简化的 Web 开发。除了为这些语言提供一流的代码编辑器外，WebStorm 6 还提供：

将这些高级语言自动编译/转换为所有支持平台上的浏览器可识别的语言。使用源映射对 TypeScript、Dart 或 CoffeeScript 进行全功能调试。

于 2012-10-03T15:34:09.600 回答
15

使用 VS2013 Typescript 应用程序，我无需更改 web.config 中的任何内容。我在 ts 文件中放了一个断点并在 IE 中调试，然后断点在 TypeScript 中停止了。

于 2013-12-11T00:46:19.137 回答
5

这现在已在 VS 2017 中修复，因此您可以直接在 Visual Studio 和 typescript 中进行调试。

只需在 *.ts 文件中设置断点，它就会被命中。

它会在 VS 而不是 IE 中调试，就像你在调试 c# 一样。

于 2016-12-03T05:51:08.100 回答
3

使用 Visual Studio 调试 typescript 可以使用正确的设置。（在以前的 VS 版本中，我有时会遇到问题，下面是它与 VS 2015 CTP 6 的工作方式）

  1. 首先，确保在将 typescript 编译为 javascript 时创建源映射。所以你应该在每个 xxx.js 附近都有一个 xxx.js.map 文件。

    通过在 Visual Studio 之外运行 typescript 编译器获取源映射不会造成任何困难，在 tsc 命令行添加

    --sourcemap %1.ts

    默认情况下，您的 gulp 脚本通常会创建源映射。

  2. 在 Visual Studio 中配置您的 Web 应用程序。

    将Internet Explorer设置为启动浏览器。我得到它只与 IE 一起工作，不认为任何其他浏览器都可以工作。

    在项目属性中，转到“Web”选项卡并配置底部的“调试器”部分：禁用所有调试器！这是违反直觉的，您可能会看到以下错误消息：

    您已尝试启动调试器，但根据您在 Web 属性页面上的当前调试设置，没有要调试的进程。This occurs when the "Don't open a page. Wait for a request from another process" option is selected, and ASP.NET debugging is disabled. 请检查 Web 属性页面上的设置，然后重试。

    正如错误消息所说，Web 属性顶部的“开始操作”应该是另一个选项，例如“当前页面”。

    现在或以后在 Visual Studio 中的 ts 代码中设置断点。

    按F5

虽然您可以使用 Visual Studio 编辑器来调试和编辑 ts 文件，但“编辑并继续”将不起作用，目前没有可以重新加载 js 和 js.map 文件并继续的浏览器。（如果我错了，请纠正我，我会很高兴。）

于 2015-04-06T05:52:20.373 回答
2

在我的任何机器上使用 VS2013 Update 3 时，TypeScript 调试对我都不起作用。经过一番挫折，我决定尝试更新到 VS2013 Update 4 CTP。最后断点在VS中被击中！

于 2014-10-31T15:55:34.310 回答
-1

简短回答：重新启动 Visual Studio

背景：我有 2 个 Visual Studio 2015 实例，其中有两个使用 TypeScript 的不同项目。第一个启动的实例没有正确调试，第二个没有。所有项目设置都是相同的。我终于重新启动了第一个实例，然后它调试了 TypeScript（最后）。

于 2017-02-14T10:16:18.737 回答