Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Debuggen mit VS Code von SharePoint Online WebParts

25.03.2020 (👁10851)

Einstellungen für VS Code ->SharePoint Webpart Entwicklung, damit mit dem Microsoft Edge Browser direkt  das WebPart in SharePoint Online untersucht werden kann.

launch.json

Einstellungen.vscode\launch.json

Bitte darauf achten, dass beim neuen Microsoft Edge/Chrome Browser die version auf "canary" eingestellt werden muss und der type auf 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

Einstellungen 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

Der gulp server für das Webpart muss mit –nobrowser gestartet werden

gulp serve --nobrowser

Debuggen

Zum Debuggen der Anwendung setzt man in der Datei einen Breakpoint

Dann wechselt man auf die VS Code ->Debug Oberfläche

Dorte startet man mit > Hosted workbench

Debuggen starten mit F5

Im Microsoft Browser muss man auf die workbench und dort das WebPart einmal einbinden

Danach springt der Cursor automatisch auf den Breakpoint.

Auf der linken Seite sieht man auf die Watchlist