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

问题描述

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

解决方案

要获得与任何基于 JavaScript/浏览器的应用程序和 Visual Studio 的完全集成的调试体验，您现在需要使用 Internet Explorer.由于 TypeScript 编译为 JavaScript，因此集成调试也需要 Internet Explorer.

如果我想使用另一个浏览器，我经常使用的技巧"是在我的 TypeScript/JavaScript 代码的某处添加一个 debugger; 语句，并在 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屋！