Debug SharePoint Framework Solution in Visual Code

Hi Friends, the very common thing that we miss while coding SharePoint Framework solution is the debugging functionality like we use to did in the C# coding using Visual Studio. But now you can debug you code in the same way you use to do earlier using visual studio code.
https://www.sharepointwidgets.com
Yes, and it is pretty easy and you can have all the functionalities that you use to have.To debug you code just follow the below steps.

Adding Extension for debugging.

The first thing you need to do if the Add the extension in your visual code “Debugger for Chrome”. Using this extension then you can debug your code using the Chrome browser. For now we have only the chrome extension available but we may see more browsers coming up with the options.
SharePointWidgets.blogspot.com
To add the extension click on the Extensions in the menu pane on the left or press Ctrl + Shift + X. Then search for the extension with the name “Debugger for Chrome” and then install it. After the extension is installed there are some configuration that needs to be made.

Configuration for debugging

Since we had two types of workbench i.e.. You can either execute your webpart in the local workbench or you can execute your webpart in the hosted workbench. So we have different configuration for both. But don’t worry this will be one time process only then you’ll be able to do any debugging.
SharePointWidgets.blogspot.com
For configuration click on the Debug in the menu pane on the left or press Ctrl + Shift + D.Now notice in the top you’ll find that there is no configuration present. So just select the ‘Add Configuration’ Option and this will generate the configuration for you. Now delete the configuration that was generated in the launch.json file and replace it with the below configuration.
{
  "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://contoso.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"
          ]
      }
  ]
}


Now save the file and you will notice that now you can see two options in the same dropdown. One is local workbench and another is Hosted workbench.

Debugging SharePoint Framework using Local Workbench

If you want to debug using the local workbench then follow the below steps
  1. Add the breakpoint where you want to debug the code (either in the .ts file or in the .tsx file)
  2. Execute the command gulp serve --nobrowser. This command will compile the code and start the server for the code to run, but will not open browser as we don’t require here.
  3. Press Ctrl + Shift + D and select the Local workbench option in the dropdown
SharePointWidgets.blogspot.com

  1. Now hit F5, a new browser window will get open and now you can add the webpart. Just wedit the webpart and you will notice your debugger breakpoint is of red color indicating the breakpoint is now active.
  2. Debug your code and enjoy :)


Debugging SharePoint Framework using Hosted Workbench

If you need to debug the hosted workbench then follow the below steps:
  1. Open the launch.json file and update your sharepoint tenant url
    SharePointWidgets.blogspot.com
  2. Execute the command gulp serve --nobrowser. This command will compile the code and start the server for the code to run, but will not open browser as we don’t require here.
  3. Press Ctrl + Shift + D and select the Hosted workbench option in the dropdown
SharePointWidgets.blogspot.com

  1. Now hit F5, a new browser window will get open and now you can add the webpart. Just edit the webpart and you will notice your debugger breakpoint is of red color indicating the breakpoint is now active.
  2. Debug your code and enjoy :)


Hope this will help in debugging your issues in the code in a much easier and faster way.
Happy Coding.

-Sumit Kanchan

Comments

Post a Comment

Popular posts from this blog

Rename Folder using Microsoft Flow / Power Automate in a Document Library in SharePoint Online

Image
Hi Friends, Today blog is about renaming the folder in the document library using the MS FLOW or MS Power Automate. When I started working on this it seems to be an easy job, but if you look into the connectors you'll find it really difficult as there is no straight forwards connector to do the job. Issues encountered If you try using the " Get Folder Metadata " connector, you'll not be able to get the ID of the folder as it is returning as the negative value. If you get the ID somehow and try to update the folder name using the " Update File Properties " connector, you'll end up renaming only the title of the folder, but it will still have the old name as the display name which in case is again a failure. There is no other connector which can be utilized to achieve the task of renaming the folder in a document library directly. Solution The solution is a simple three-step (at least in this example). Step 1: Initialize variables In case you are computing
Read more

Power Automate: How to Add "New Line" to the text in SharePoint multiline text field

Image
  Q. How to add "New Line", while adding the text to the SharePoint multiline text field?  A . In order to add the new line while adding a text to the multiline SharePoint field, I will demonstrate the simplest approach. Although you can find multiple approaches, but this one seems to be very easy and quick. You need to append the below expression to the text to make it to the new line: decodeUriComponent('%0A') If you are adding any array, then join the array using this expression or if you are building this string, then append this expression to the string. Step 1:  Add a variable and add the below expression (Write the code under the Expression tab) STEP 2: This is how your variable will look like      STEP 3: Output of the Address columns which is of Type Multiline text field Happy Coding..!! #Microsft #SharePointWidgets #PowerAutomate
Read more

Power Automate: Rename file in SharePoint Online

Image
  We often get to change the name of the file, so in this article, I will explain how to rename the file in SharePoint Online using Microsoft Power Automate. Below is the file which I will be renaming. Step 1: Get the file properties We only need to have the SharePoint item id, for which we want to rename the file Step 2: Update the File Name Add the "Send an HTTP request to SharePoint" connector, and update the following properties Method : POST Uri : _api/web/lists/GetByTitle(' <LIBRARY TITLE> ')/items( <ITEM ID> )/ValidateUpdateListItem Body: {     "formValues" :[         {             "FieldName" : "FileLeafRef" ,             "FieldValue" : "<New File Name>"         }     ] } Execute the flow, and the file will be renamed Happy Automating..!! #PowerAutomate #SharePointWidgets #Microsoft
Read more