Many SharePoint applications run in
Citrix environments and customer/corporate environments using Microsoft
Internet Explorer MSIE or Microsoft Edge.
If you want to create, develop and
debug reproducible test developments for SharePoint solutions at the customer's
site, you should first install the Microsoft Edge Debugger for Visual Code.
This debugger can then be set as
default in the configuration settings of Visual Code to debug directly in
VSCode the one in the window.
Step 1:
Installation des Debugger
for Microsoft Edge
You can download and install the
debugger on Windows 10 from the Visual Studio Marketplace website.
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
During installation, themessage comes:
Visual Studio code is required for
installation. Then the dialog : Open Visual Studio Code is displayed and you
can choose the
option: Open
Visual Studio Code
visual studio code opens and under
extension the debugger extension is displayed for installation
Here you just have to click on Install
|
Debugger
for Microsoft Edge
Debug your
Javascript code in the Microsoft Edge browser
|
Microsoft Debugger aktivieren in Visual Studio
Code
To do this you have to open the file launch.json
Then click Add Configuration
And then activate the Edge: Launch
extension
This inits the edge debugger into the
application and enables it for direct debugging
This inserts a block of code into
launch.json, which can then be used to start debugging as an option in the
debug window.
Configuration is just a selection of
different debug windows.
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