SharePoint Framework - Debugging SPFx Solutions


In a developer’s life, a code working on one environment might not work on another environment. Every user and environment is unique and this can be caused by anything. The best possible approach to tackle these issues is by debugging the situation and find the root cause of the issue.
In this article, we will explore the options to debug the SharePoint framework solutions in order to find out the specific issue.

Develop SharePoint Framework Web Part

Open the command prompt. Create a directory for SPFx solution.
  1. md debug-spfx-solution  
Navigate to the above-created directory.
  1. cd debug-spfx-solution  
Run Yeoman SharePoint Generator to create the solution.
  1. yo @microsoft/sharepoint  
Yeoman generator will present you with the wizard by asking questions about the solution to be created.
SharePoint Framework - Debugging SPFx Solutions
Solution Name: Hit Enter to have a default name (debug-spfx-solution in this case) or type in any other name for your solution.

Selected choice: Hit Enter
Target for component: Here, we can select the target environment where we are planning to deploy the client webpart, i.e., SharePoint Online or SharePoint OnPremise (SharePoint 2016 onwards).

Selected choice: SharePoint Online only (latest)
Place of files: We may choose to use the same folder or create a subfolder for our solution.
Selected choice: Same folder
Deployment option: Selecting Y will allow the app to deployed instantly to all sites and will be accessible everywhere.
Selected choice: N (install on each site explicitly)
Type of client-side component to create: We can choose to create a client-side webpart or an extension.

Selected choice: WebPart
Web part name: Hit Enter to select the default name or type in any other name.
Selected choice: DebugSPFx
Web part description: Hit Enter to select the default description or type in any other value.

Selected choice: Debugging SPFx solutions
Framework to use: Select any JavaScript framework to develop the component. Available choices are - No JavaScript Framework, React, and Knockout.
Selected choice: React
Yeoman generator will perform the scaffolding process to generate the solution. The scaffolding process will take a significant amount of time.
Once the scaffolding process is completed, lock-down the version of project dependencies by running the below command.
  1. npm shrinkwrap  
In the command prompt, type the below command to open the solution in a code editor of your choice.
  1. code .  

Run the SPFx WebPart

  1. On the command prompt, type “gulp serve”.
  2. Open SharePoint site.
  3. Navigate to /_layouts/15/workbench.aspx.
  4. Add the webpart to the page.

    SharePoint Framework - Debugging SPFx Solutions 

Debugging from the browser

SharePoint Framework is purely developed using HTML and JavaScript code. The first thought that comes to mind is to open the developer tool of the browser and debug the JavaScript code.
Hit F12 to open the developer tool and watch the console.
SharePoint Framework - Debugging SPFx Solutions 
Well, the console is full of the log. There are a few errors but those are not generated from our code but from workbench itself.
Also, note that the production bundles for SharePoint Framework solutions are minimized. Debugging the minimized code is never easy to point out the exact error.
Google Chrome has got the capability to transform this ugly code.
SharePoint Framework - Debugging SPFx Solutions 
Click “Pretty-print this minified file?” and it will transform the minimized ugly code into a pretty code.

Debug the solution while developing 

In usual cases, we want to debug our written code and not the minimized and bundled code.
  1. On the command prompt, type “gulp serve --nobrowser”.
  2. Append below to the URL.
    1. ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js    
  3. Click “Load debug scripts”.

    SharePoint Framework - Debugging SPFx Solutions

  4. From the Sources tab, open your code file and start debugging by setting up the debug points.

    SharePoint Framework - Debugging SPFx Solutions 
By this way, we are loading the webpart to debug in our local instance of the browser. This will not stop the work of any other developer due to enabled debug points as in the server-side object model days.


Debugging is essential to detect and resolve the issues. As SharePoint framework client web parts are developed using JavaScript, they can be easily debugged in the browser. The loadSPFx and debugManifestFile query string parameters can be used to debug the code during development.