如何使用 Visual Studio(如 IE)在 Chrome 中获得完整的 JavaScript/TypeScript 调试

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29434401/
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-08-23 03:21:16  来源:igfitidea点击:

How to Get Full JavaScript/TypeScript Debugging in Chrome with Visual Studio (Like IE)

javascriptgoogle-chromedebuggingvisual-studio-2013typescript

提问by ASA2

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.

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

采纳答案by WiredPrairie

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.

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

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

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

虽然这不允许我在 Visual Studio 中设置断点,但它仍然有效并且对我的开发来说足够好。

Update April 2016

2016 年 4 月更新

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):

正如评论中的一些人指出的那样,有一种方法可以使这项工作变得更好一点,尽管体验并不像 Internet Explorer 那样完整。按照此处列出的步骤操作。它涉及使用自定义命令行启动 Chrome(以启用远程调试):

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.

然后在启用 WebKit 调试的情况下附加到 Chrome 进程。您可以添加自定义浏览器,以便轻松启动 Chrome。

Adding Custom Browser

添加自定义浏览器

(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.)

(但是,我要补充一点,我无法以一种我认为有用且一致的方式使其工作,尤其是当我使用 Chrome 进行大多数其他网络浏览时。)