Debug SPFx React webpart with Visual Studio Code


I decided to create this guide due to lack of many articles at the current time


Official guidance already available. Please follow the steps mentioned in Debug SharePoint Framework solutions in Visual Studio Code


I found only one useful article on this link by Elio Struyf on how to debug SPFx. However, I decided to provide you with modified setup where you just hit F5 like a boss :)


Prerequisites


I assume that you already have

  1. Chrome browser installed
  2. Visual Studio Code installed
  3. SharePoint Framework installed
  4. Hello World SharePoint web app created
  5. Hello World SharePoint web app loaded in Visual Studio Code
  6. And the local test SPFx nodejs server is running ("gulp serve" command executed)


Install the "Debugger for Chrome" extension for VS Code


- Open Visual Studio Code - Go to top menu -> View -> Extensions (or Crtl+Shift+X)


Visual Studio Code extensions
  1. Type "Chrome" in the top right Extensions input box


Visual Studio Code extensions
  1. You should be able to see the "Debugger for Chrome" extension - Install it and reload the VS Code


Add Visual Code Debug launch configuration


  1. Go to VS Code debug view. You can do it from top menu -> View -> Debug



Visual Studio Code debug
  1. Add new debug launch configuration


Visual Studio Code debug
  1. Paste this configuration in the launch.json (borrowed from Elio Struyf and Michel Weber and modified a bit).


{
"version": "0.2.0",
"configurations": [
{
"name": "SPFx Local",
"type": "chrome",
"request": "launch",
"url": "https://localhost:4321/temp/workbench.html",
"webRoot": "${workspaceRoot}",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///../../../src/*": "${webRoot}/src/*",
"webpack:///../../../../src/*": "${webRoot}/src/*",
"webpack:///../../../../../src/*": "${webRoot}/src/*"
},
"runtimeArgs": [
"--remote-debugging-port=9222"
]
}
]
}



Lunch the Chrome browser in debug mode and hit a break point in VS Code


- Go to the VSCode Explorer (top menu -> View -> Explorer) - Navigate to ReactFeedWebPart.ts and add breakpoint to line 18 for example.


Visual Studio Code editor
  1. Close all active Chrome browser instances. This is important for the debugger to be properly attached
  2. Start the SPFx nodejs server (if you haven't) by executing "gulp serve" from the webpart folder
  3. Go to VS Code debug view (top menu -> View -> Debug)
  4. Hit the play (start debugging) button


Visual Studio Code debug
  1. This should open new Chrome browser with the local workbench - Add your Hello World webpart to the start page - Click the workbench preview button


Browser with the applicaiton
  1. The breakpoint should be hit by now


Visual Studio Code code

Good... we managed to run it locally, but how about running on a SharePoint Online site and debugging from VS Code?

Here is how to VS Code debug SPFx React webpart deployed to a SharePoint site


  1. Deploy your webapp to Office 365 SharePoint site. Here is a link to guide on how to do it
  2. Add the webpart to the site you will be using for the debugging purposes (link)
  3. Go to the VS code debug configuration again (the launch.json file) and extend it by adding another one for the online version
  4. The difference is really just the online site page you will be debugging


},
{
"name": "SPFx Online",
"type": "chrome",
"request": "launch",
"url": "https://<your_tenant>.sharepoint.com/sites/<your_site>/SitePages/<your_webpart_page>.aspx",
"webRoot": "${workspaceRoot}",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///../../../src/*": "${webRoot}/src/*",
"webpack:///../../../../src/*": "${webRoot}/src/*",
"webpack:///../../../../../src/*": "${webRoot}/src/*"
},
"runtimeArgs": [
"--remote-debugging-port=9222"
]
}


  1. Add your webpart to the SharePoint Online site page that you have set up in the configuration
  2. Repeat the "Lunch the Chrome browser in debug mode and hit a break point in VS Code" step, but with your new "SPFx Online" launch confuguration to verify that works


Visual Studio Code debugger

Do not forget that the local nodejs server should be up and running (gulp serve --nobrowser) and all Chrome instances should be closed before you hit the debug button from VS Code The site page url can be replaced with the online workbench as well


https://<your_tenant>.sharepoint.com/sites/<your_site>/_layouts/workbench.aspx


or just a separate configuration for the online workbench can be added to the launch file. The full launch.json Gist Available on Github Updated: Recently the office team created more detailed guide. You can find it on this link.


Happy debugging! Sharing is Caring