CodeDocu.com

 

 

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

How to debug a webpart in VS Code with the Microsoft Browser

 

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

How to debug a webpart in VS Code with the Microsoft Browser

 

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

 

How to debug a webpart in VS Code with the Microsoft Browser

 

 

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

How to debug a webpart in VS Code with the Microsoft Browser

 

 

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

How to debug a webpart in VS Code with the Microsoft Browser


Software Entwicklung Stuttgart NĂ¼rtingen
Suche Projekte C#, WPF, Windows App,ASP.Net, vb.Net, WinForms, SQL Server, Access, Excel