如何使用Visual Studio（如IE）在Chrome中完整的JavaScript / TypeScript调试 [英] How to Get Full JavaScript/TypeScript Debugging in Chrome with Visual Studio (Like IE)

问题描述

是否有一种使用Chrome类似于Internet Explorer当前提供的功能在Visual Studio中交互式调试JavaScript和TypeScript的方法？使用IE，我可以在IDE中的JavaScript或TypeScript中设置断点，并逐步执行IDE中的代码。我无法在Visual Studio中获得与Chrome相同的行为。

解决方案

对于使用任何基于JavaScript /浏览器的应用程序进行完全集成的调试体验和Visual Studio，您将需要使用Internet Explorer。当TypeScript编译为JavaScript时，集成的调试还需要Internet Explorer。

如果我想使用其他浏览器，我经常使用的技巧是添加一个 debugger; 语句在我的TypeScript / JavaScript代码中，并且开发工具在Chrome ...中打开，然后执行将停止该指令。只要启用了源映射，您应该在Chrome调试窗口中看到原始的TypeScript代码。然后，您可以使用Chrome调试工具来设置进一步的断点。如果文件没有更改，则会从页面的刷新中保留断点。

这不允许我在Visual Studio中设置断点，但它仍然有效，并且对我的开发工作很好。

2016年4月更新

正如评论中的一些指出，好一点，虽然体验并不如Internet Explorer那么完整。按照

（但是，我会添加我无法让这种方式工作，我觉得有用和一致，特别是当我使用Chrome进行大多数其他网页浏览时。）

Is there a method for interactive debugging JavaScript and TypeScript in Visual Studio using Chrome similar to the functionality currently provided with Internet Explorer? With IE I can set a breakpoint in JavaScript or TypeScript in the IDE and step through the code within the IDE. I cannot get that same behavior with Chrome in Visual Studio.

解决方案

For a fully integrated debugging experience with any JavaScript/browser based application and Visual Studio, you'll need to use Internet Explorer today. As TypeScript compiles to JavaScript, the integrated debugging also requires Internet Explorer.

The "trick" I often use if I want to use another browser is to add a debugger; statement somewhere in my TypeScript/JavaScript code and have the development tools open in Chrome ..., and execution will then stop on that instruction. As long as you have source-maps enabled, you should see your original TypeScript code in the Chrome debugging window. You can then use Chrome debugging tools to set further breakpoints. If the file doesn't change, the breakpoints will be retained from a "refresh" of the page.

This does not allow me to set breakpoints within Visual Studio though, but it's still effective and works well enough for my development.

Update April 2016

As a few in comments have pointed out, there's a path to making this work a little better, although the experience isn't nearly as complete as it is for Internet Explorer. Follow the steps outlined here. It involves starting Chrome with a custom command line (to enable remote debugging):

chrome.exe --remote-debugging-port=9222

And then attaching to the Chrome process with WebKit debugging enabled. You can add a custom browser to make it easy to launch Chrome.

(But, I will add that I haven't been able to get this to work in a way that I find useful and consistent, especially as I use Chrome for most other web browsing.)

这篇关于如何使用Visual Studio（如IE）在Chrome中完整的JavaScript / TypeScript调试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！