SOLVED
Home

SPFx breakpoints and debugging from Visual Studio Code

Highlighted
Velin Georgiev
Occasional Contributor

SPFx breakpoints and debugging from Visual Studio ...

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

5 Replies

RE: SPFx breakpoints and debugging from Visual Stu...

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

Re: RE: SPFx breakpoints and debugging from Visual...

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

Re: RE: SPFx breakpoints and debugging from Visual...

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.

Solution

Re: RE: SPFx breakpoints and debugging from Visual...

Quick update on this.

 

The Office Dev team just created more detailed guide here:

https://dev.office.com/sharepoint/docs/spfx/debug-in-vscode

Re: RE: SPFx breakpoints and debugging from Visual...

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. 

 

 

Related Conversations
Cost estimator for small scale catering
Louisa Dira  in  Excel  on
12 Replies
AAD PowerShell Commands not working (get-msol ...)
Ivan Unger  in  Azure Active Directory  on
14 Replies
Daily changing web query and how to handle in power query
John Smith  in  Excel  on
10 Replies
Change Color
Jonathan Blommers  in  Excel  on
23 Replies