Forum Discussion

Velin Georgiev's avatar
Velin Georgiev
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 th...
Velin Georgiev's avatar
Velin Georgiev
Brass Contributor

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.

  • 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 at 5 differences sharepoint 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. 

     

     

  • Kunal Kankariya's avatar
    Kunal Kankariya
    Copper Contributor
    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

     

     

Resources