Viele SharePoint Anwendungen laufen in
Citrix Umgebungen und Kunden-/Firmen-Umgebungen mit Microsoft Internet Explorer
MSIE oder mit Microsoft Edge.
Wenn man reproduzierbare Testentwicklungen
zu SharePoint Lösungen beim Kunden erstellen, entwickeln und debuggen will,
dann sollte man zunächst den Microsoft Edge Debugger für Visual Code
installieren.
Diesen Debugger kann man dann in den Konfigurations-Einstellungen
von Visual Code als Default einstellen um direkt in VSCode den im Fenster
debuggen.
Schritt 1:
Installation des
Debugger for Microsoft Edge
Unter der Marketplace Webseite von Visual
Studio kann man den Debugger herunterladen und installieren auf Windows 10.
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-edge
Debug your Javascript code running in
Microsoft Edge from VS Code and Visual Studio.
A VS Code extension to debug your
Javascript code in the Microsoft Edge browser. This is also used to enable
Javascript debugging inside the Microsoft Edge browser when launched from
ASP.Net Projects in Visual Studio.
Note: This extension currently supports both
Microsoft Edge (Chromium) and Microsoft Edge (EdgeHTML). This extension can
debug any version of Microsoft Edge (Chromium) but only some versions of
Microsoft Edge (EdgeHTML). To see if your Windows version supports debugging
Microsoft Edge (EdgeHTML) via Edge DevTools
supported
features
· Setting breakpoints, including in
source files when source maps are enabled
· Stepping through the code
· The Locals pane
· Debugging eval scripts, script
tags, and scripts that are added dynamically
· Watches
|
Betrifft: React,
SharePoint on Premise, Cloud, Online
Installation Microsoft Debugger für VS Code
Bei der Installation kommt die Meldung:
Für die Installation wird Visual Studio
Code benötigt. Anschliessend wird der Dialog : Visual Studio Code öffnen angezeigt
und man kann die Option: Visual Studio Code öffnen wählen
Danach wird Visual Studio Code geöffnet
und unter Extension wird die Debugger Erweiterung zur Installation angezeigt
Hier muss man nur noch Install anklicken
|
Debugger
for Microsoft Edge
Debug your
Javascript code in the Microsoft Edge browser
|
Microsoft Debugger aktivieren in Visual Studio
Code
Hierzu muss man die Datei launch.json öffnen
Dann auf Add
Configuration klicken
Und anschliessend die Erweiterung Edge:
Launch aktivieren
Dadurch wird der Edge Debugger in die Anwendung
eingebunden und für direktes Debuggen aktiviert
Dadurch wird
ein Code Block in launch.json eingefügt, über welchen dann im Debug-Fenster als
Option gestartet werden kann zum Debuggen.
Die Configuration
stellt nur eine Auswahl an verschiedenen Debug-Fenstern dar.
Eingefügter Code Block in launch.json
|
"configurations": [
{
"type": "edge",
"request": "launch",
"name": "Launch Edge",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
|
Debuggen in Microsoft Edge
Zum Debuggen in Visual Studio Code muss
man dann nur noch auf das Debug-Symbol an der Sidebar klicken, dann bei DEBUG
AND RUN -> die Einstellung: launch Edge auswählen.
Breakpoint in
Visual Studio Code setzen
Dann setzt man einen Breakpoint auf der
Codeseite, welche man debuggen möchte
Debuggen starten
Zu Starten startet man erst mit Terminal->gulp serve den lokalen host als Brücke
Dann wird Edge geöffnet und man muss
zuerst das Webpart auswählen zum Installieren.
Final stehen in der Launch.json nur noch die type:edge Auswahl Punkte . Diese werden auch im VSCode->Debugger
als Auswahl angezeigt.
|
{
/**
* Install Chrome Debugger Extension for Visual Studio Code to debug your components with the
* Chrome browser: https://aka.ms/spfx-debugger-extensions
*/
"version": "0.2.0",
"configurations": [
{
"name": "Local workbench",
"type": "edge",
"request": "launch",
"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",
"url": "https://mySite.sharepoint.com/_layouts/15/workbench.aspx?docId=123",
"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",
"-incognito"
]
}
]
}
|
Visual Studio Code