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