Freelance Project Requests info@CodeDocu.de Software Development in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

 

 

Settings for VS Code ->SharePoint Web Part Development so that the Microsoft Edge Browser can be used to directly examine the WebPart in SharePoint Online.

 

 

launch.json

Settings.vscode.launch.json

 

Please make sure that the new Microsoft Edge/Chrome browser has to set the version tocanaryand the type to  edge

 

Launch.json Code

{

  "version""0.2.0",

  "configurations": [

      {

      "name""Local workbench",

      "type""edge",

      "request""launch",

      "version""canary",

      "url""https://localhost:4321/temp/workbench.html",

      "webRoot""${workspaceRoot}",

      "sourceMaps"true,

      "sourceMapPathOverrides": {

        "webpack:///.././src/*""${webRoot}/src/*",

        "webpack:///../../../src/*""${webRoot}/src/*",

        "webpack:///../../../../src/*""${webRoot}/src/*",

        "webpack:///../../../../../src/*""${webRoot}/src/*"

      },

      "runtimeArgs": [

        "--remote-debugging-port=9222"

      ]

    },

    {

      "name""Hosted workbench",

      "type""edge",

      "request""launch",

      "version":"canary",

      "url":"https://yoursite.sharepoint.com/_layouts/15/workbench.aspx",

      "webRoot""${workspaceRoot}",

      "port":5432,

      "sourceMaps"true,

      "sourceMapPathOverrides": {

        "webpack:///.././src/*""${webRoot}/src/*",

        "webpack:///../../../src/*""${webRoot}/src/*",

        "webpack:///../../../../src/*""${webRoot}/src/*",

        "webpack:///../../../../../src/*""${webRoot}/src/*"

      },

      "runtimeArgs": [

        "--remote-debugging-port=5432"

      ]

    }

  ]

 

}

 

 

Serve.json

 

Settings in config/serve.json

 

Serve.json

{

  "$schema""https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",

  "port"4321,

  "https"true,

  "initialPage""https://yoursite.sharepoint.com/_layouts/15/workbench.aspx",

  "api": {

    "port"5432,

    "entryPath""node_modules/@microsoft/sp-webpart-workbench/lib/api/"

  }

}

 

 

 

Gulp server

The gulp server for the web part must be started with -nobrowser

 

gulp serve --nobrowser

 

 

 

Debugging

To debug the application, you set a breakpoint in the file

Then switch to the VS Code ->Debug interface

There you start with > Hosted workbench

 

 

Start debugging with F5

In the Microsoft browser you have to integrate the workbench and there the WebPart once

After that, the cursor automatically jumps to the breakpoint.

On the left side you can see on the watchlist

Mobile
»
How to debug a webpart in VS Code with the Microsoft Browser
»
Automatically update SharePoint WebPart from Visual Studio Code
»
Deploy SharePoint WebParts automatically
»
Include SharePoint Lists in MS Access

.

Contact for Jobs, Project Requests: raimund.popp@microsoft-programmierer.de