Forum Discussion

Velin Georgiev's avatar
Velin Georgiev
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's avatar
    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

Velin Georgiev's avatar
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's avatar
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's avatar
    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's avatar
      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

       

       

    • Daniel Westerdale's avatar
      Daniel Westerdale
      Iron Contributor
      Jul 03, 2017

      Hi

       

       

      I have copied the launch.json, from the office dev article and VSCode dubug against hosted workbench. I do however, see mimified code in an exeception related to React; even with my break point set in the Render method.  Looking athttps://blog.mastykarz.nl/5-differences-sharepoint-framework-debug-release-builds/ , Is the best approach to force a Debug release ?

       

      Gulp --bundle

      Then package the the debug solution /temp/deploy ( ?????) and add to the app catalogue. 

      Thereafter, use Chrome-Dev tools debugger to see where the issue might be. In my case the web part works perfectly in Localhost workbench.

      I know we need to be careful not bundle the map files etc in the final release. 

       

       

Resources