CODEWITHSUNDEEP
javascriptvisual-studiodebuggingmicrosoft-edge
rortegax2
rortegax2

Reputation: 517

Visual Studio integrated Javascript debugging with Windows 10 Edge

Is there any way to enable Visual Studio integrated Javascript debugger with Windows 10 Edge? I mean the feature for stepping through the code, set breakpoints, etc. from inside the Visual Studio IDE. I am using Visual Studio 2012 and 2013, perhaps this can be achieved with 2015?

Upvotes: 18

Views: 20510

Answers (4)

Zhang
Zhang

Reputation: 3356

You need to have Script Debugging enabled.

enter image description here

And you need to install the debugger, otherwise it would prompt this,

enter image description here

Upvotes: 0

Chris Catignani
Chris Catignani

Reputation: 5306

Using: Microsoft EdgeHTML 18.17763 , MS Visual Studio 15.9.5

All I had to do was this: In VS...click Debug -> Options. Under Debugging-General...check Enable JavaScript debugging for ASP.NET (Chrome, Edge and IE) The next time you launch Edge from VS you will see the blue Developer Tools Server icon next to the address bar. enter image description here

Upvotes: 1

Valuator
Valuator

Reputation: 3637

This feature has finally been added in Visual Studio 2017 15.7.

JavaScript debugging with Microsoft Edge

The Windows 10 April 2018 Update is also needed, as it contains the Microsoft Edge DevTools Protocol

Upvotes: 4

Shaun Luttin
Shaun Luttin

Reputation: 141792

TLDR;

Once it is running in Edge, use Debug > Attach to Process from Visual Studio Community 2015.

  • Attach to: Script code
  • Available Processes: MicrosoftEdgeCP.exe

Steps

  1. Optional: Set Edge as your default browser.
  2. Open your project in Visual Studio.
  3. Add breakpoints in your JavaScript.
  4. In the Solution Explorer, select your project
  5. Use Ctrl + Shift + W to "View in browser."
  6. If you did step 1, it will open in Edge. Otherwise, copy the URL into Edge.
  7. Once it is running in Edge, in Visual Studio, go to Debug > Attach to Process.
  8. In the "Attach to" area, select "Script code".
  9. From the "Available Processes" choose "MicrosoftEdgeCP.exe".
  10. Click attach and refresh the page in Edge.
  11. You will now be debugging from the Visual Studio IDE.

Set Default Browser

Set Edge as Default Browser

Attach Visual Studio to Edge Script

Attach to Process

Debugging

Debugging in Visual Studio

The above works in Visual Studio Community 2015 and it might also work in previous versions. Hooray!

Upvotes: 15

Related Questions