17

I can debug with IE without any problem, but when I try different browsers code is not stopping on breakpoints. I hava a project that is currently not compatible with IE. I'm using OpenJSCAD as a dependency in my project, therefore I need to debug on Chrome or Firefox.

Is it possible to debug Java Script with Visual Studio 2015 on Chrome or Firefox?

Ogglas
  • 62,132
  • 37
  • 328
  • 418
mrh
  • 917
  • 1
  • 9
  • 28
  • Are you using the Javascript debugger which is built into Visual Studio? Or are you opening up Chrome and hitting F12? – alex Jul 01 '15 at 17:23

4 Answers4

20

You can absolutely do it, however it is a bit tricky to do. In the toolbar, click the button to get the dropdown of browsers to debug with and then click "Browse with...". Click "Add...", set Program to wherever Chrome is on your machine and set Arguments to --remote-debugging-port=9222. You can also set Incognito as I have to ignore cache but it is not required.

enter image description here

Important! Chrome cannot be started before, Chrome needs to start fresh from Visual Studio otherwise debugging won't work.

After this goto "Debug" -> "Attach to Process..." -> select the chrome instance with the title of your project or similar and then click Attach.

enter image description here

If everything works you can now Debug your Javascript in Visual Studio and use all Chrome features as well.

enter image description here

Note that when you have attached to the process you can't just stop debugging without terminating chrome.exe. However you can get around this by clicking "Debug" -> "Detach all".

Ogglas
  • 62,132
  • 37
  • 328
  • 418
  • 1
    You can debug to a Chrome Portable instance, so no need to close/open your regular Chrome. – Raph Aug 24 '16 at 12:56
  • I am using Windows 10 with Visual Studio 2015. When attaching to the process, I had to select "Script" and "WebKit" for the attach to options to get the debugger to work. I am also using Typescript and NOT plain old JavaScript, which might have made a difference. Seems to work fine with existing break-points in Typescript. This answer saved me a lot of time researching a solution. – Highdown Sep 25 '16 at 15:02
9

Javascript debugging in visual studio is not possible when we use non IE browser as debugging browser. The developer tools available on non-IE browsers are the first alternative(F12) to the JavaScript debugging.. If they are still not helping, the one should look for third party tools like https://www.jetbrains.com/webstorm/features/#JS_debugging

More Info on Debugging

Community
  • 1
  • 1
tech-gayan
  • 1,373
  • 1
  • 10
  • 25
1

I had this problem... And I realized what was happening, it was in my web/javascript App. I had an ahref link target='_blank', which created a new window out of the debugging process. So when in the new window no debugging. When in original VS window debugging works. Either temp disable the target _blanks, or hand change the URL in your current window.

SaltyHash
  • 11
  • 1
0

Remember to set the Select "WebKit Code" as the "Attach to" option. Also, to avoid having to start a fresh chrome every time I use Chrome Canary as the target process.

One thing I find annoying with this is that breakpoints placed in the original .js source files are ignored as VS creates "dynamic" script files in which the actual debugging is performed, I wonder if these can be synced somehow?

jool
  • 1,491
  • 12
  • 14