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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/40944682/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 04:03:18  来源:igfitidea点击:

How do I debug typescript code in VS 2017?

typescriptvisual-studio-2017

提问by Greg Gum

I have a ASP.NET Core project which uses TypeScript.

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

Is it possible to debug TypeScript code in Visual Studio?

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

采纳答案by Greg Gum

In prior versions of Visual Studio, this was not possible.

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

In Visual Studio 2017 however, this has been fixed. Just set your breakpoint and run your project using IE (or Chrome) and your breakpoint will be hit in your ts file and you can step through the code in the VS environment (not in the browser code debug window). This is a huge step forward for Typescript development.

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

The interesting things is that the code will transition to js if it jumps to another file for which there is no matching ts file, and then transition back again to ts again when it can.

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

回答by Andy M

Make sure you enable browser link in order to see TS break points being hit. The option is the blue arrow circle to the right of the browser selection drop-down in VS2017 and it seems to default to disabled.

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

enter image description here

在此处输入图片说明

回答by Hyman Miller

Debugging JavaScript and TypeScript is very easily possible with the Microsoft Edge DevTools Protocolwhich became available with the Windows 10 April 2018 Update (Version 1803). You also need Visual Studio 2017 Version 15.7or later.

使用Microsoft Edge DevTools 协议可以非常轻松地调试 JavaScript 和 TypeScript,该协议Windows 2018 年 4 月 10 日更新(版本 1803)一起提供。您还需要Visual Studio 2017 版本 15.7或更高版本。

Before I had a lot of problems getting JavaScript debugging to run but with these updates it just works out of the box:

在我在运行 JavaScript 调试时遇到很多问题之前,但通过这些更新,它开箱即用:

  • I just start debugging your ASP.NET project
  • Set a breakpoint in your TypesScript (or JavaScript) files
  • If JS debugging is not enabled, a message window will appear suggesting to enable it. This setting can also be found in the VS options (search for "debug" to find quickly): Tools > Options > Debugging > General > Enable JavaScript debugging for ASP.NET (Chrome, Edge and IE)
  • No restart required. Breakpoints are hit immediately.
  • 我刚开始调试你的 ASP.NET 项目
  • 在 TypesScript(或 JavaScript)文件中设置断点
  • 如果没有开启 JS 调试,会出现提示开启的提示框。这个设置也可以在VS选项中找到(搜索“debug”可以快速找到):Tools > Options > Debugging > General > Enable JavaScript debugging for ASP.NET (Chrome, Edge and IE)
  • 无需重启。断点立即被击中。

Note: When using Edge there will be a hint that the developer tools server has been started:

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

enter image description here

在此处输入图片说明

回答by NA Slacker

I was attempting to convert the dotnetcore ReactRedux template to Typescript and could not get breakpoints to hit my typescript files.

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

I was able to determine that in your tsconfig.jsonfile you need to have the options inlineSourceMap:trueand inlineSources:trueset.

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

回答by ume05rw

I found two conditions that will not break in Visual Studio 2017(ver15.9.5).

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

1) .UseContentRoot
In the WebHost.CreateDefaultBuilder method in Program.cs, if you change the content route using UseContentRoot(), VS will not Break.

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

2) wwwroot Folder
You can change webroot by UseWebRoot(), This works correctly.
But if you delete "wwwroot" folder in the project root, VS will not Break.

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