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

Question

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.

Silici

Using Visual Studio 2013 Community – Silici

For me only IE 11 works correctly – Genny

UPDATE: 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. – Silici

@ASA2 where can I find the VSCODE debugging with Chrome instructions? I've been googling but no luck so far. Thank you! – Meurer

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/… – Silici

Answer 1

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

Brody

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? – Silici

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. – Brody

Is this answer still true? – Emerson

@EricHartford - Yes, it's still true. There isn't a way to set breakpoints, etc. within Visual Studio and have it work with Chrome yet. – Brody

Looks like you can use remote debugging: lostindetails.com/blog/post/… – Anastomose

@AlexAngas you should add that as an answer here – Impedimenta

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 – Ruggles

I have never been able to get the VS debugger to work with Chrome. However, Microsoft Edge seems to be almost as fast and you can attach it to the debugger in VS2015. NOTE: Attach to: 'MicrosoftEdgeCP.exe'. – Silici