Readdy Write

Debuggen mit dem Microsoft Browser in VS Code

17.12.2019 (👁14991)


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




0,00 €