Debug your SharePoint Framework code running in Microsoft Edge with Visual Studio Code

May 14, 2018

For a long time, you were not able to remotely debug your SharePoint Framework solutions running in Microsoft Edge with Visual Studio Code. This was due to limitations of the Debugger for Edge and the Microsoft Edge developer tools.

The only possibility if you wanted to debug in Visual Studio Code, was to use Chrome in combination with the Debugger for Chrome Visual Studio Code extension. Which became one of the preferred extensions since SPFx version 1.3.4 for SPFx solutions.

Note: Check the SharePoint documentation for more information - Debug SharePoint Framework solutions in Visual Studio Code

Microsoft Edge DevTools Protocol

Since Windows 10 April 2018 Update, version 0.1 of the Microsoft Edge DevTools Protocol got released. In combination with the latest version of the Debugger for Edge extension, overriding the source map paths like with Chrome is now supported for Edge.

Note 1: here is the article about the Microsoft Edge DevTools Protocol release - https://blogs.windows.com/msedgedev/2018/05/11/introducing-edge-devtools-protocol/amp/

Note 2: more information about the Microsoft Edge DevTools Protocol itself can be found here - https://docs.microsoft.com/en-us/microsoft-edge/devtools-protocol/

Once you installed the latest Debugger for Edge extension, all you must do is duplicate the existing Chrome config you have in your ".vscode/launch.json" file, change the type property from "chrome" to "edge" and remove the runtimeArgs property.

The complete configuration for edge looks as follows:

When you now press F5 (when the localhost service is running), you should be able to debug your solution in Visual Studio Code like with Chrome.

Debugging in Visual Studio Code with Microsoft Edge

Debugging in Visual Studio Code with Microsoft Edge

Happy coding!

Comments