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
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
