Mar 19 2017 06:35 AM
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
Mar 20 2017 05:07 AM
Mar 20 2017 09:13 AM
Thank you Andrew! I will see if I can configure it to work with the SPFx react webparts.
Mar 31 2017 05:02 PM - edited Mar 31 2017 05:10 PM
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.
Apr 25 2017 02:53 PM
SolutionQuick update on this.
The Office Dev team just created more detailed guide here:
Jul 03 2017 03:49 AM
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.
May 25 2018 04:05 AM
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
Apr 25 2017 02:53 PM
SolutionQuick update on this.
The Office Dev team just created more detailed guide here: