Microsoft Office-Add-In-Debugger-Erweiterung für Visual Studio Code

  • Artikel

Office-Add-Ins, die unter Windows ausgeführt werden, können die Office-Add-In-Debuggererweiterung in Visual Studio Code verwenden, um Vorgängerversion von Microsoft Edge mit der ursprünglichen WebView-Runtime (EdgeHTML) zu debuggen.

Wichtig

Dieser Artikel gilt nur, wenn Office Add-Ins in der ursprünglichen WebView-Runtime (EdgeHTML) ausführt, wie unter Browser und Webview-Steuerelemente erläutert, die von Office-Add-Ins verwendet werden. Anweisungen zum Debuggen in Visual Studio Code für Microsoft Edge WebView2 (Chromium-basiert) finden Sie unter Microsoft Office-Add-In-Debuggererweiterung für Visual Studio Code.

Tipp

Wenn Sie dies nicht können oder nicht möchten, verwenden Sie die in Visual Studio Code integrierten Tools. oder Sie treten ein Problem auf, das nur auftritt, wenn das Add-In außerhalb von Visual Studio Code ausgeführt wird. Sie können Edge Legacy Runtime (EdgeHTML) debuggen, indem Sie die Edge Legacy-Entwicklertools verwenden, wie unter Debuggen von Add-Ins mit Entwicklertools in Vorgängerversion von Microsoft Edge beschrieben.

Dieser Debugmodus ist dynamisch, sodass Sie Haltepunkte festlegen können, während Code ausgeführt wird. Sie können Änderungen an Ihrem Code sofort sehen, während der Debugger angefügt ist, ohne ihre Debugsitzung zu verlieren. Ihre Codeänderungen bleiben ebenfalls erhalten, sodass Sie die Ergebnisse mehrerer Änderungen an Ihrem Code sehen können. Die folgende Abbildung zeigt diese Erweiterung in Aktion.

Debuggen eines Abschnitts von Excel-Add-Ins durch die Office-Add-In-Debugger-Erweiterung.

Voraussetzungen

Installieren und Verwenden des Debuggers

In diesen Anweisungen wird davon ausgegangen, dass Sie Erfahrung mit der Befehlszeile haben, grundlegendes JavaScript verstehen und ein Office-Add-In-Projekt erstellt haben, bevor Sie den Yeoman-Generator für Office-Add-Ins verwenden. Wenn Sie dies noch nicht getan haben, sollten Sie eines unserer Tutorials besuchen, z. B. dieses Excel Office-Add-In-Tutorial.

  1. Der erste Schritt hängt vom Projekt und seiner Erstellung ab.

    • Wenn Sie ein Projekt erstellen möchten, um mit dem Debuggen in Visual Studio Code zu experimentieren, verwenden Sie den Yeoman-Generator für Office-Add-Ins. Verwenden Sie dazu eine unserer Schnellstartanleitungen, z. B. den Schnellstart des Outlook-Add-Ins.
    • Wenn Sie ein vorhandenes Projekt debuggen möchten, das mit Yo Office erstellt wurde, fahren Sie mit dem nächsten Schritt fort.
    • Wenn Sie ein vorhandenes Projekt debuggen möchten, das nicht mit Yo Office erstellt wurde, führen Sie die Prozedur im Anhang aus, und kehren Sie dann zum nächsten Schritt dieses Verfahrens zurück.

  2. Öffnen Sie VS Code, und öffnen Sie Ihr Projekt darin.

  3. Wählen Sie in VS Code die Tastenkombination STRG+UMSCHALT+X aus, um die Erweiterungsleiste zu öffnen. Suchen Sie nach der Erweiterung "Microsoft Office Add-In Debugger", und installieren Sie sie.

  4. Wählen Sie Ansicht>Ausführung aus, oder drücken Sie STRG+UMSCHALT+D , um zur Debugansicht zu wechseln.

  5. Wählen Sie in den Optionen AUSFÜHREN UND DEBUGGEN die Option Edge Legacy für Ihre Hostanwendung aus, z. B. Outlook Desktop (Edge Legacy). Wählen Sie F5 aus, oder klicken Sie im Menü auf Ausführen>Debuggen starten , um mit dem Debuggen zu beginnen. Diese Aktion startet automatisch einen lokalen Server in einem Knotenfenster, um Ihr Add-In zu hosten, und öffnet dann automatisch die Hostanwendung, z. B. Excel oder Word. Dieser Vorgang kann mehrere Sekunden in Anspruch nehmen.

  6. In der Hostanwendung, z. B. Excel, ist Ihr Add-In nun einsatzbereit. Wählen Sie Taskleiste anzeigen aus, oder führen Sie einen anderen Add-In-Befehl aus. Ein Dialogfeld wird in etwa wie folgt angezeigt:

    WebView Stop On Load. Um die WebView zu debuggen, fügen Sie VS Code mithilfe der Microsoft Debugger for Edge-Erweiterung an die WebView-instance an, und klicken Sie auf OK, um fortzufahren. Um zu verhindern, dass dieses Dialogfeld in Zukunft angezeigt wird, klicken Sie auf Abbrechen.

    Wählen Sie OK aus.

    Hinweis

    Wenn Sie Abbrechen auswählen, wird das Dialogfeld nicht mehr angezeigt, solange diese Instanz des Add-Ins ausgeführt wird. Wenn Sie Ihr Add-In jedoch neu starten, wird das Dialogfeld wieder angezeigt.

  7. Legen Sie einen Haltepunkt in der Aufgabenbereichsdatei Ihres Projekts fest. Um Haltepunkte in Visual Studio Code festzulegen, zeigen Sie mit der Maus neben eine Codezeile, und wählen Sie den roten Kreis aus, der angezeigt wird.

    Der roter Kreis wird in einer Codezeile in Visual Studio Code angezeigt.

  8. Führen Sie die Funktionen in Ihrem Add-In aus, die die Zeilen mit Haltepunkten aufrufen. Sie werden sehen, dass Haltepunkte erreicht wurden, und Sie können lokale Variablen überprüfen.

    Hinweis

    Haltepunkte in Aufrufen von Office.initialize oder Office.onReady werden ignoriert. Ausführliche Informationen zu diesen Methoden finden Sie unter Initialisieren Ihres Office-Add-Ins.

Wichtig

Die beste Möglichkeit, eine Debugsitzung zu beenden, besteht darin, UMSCHALT+F5 auszuwählen oder im Menü Die Option Debuggen ausführen>beenden auszuwählen. Diese Aktion sollte das Knotenserverfenster schließen und versuchen, die Hostanwendung zu schließen. In der Hostanwendung wird jedoch eine Eingabeaufforderung angezeigt, in der Sie gefragt werden, ob das Dokument gespeichert werden soll. Treffen Sie eine geeignete Auswahl, und lassen Sie die Hostanwendung schließen. Vermeiden Sie das manuelle Schließen des Knotenfensters oder der Hostanwendung. Dies kann zu Fehlern führen, insbesondere dann, wenn Sie Debugsitzungen wiederholt beenden und starten.

Wenn das Debuggen nicht mehr funktioniert; z. B. wenn Haltepunkte ignoriert werden; Debuggen beenden. Schließen Sie dann ggf. alle Hostanwendungsfenster und das Knotenfenster. Schließen Sie abschließend Visual Studio Code, und öffnen Sie es erneut.

Anhang

Wenn Ihr Projekt nicht mit Yo Office erstellt wurde, müssen Sie eine Debugkonfiguration für Visual Studio Code erstellen.

  1. Erstellen Sie eine Datei mit dem Namen launch.json im Ordner \.vscode des Projekts, sofern noch keine Datei vorhanden ist.

  2. Stellen Sie sicher, dass die Datei über ein configurations-Array verfügt. Nachfolgend sehen Sie ein einfaches Beispiel für eine launch.json-Datei.

    {
  // Other properties may be here.

  "configurations": [

    // Configuration objects may be here.

  ]

  // Other properties may be here.
}

  3. Fügen Sie dem configurations-Array das folgende Objekt hinzu.

    {
  "name": "HOST Desktop (Edge Legacy)",
  "type": "office-addin",
  "request": "attach",
  "url": "https://localhost:3000/taskpane.html?_host_Info=HOST$Win32$16.01$en-US$$$$0",
  "port": 9222,
  "timeout": 600000,
  "webRoot": "${workspaceRoot}",
  "preLaunchTask": "Debug: HOST Desktop",
  "postDebugTask": "Stop Debug"
}

  4. Ersetzen Sie den Platzhalter HOST an allen drei Stellen durch den Namen der Office-Anwendung, in der das Add-In ausgeführt wird, Outlook z. B. oder Word.

  5. Speichern und schließen Sie die Datei.

Siehe auch