We know Visual Studio Code has increasing its popularity to be as a free open source Code Editor. It also supports building SharePoint Framework solutions. We can debug our SharePoint Framework solution in Visual Studio Code; this helps us to walk through and gets rid of errors and fixes (if any). In this article, we’ll understand the per-requisites and configurations of Visual Studio Code to set up debugging SharePoint Framework solutions.

Let’s go through it one by one.

Suggested Topics

What is SharePoint Framework (SPFx)

Future prospects of SharePoint Framework (SPFx)

Required tools and libraries for SharePoint Framework (SPFx) development

Setup Microsoft 365 tenant for SharePoint Framework development

Setup SharePoint Framework client side web part development environment

Build SharePoint client side web part using SharePoint Framework (SPFx) – I

Build SharePoint client side web part using SharePoint Framework (SPFx) – II

Build SharePoint client side web part using SharePoint Framework (SPFx) – III

How to Debug SharePoint Framework Solutions in Visual Studio Code

What is the Developers Point of View on SharePoint Framework

What is Required Toolchain for SharePoint Framework

How to Integrate gulp tasks with SharePoint Framework Toolchain

How to Provision SharePoint assets with solution packages

How to Upgrade SharePoint Framework client side solutions in SharePoint Online

Prerequisites

The easiest way to configure Visual Studio Code for debugging is by using an extension i.e. Debugger for Chrome for Visual Studio Code.

Installation Debugger for Chrome Visual Studio Code extension

1. Launch Visual Studio Code.
2. Open extensions pane to search for it.

 

 

3. Search for Debugger for Chrome, click install and once it is installed, reload Visual Studio Code.

 

 

Configure local workbench for debugging

I shall use local workbench and configure it for debugging SharePoint Framework solutions using Debugger for Chrome. Local workbench is used to verify the functionality of SharePoint Framework projects without using SharePoint and without being online. I shall create debug configuration for local workbench. Below is a list of steps:

1. In Visual Studio Code, open debug pane.

 

 

2. Click Add Configuration…

 

 

3. Select Chrome. This will open launch.json file.

 

 

Now, replace the content in launch.json to the following. This code is required as per Debugger for Chrome extension. It suggests where does source code falls in SharePoint Framework solution. Provided URL is Url of workbench.html , which is made available at run time. It is essential for debugging TypeScript code.

 

{

“version”: “0.2.0”,

“configurations”: [

{

“name”: “Local workbench”,

“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”

]

}

]

}

 

 

Test and Debug SharePoint Framework client side web part using Visual Studio Code

By testing and debugging your client side web part using debugger for Chrome, you can test if it is working as expected.

1. Open your SharePoint Framework client side web part in this Visual Studio Code instance. Remember, if you close your instance of IDE, you will have to update launch.json again.
2. Locate HelloWorldWebPart.ts and add breakpoint inside render method.
3. To start serving SharePoint Framework client-side web part, select Integrated Terminal in View menu.
4. It will open Terminal in Visual Studio Core. Run the following command now.

gulp serve –nobrowser

5. Once it is completed, press F5 to run the application.
6. You will see workbench.html file is opened in Chrome browser. As soon as you add your client side web part on page and refresh it. You will find that debugger comes in render method.

 

Use Hosted Workbench in SharePoint

I have debugged and tested solution in workbench html file which is located local machine. Now, I shall use SharePoint environment for debugging and testing this solution of client side web part.

I’ll used hosted version of SharePoint Workbench which is already available in Office 365 tenancy at https://yourtenant.sharepoint.com/_layouts/workbench.aspx.

I need to create debug configuration for Hosted Workbench so update ./.vscode/launch.json by replacing by below code after modification of <<TENANCYNAME>> in code.

 

{
“version”: “0.2.0”,
“configurations”: [
{
“name”: “Local workbench”,
“type”: “chrome”,
“request”: “launch”,
“url”: “https://localhost:4321/temp/workbench.html&#8221;,
“webRoot”: “${workspaceRoot}”,
“sourceMaps”: true,
“sourceMapPathOverrides”: {
“webpack:///../../../src/*”: “${webRoot}/src/*”,
“webpack:///../../../../src/*”: “${webRoot}/src/*”,
“webpack:///../../../../../src/*”: “${webRoot}/src/*”
},
“runtimeArgs”: [
“–remote-debugging-port=9222”
]
},
{
“name”: “Hosted workbench”,
“type”: “chrome”,
“request”: “launch”,
“url”: “https://<<TENANCYNAME>&gt;.sharepoint.com/_layouts/workbench.aspx”,
“webRoot”: “${workspaceRoot}”,
“sourceMaps”: true,
“sourceMapPathOverrides”: {
“webpack:///../../../src/*”: “${webRoot}/src/*”,
“webpack:///../../../../src/*”: “${webRoot}/src/*”,
“webpack:///../../../../../src/*”: “${webRoot}/src/*”
},
“runtimeArgs”: [
“–remote-debugging-port=9222”
]
}
]
}

 

Further steps are as follows:

1. Ensure that glup server is running. If it is not running run following command in Terminal.

gulp serve –nobrowser

2. Change debug configuration to “Hosted Workbench”
3. Press F5
4. You will see Office 365 login page. Provide your credentials and click for login.
5. You will be redirected to workbench.aspx page as below.

6. Now add Hello World client side web part and press F5.
7. Control will go render method of HelloWorldWebPart.ts.

 

What’s next

I hope you enjoyed this new learning and found that Visual Studio Code is useful for SharePoint Geeks as well. In next set of topics, we’ll see SharePoint Framework as developers’ point of view.

 

Thanks for reading.

Please like, share and subscribe!

Hope you enjoyed reading it.

Please don't forget to Share, Follow and Like to get updated with latest posts.

It gives me motivation to share more knowledge with you.

About Author

Satyendra Mishra

Project Management Professional (PMP) and Microsoft certified, motivated, energetic and accomplished Project Manager / Architect with 15+ years of work experience in Management, Architecture, Analytics, Development and Maintenance. I have been fortunate to be a part of over 25+ .Net / SharePoint projects delivery with various companies across different industry sectors. This has provided me a valuable insight and experience especially in successful implementation of SharePoint based solutions.

My experience in Web application implementation includes technology strategy and road-map definition, business and technical requirements identification, governance, platform architecture, solution design, configuration, development, quality assurance, training, post-production support, team lead and overall project delivery along with project management.

Satyendra Mishra holds a B.Tech. in Computer Science & Engineering and PG Diploma in Advance Computing from Center for Development and Advance Computing, Pune, India. He is also a certified Project Management Professional (PMP).

I love to share Project Management Tips and Tricks by writing Blogs in the Project Management India Community. I have written around 300+ articles in the Project Management, .Net, SharePoint and related client side technologies.