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.
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.
Share Improve this question asked Apr 3, 2015 at 14:47 A2MetalCoreA2MetalCore 1,6394 gold badges27 silver badges50 bronze badges 5- Using Visual Studio 2013 Community – A2MetalCore Commented Apr 3, 2015 at 14:47
- For me only IE 11 works correctly – Vahid Amiri Commented Jun 15, 2016 at 14:33
- 1 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. – A2MetalCore Commented 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 Commented 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./blogs/2016/02/23/… – A2MetalCore Commented May 1, 2018 at 14:55
1 Answer
Reset to default 8For a fully integrated debugging experience with any JavaScript/browser based application and Visual Studio, you'll need to use Internet Explorer today. As TypeScript piles 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 ments have pointed out, there's a path to making this work a little better, although the experience isn't nearly as plete as it is for Internet Explorer. Follow the steps outlined here. It involves starting Chrome with a custom mand 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.)