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.
Open the command prompt. Create a directory for SPFx solution.
Navigate to the above-created directory.
Run Yeoman SharePoint Generator to create the solution.
Yeoman generator will present you with the wizard by asking questions about the solution to be created.
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.
In the command prompt, type the below command to open the solution in a code editor of your choice.
Run the SPFx WebPart
- On the command prompt, type “gulp serve”.
- Open SharePoint site.
- Navigate to /_layouts/15/workbench.aspx.
- Add the webpart to the page.
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.
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.
Summary
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.