Freelance Project Requests info@CodeDocu.de Software Development in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

 

 

 

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

Mobile
»
Handle german number strings in English numbers
»
SharePoint CamlQuery Sum
»
Code Sample to Hello World SharePoint WebParts and Lists
»
SharePoint Code: Get ListItem by Code
»
Debugging with the Microsoft Browser in VS Code
»
Debugging von SharePoint in Visual Studio Code
»
Publish Install SharePoint WebPart on Server
»
Enable JS-Link for WebParts in SharePoint

.

Contact for Jobs, Project Requests: raimund.popp@microsoft-programmierer.de