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.
5
-
Using Visual Studio 2013 CommunityA2MetalCore– A2MetalCore2015-04-03 14:47:49 +00:00Commented Apr 3, 2015 at 14:47
-
For me only IE 11 works correctlyVahid Amiri– Vahid Amiri2016-06-15 14:33:16 +00:00Commented Jun 15, 2016 at 14:33
-
1UPDATE: Visual Studio Code (VSCODE) now supports full debugging with Chrome with incredible performance. And, with the latest release it supports a tabbed UI making it, IMHO, as usable as Visual Studio 2015.A2MetalCore– A2MetalCore2016-07-13 16:18:52 +00:00Commented Jul 13, 2016 at 16:18
-
@ASA2 where can I find the VSCODE debugging with Chrome instructions? I've been googling but no luck so far. Thank you!vhbazan– vhbazan2018-05-01 08:25:29 +00:00Commented May 1, 2018 at 8:25
-
Go to the Extensions pane (on the side) of VSCODE and search for 'Debugger for Chrome'. Also see: code.visualstudio.com/blogs/2016/02/23/…A2MetalCore– A2MetalCore2018-05-01 14:55:17 +00:00Commented May 1, 2018 at 14:55
Add a comment
|
1 Answer
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.)
8 Comments
A2MetalCore
I have found VS to be the most interactive IDE for JS/TS. Any other IDEs that provide a similar level of interactive debugging? WebStorm?
WiredPrairie
WebStorm claims to work via a plug-in for Chrome, but I've never found it to work consistently enough where I can depend on it. So, I don't use it.
Eric Hartford
Is this answer still true?
Alex Angas
Looks like you can use remote debugging: lostindetails.com/blog/post/…
UnionP
If you already have any chrome.exe processes launched without the remote debugging flag, you'll have to close them first, otherwise launching with this option will create a new tab in the existing host and the debugger won't be able to attach. This one tripped me up for a while since I use chrome as my primary browser, so it's normally already open
|