Forum Discussion

Brass Contributor

Mar 19, 2017

Solved

SPFx breakpoints and debugging from Visual Studio Code

Hello guys, I am trying to find a way to debug my local SPFx workbench (react, typescript webpart) from Visual Studio Code instead from Chrome, but I could not find any guides on how to attach th...

Velin Georgiev
Apr 25, 2017
Quick update on this.

The Office Dev team just created more detailed guide here:
https://dev.office.com/sharepoint/docs/spfx/debug-in-vscode

Andrew Koltyakov

MVP

Mar 20, 2017

Hi Velin, It's possible to debug client side JS in VSC via Chrome Debugger protocol while executing accessing JS App in Chrome. There is an extension for this and nice description how it should work. Please check the link below https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code

Velin Georgiev

Brass Contributor

Mar 20, 2017

Thank you Andrew! I will see if I can configure it to work with the SPFx react webparts.

Velin Georgiev
Brass Contributor
Apr 01, 2017
Quick update on this. Andrew Koltyakov was right about the Debugger for Chrome, but I wanted to go one step further and create a guide.

I found very useful article here:
http://www.eliostruyf.com/how-to-debug-your-sharepoint-framework-web-part

I also created one here:
http://blog.velingeorgiev.pro/how-debug-sharepoint-framework-webpart-visual-studio-code

Gist with the launch.json config here:
https://gist.github.com/VelinGeorgiev/4a7b77ced7198df0a3898420d46f3405

Please let me know if any issues.
- Velin Georgiev
  Brass Contributor
  Apr 25, 2017
  Quick update on this.
  
  The Office Dev team just created more detailed guide here:
  https://dev.office.com/sharepoint/docs/spfx/debug-in-vscode
  - Kunal Kankariya
    MCT
    May 25, 2018
    Any idea on how to configure VSCode to launch IE and debug SPFx solutions? The workbench doesn't work with the latest chrome update.
    
    Regards,
    Kunal