Forum Discussion

Brass Contributor

Mar 19, 2017

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 the Chrome to Visual Studio Code and hit a breakpoint. Are there any good guides on how to do it?

This may be something trivial, but I am new to the react-gulp-vs code world and in the past, it was relatively easy to debug javascript with Visual Studio and IExplorer and I am wondering if easy setup exists with Visual Studio Code as well.

Thanks,

Velin

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.