Debug SharePoint Framework Solutions in Visual Studio Code

Suggested Articles

 

What is SharePoint Framework (SPFx)

Future prospects of SharePoint Framework (SPFx)

Required tools and libraries for SharePoint Framework (SPFx) development

Setup Office 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

 

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 walkthrough and gets rid of errors and fixes (if any). In this article, we’ll understand the pre-requisites and configurations of Visual Studio Code to set up debugging SharePoint Framework solutions.

Let’s go through it one by one.



 

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.

 

debug-in-vscode-1

 

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

 

debug-in-vscode-2

 



 

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.

 

debug-in-vscode-3

 

  1. Click Add Configuration…

 

debug-in-vscode-4

 



 

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

 

debug-in-vscode-5

debug-in-vscode-6

 

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”

            ]

        }

    ]

}

 

debug-in-vscode-7

 



 

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.debug-in-vscode-8
  3. To start serving SharePoint Framework client-side web part, select Integrated Terminal in View menu.debug-in-vscode-9
  4. It will open Terminal in Visual Studio Core. Run the following command now.

gulp serve –nobrowser

  1. Once it is completed, press F5 to run the application.
  2. 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”,
“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>>.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

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

debug-in-vscode-11

  1. Now add Hello World client side web part and press F5.
  2. 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!

 



 

About Satyendra Mishra

Satyendra is a Technical Project Manager with 12+ years of experience on Project Management, Microsoft Technologies including ASP.NET, ASP.NET MVC, C#, SharePoint (On premises & Office 365), JavaScript Framework (AngularJS) and related technologies. He is a person with belief, sky is limit for a hard working and dedicated individual. That’s why he devoted himself to field of Software Development and now both are growing with each other. Every year for him turned out to be best year and he received enormous support and love from his companies and his clients from around the world. Now with vast knowledge of software development and its outsourcing process, he decided to move himself into knowledge sharing. Keep a fact in your mind about the comfort level of your clients and this will make you king/queen of your area.
View all posts by Satyendra Mishra →

Leave a Reply

Your email address will not be published. Required fields are marked *