Fehler in Google Workspace-Add-ons beheben

Als Entwickler von Google Workspace-Add-ons müssen Sie möglicherweise Code debuggen, um Änderungen zu testen oder komplexe Probleme zu beheben. Das Debuggen von Google Workspace-Add-ons kann je nach Architektur Ihrer Anwendung, dem Funktionsumfang der Anwendung, der Bereitstellung der Anwendung und Ihren Präferenzen auf viele verschiedene Arten erfolgen.

Auf dieser Seite wird erläutert, wie Sie Fehler in einem Google Workspace-Add-on mithilfe von ngrok beheben, einer einheitlichen Plattform für eingehenden Traffic, mit der Sie lokale Entwicklungsumgebungen testen können. In dieser Anleitung testen Sie Codeänderungen in einer lokalen Umgebung und beheben Probleme in einer Remote-Umgebung.

Fehler in der lokalen Entwicklungsumgebung beheben

In diesem Abschnitt interagieren Sie mit dem Google Workspace-Add-on, das in Ihrer lokalen Umgebung ausgeführt wird.

Fehler in der lokalen
Entwicklungsumgebung beheben

Abbildung 1: Fehlerbehebung in einer lokalen Entwicklungsumgebung

Voraussetzungen

Node.js

  • Die neuesten Versionen von node und npm sind in Ihrer lokalen Umgebung installiert.
  • Die neueste Version von nodemon, die in Ihrer lokalen Umgebung installiert ist, wird für die automatische Aktualisierung verwendet:

    npm install -g nodemon
    
  • Ein Google Cloud-Projekt Weitere Informationen finden Sie in den Abschnitten Voraussetzungen und Umgebung einrichten in der Kurzanleitung.

  • Der Code des Google Workspace-Add-ons für die Fehlerbehebung in Ihrer lokalen Umgebung. Zur Veranschaulichung verwenden wir in diesem Leitfaden die Features des Vorschaulinks aus dem Codebeispiel 3p-resources aus dem GitHub-Repository googleworkspace/add-ons-samples.

  • Eine in Ihrer lokalen Umgebung eingerichtete IDE, die debuggen kann. Zur Veranschaulichung verwenden wir in dieser Anleitung die Visual Studio Code IDE und ihre Standardfunktionen zum Debuggen.

  • Ein ngrok-Konto.

  • Die aktuelle Version von gcloud ist in Ihrer lokalen Umgebung installiert und initialisiert.

Python

  • Die aktuelle Version von python3 ist in Ihrer lokalen Umgebung installiert.
  • Die neueste Version von pip und virtualenv, die in Ihrer lokalen Umgebung installiert sind, werden zur Verwaltung von Python-Paketen bzw. virtuellen Umgebungen verwendet.
  • Ein Google Cloud-Projekt Weitere Informationen finden Sie in den Abschnitten Voraussetzungen und Umgebung einrichten in der Kurzanleitung.
  • Der Code des Google Workspace-Add-ons für die Fehlerbehebung in Ihrer lokalen Umgebung. Zur Veranschaulichung verwenden wir in diesem Leitfaden die Features des Vorschaulinks aus dem Codebeispiel 3p-resources aus dem GitHub-Repository googleworkspace/add-ons-samples.
  • Eine in Ihrer lokalen Umgebung eingerichtete IDE, die debuggen kann. Zur Veranschaulichung verwenden wir in dieser Anleitung die Visual Studio Code IDE und ihre Standardfunktionen zum Debuggen.
  • Ein ngrok-Konto.
  • Die aktuelle Version von gcloud ist in Ihrer lokalen Umgebung installiert und initialisiert.

Java

  • Die aktuelle stabile Version von Java SE 11's JDK, das in Ihrer lokalen Umgebung installiert ist.
  • Die neueste Version von Apache Maven, die in Ihrer lokalen Umgebung installiert ist, wird zum Verwalten von Java-Projekten verwendet.
  • Ein Google Cloud-Projekt Weitere Informationen finden Sie in den Abschnitten Voraussetzungen und Umgebung einrichten in der Kurzanleitung.
  • Der Code des Google Workspace-Add-ons für die Fehlerbehebung in Ihrer lokalen Umgebung. Zur Veranschaulichung verwenden wir in diesem Leitfaden die Features des Vorschaulinks aus dem Codebeispiel 3p-resources aus dem GitHub-Repository googleworkspace/add-ons-samples.
  • Eine in Ihrer lokalen Umgebung eingerichtete IDE, die debuggen kann. Zur Veranschaulichung verwenden wir in dieser Anleitung die Visual Studio Code IDE und ihre Standardfunktionen zum Debuggen.
  • Ein ngrok-Konto.
  • Die aktuelle Version von gcloud ist in Ihrer lokalen Umgebung installiert und initialisiert.

localhost-Dienst öffentlich verfügbar machen

Sie müssen Ihre lokale Umgebung mit dem Internet verbinden, damit das Google Workspace-Add-on darauf zugreifen kann. Mit der Anwendung ngrok werden HTTP-Anfragen an eine öffentliche URL an Ihre lokale Umgebung weitergeleitet.

  1. Melden Sie sich in einem Browser in Ihrer lokalen Umgebung in Ihrem ngrok-Konto an.
  2. Installieren Sie die Anwendung und richten Sie authtoken in Ihrer lokalen Umgebung ein.
  3. Erstellen Sie eine statische Domain in Ihrem ngrok-Konto. Diese wird in der Anleitung als NGROK_STATIC_DOMAIN bezeichnet.

Add-on-Bereitstellung erstellen und installieren

  1. Konfigurieren Sie das Google Workspace-Add-on so, dass alle HTTP-Anfragen an Ihre statische Domain gesendet werden. Die Bereitstellungsdatei sollte so aussehen:

    {
      "oauthScopes": [
        "https://www.googleapis.com/auth/workspace.linkpreview",
        "https://www.googleapis.com/auth/workspace.linkcreate"
      ],
      "addOns": {
        "common": {
          "name": "Manage support cases",
          "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png",
          "layoutProperties": {
            "primaryColor": "#dd4b39"
          }
        },
        "docs": {
          "linkPreviewTriggers": [
            {
              "runFunction": "NGROK_STATIC_DOMAIN",
              "patterns": [
                {
                  "hostPattern": "example.com",
                  "pathPrefix": "support/cases"
                },
                {
                  "hostPattern": "*.example.com",
                  "pathPrefix": "cases"
                },
                {
                  "hostPattern": "cases.example.com"
                }
              ],
              "labelText": "Support case",
              "localizedLabelText": {
                "es": "Caso de soporte"
              },
              "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png"
            }
          ],
          "createActionTriggers": [
            {
              "id": "createCase",
              "labelText": "Create support case",
              "localizedLabelText": {
                "es": "Crear caso de soporte"
              },
              "runFunction": "$URL2",
              "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png"
            }
          ]
        }
      }
    }
    

    Ersetzen Sie NGROK_STATIC_DOMAIN durch die statische Domain in Ihrem ngrok-Konto.

  2. Legen Sie das zu verwendende Google Cloud-Projekt fest:

    gcloud config set project PROJECT_ID
    
  3. Rufen Sie neue Nutzeranmeldedaten ab, die Sie als Standardanmeldedaten für Anwendungen verwenden möchten:

    gcloud auth application-default login
    

    Ersetzen Sie PROJECT_ID durch die Projekt-ID des Google Cloud-Projekts der Anwendung.

  4. Erstellen Sie die Bereitstellung:

    gcloud workspace-add-ons deployments create manageSupportCases \
        --deployment-file=DEPLOYMENT_FILE_PATH
    

    Ersetzen Sie DEPLOYMENT_FILE_PATH durch den Pfad Ihrer Bereitstellungsdatei.

  5. Installieren Sie das Deployment:

    gcloud workspace-add-ons deployments install manageSupportCases
    

Das Google Workspace-Add-on sendet alle HTTP-Anfragen an die statische Domain.

Abbildung 2: Das Google Workspace-Add-on sendet alle HTTP-Anfragen an die statische Domain. Der öffentliche Dienst ngrok fungiert als Brücke zwischen dem Google Workspace-Add-on und dem lokal ausgeführten Anwendungscode.

Google Workspace-Add-on testen

Sie können das Google Workspace-Add-on lokal bereitstellen, testen, debuggen und automatisch neu laden.

Node.js

  1. Führen Sie in der Visual Studio Code-IDE, die in Ihrer lokalen Umgebung installiert ist, folgende Schritte aus:

    1. Öffnen Sie den Ordner add-ons-samples/node/3p-resources in einem neuen Fenster.
    2. Konfigurieren Sie die Anwendung für die lokale Ausführung und die Fehlerbehebung beim automatischen Aktualisieren, indem Sie der Datei package.json eine Abhängigkeit und zwei Skripts hinzufügen:

      {
          ...
          "dependencies": {
            ...
            "@google-cloud/functions_framework": "^3.3.0"
          },
          "scripts": {
              ...
              "start": "npx functions-framework --target=createLinkPreview --port=9000",
              "debug-watch": "nodemon --watch ./ --exec npm start"
          }
          ...
      }
      
    3. Installieren Sie die Anwendung aus dem Stammverzeichnis:

      npm install
      
    4. Erstellen und konfigurieren Sie einen Start mit dem Namen Debug Watch, der das Skript debug-watch auslöst. Dazu erstellen Sie die Datei .vscode/launch.json im Stammverzeichnis:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "node",
              "request": "launch",
              "name": "Debug Watch",
              "cwd": "${workspaceRoot}",
              "runtimeExecutable": "npm",
              "runtimeArgs": ["run-script", "debug-watch"]
          }]
      }
      
    5. Fügen Sie einen Haltepunkt hinzu, der die Verarbeitung der HTTP-Anfrage in der Datei index.js pausiert, und mit der Ausführung und Fehlerbehebung beginnen und dabei die zuvor hinzugefügte Debug Watch-Konfiguration verwenden. Die Anwendung wird jetzt ausgeführt und überwacht den Port 9000 auf HTTP-Anfragen.

      Die Anwendung wird ausgeführt und überwacht den Port "9000" auf HTTP-Anfragen.

      Abbildung 3: Die Anwendung wird ausgeführt und überwacht den Port 9000 auf HTTP-Anfragen.

  2. Starten Sie die Anwendung ngrok in Ihrer lokalen Umgebung:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000
    

    Ersetzen Sie NGROK_STATIC_DOMAIN durch die statische Domain in Ihrem ngrok-Konto. Alle Anfragen werden jetzt an Ihre lokale Umgebung und den von der Anwendung verwendeten Port weitergeleitet.

    Das Terminal mit dem Server „ngrok“, der ausgeführt wird und weitergeleitet wird

    Abbildung 4: Das Terminal mit dem ngrok-Server, der ausgeführt wird und weitergeleitet wird.

  3. Die ngrok-Anwendung startet auch eine Weboberfläche auf Ihrem lokalen Host. Sie können alle Aktivitäten überwachen, indem Sie sie in einem Browser öffnen.

    Die von der Anwendung „ngrok“ gehostete Weboberfläche ohne HTTP-Anfragen

    Abbildung 5: Die von der Anwendung ngrok gehostete Weboberfläche zeigt keine HTTP-Anfragen an.

  4. Testen Sie Ihr Google Workspace-Add-on, indem Sie sich eine Vorschau einer Fall-URL in einem neuen Google-Dokument mit einem Tester-Konto anzeigen lassen:

    • Erstellen Sie ein neues Google-Dokument.

      Google-Dokument erstellen

    • Geben Sie den folgenden Link ein und drücken Sie enter:

      https://example.com/support/case/?name=Name1&description=Description1&priority=P1
      
    • Klicken Sie auf den Link.

  5. In der Datei Visual Studio Code in Ihrer lokalen Umgebung können Sie sehen, dass die Ausführung an dem festgelegten Haltepunkt pausiert wird.

    Die Ausführung wird an dem festgelegten Haltepunkt angehalten.

    Abbildung 6: Die Ausführung wird an dem festgelegten Haltepunkt angehalten.

  6. Wenn Sie die Ausführung aus dem Debugger von Visual Studio Code fortsetzen, bevor für die Google Workspace-Add-ons eine Zeitüberschreitung auftritt, zeigt das Google Workspace-Add-on die Linkvorschau im Google-Dokument aus dem Cache an.

  7. Sie können die HTTP-Anfrage- und -Antwortlogs über die Weboberfläche prüfen, die von der Anwendung ngrok in Ihrer lokalen Umgebung gehostet wird.

    Die HTTP-Anfrage der von der Anwendung „ngrok“ gehosteten Weboberfläche

    Abbildung 7: Die HTTP-Anfrage der Weboberfläche, die von der Anwendung ngrok gehostet wird.

  8. Wenn Sie das Anwendungsverhalten ändern möchten, ersetzen Sie Case in der Zeile 51 von index.js durch Case:. Wenn Sie die Datei speichern, lädt nodemon die Anwendung automatisch mit dem aktualisierten Quellcode neu und Visual Studio Code verbleibt im Debug-Modus.

    Die Anwendung wird ausgeführt und überwacht den Port „9000“ mit der geladenen Codeänderung auf HTTP-Anfragen

    Abbildung 8. Die Anwendung wird ausgeführt und überwacht den Port 9000 mit geladener Codeänderung auf HTTP-Anfragen.

  9. Anstatt auf den Link zu klicken und in einem neuen Google-Dokument einige Sekunden zu warten, können Sie diesmal die letzte HTTP-Anfrage auswählen, die auf der Weboberfläche protokolliert wurde, die von der Anwendung ngrok in Ihrer lokalen Umgebung gehostet wird, und dann auf Replay klicken. Wie beim letzten Mal antwortet das Google Workspace-Add-on nicht, da es gerade aktiv debuggt wird.

  10. Wenn Sie die Ausführung aus dem Debugger von Visual Studio Code fortsetzen, können Sie in der von der Anwendung ngrok in Ihrer lokalen Umgebung gehosteten Weboberfläche sehen, dass die Anwendung eine Antwort mit der aktualisierten Version der Vorschaukarte generiert.

Python

  1. Führen Sie in der Visual Studio Code-IDE, die in Ihrer lokalen Umgebung installiert ist, folgende Schritte aus:

    1. Öffnen Sie den Ordner add-ons-samples/python/3p-resources/create_link_preview in einem neuen Fenster.
    2. Erstellen Sie eine neue virtuelle Umgebung für Python env und aktivieren Sie sie:

      virtualenv env
      source env/bin/activate
      
    3. Installieren Sie alle Projektabhängigkeiten mit pip in der virtuellen Umgebung:

      pip install -r requirements.txt
      
    4. Erstellen Sie die Datei .vscode/launch.json im Stammverzeichnis und konfigurieren Sie einen Start mit dem Namen Debug Watch, der die Anwendung aus dem Modul functions-framework an Port 9000 im Debug-Modus in der virtuellen Umgebung env auslöst:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "python",
              "request": "launch",
              "name": "Debug Watch",
              "python": "${workspaceFolder}/env/bin/python3",
              "module": "functions_framework",
              "args": [
                  "--target", "create_link_preview",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      
    5. Fügen Sie einen Haltepunkt hinzu, der die Verarbeitung der HTTP-Anfrage in der Datei main.py pausiert, und mit der Ausführung und Fehlerbehebung beginnen und dabei die zuvor hinzugefügte Debug Watch-Konfiguration verwenden. Die Anwendung wird jetzt ausgeführt und überwacht den Port 9000 auf HTTP-Anfragen.

      Die Anwendung wird ausgeführt und überwacht den Port "9000" auf HTTP-Anfragen.

      Abbildung 3: Die Anwendung wird ausgeführt und überwacht den Port 9000 auf HTTP-Anfragen.

  2. Starten Sie die Anwendung ngrok in Ihrer lokalen Umgebung:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000
    

    Ersetzen Sie NGROK_STATIC_DOMAIN durch die statische Domain in Ihrem ngrok-Konto. Alle Anfragen werden jetzt an Ihre lokale Umgebung und den von der Anwendung verwendeten Port weitergeleitet.

    Das Terminal mit dem Server „ngrok“, der ausgeführt wird und weitergeleitet wird

    Abbildung 4: Das Terminal mit dem ngrok-Server, der ausgeführt wird und weitergeleitet wird.

  3. Die ngrok-Anwendung startet auch eine Weboberfläche auf Ihrem lokalen Host. Sie können alle Aktivitäten überwachen, indem Sie sie in einem Browser öffnen.

    Die von der Anwendung „ngrok“ gehostete Weboberfläche ohne HTTP-Anfragen

    Abbildung 5: Die von der Anwendung ngrok gehostete Weboberfläche zeigt keine HTTP-Anfragen an.

  4. Testen Sie Ihr Google Workspace-Add-on, indem Sie sich eine Vorschau einer Fall-URL in einem neuen Google-Dokument mit einem Tester-Konto anzeigen lassen:

    • Erstellen Sie ein neues Google-Dokument.

      Google-Dokument erstellen

    • Geben Sie den folgenden Link ein und drücken Sie enter:

      https://example.com/support/case/?name=Name1&description=Description1&priority=P1
      
    • Klicken Sie auf den Link.

  5. In der Datei Visual Studio Code in Ihrer lokalen Umgebung können Sie sehen, dass die Ausführung an dem festgelegten Haltepunkt pausiert wird.

    Die Ausführung wird an dem festgelegten Haltepunkt angehalten.

    Abbildung 6: Die Ausführung wird an dem festgelegten Haltepunkt angehalten.

  6. Wenn Sie die Ausführung aus dem Debugger von Visual Studio Code fortsetzen, bevor für die Google Workspace-Add-ons eine Zeitüberschreitung auftritt, zeigt das Google Workspace-Add-on die Linkvorschau im Google-Dokument aus dem Cache an.

  7. Sie können die HTTP-Anfrage- und -Antwortlogs über die Weboberfläche prüfen, die von der Anwendung ngrok in Ihrer lokalen Umgebung gehostet wird.

    Die HTTP-Anfrage der von der Anwendung „ngrok“ gehosteten Weboberfläche

    Abbildung 7: Die HTTP-Anfrage der Weboberfläche, die von der Anwendung ngrok gehostet wird.

  8. Um das Anwendungsverhalten zu ändern, ersetzen Sie Case inline 56 in der Datei main.py durch Case:. Wenn Sie die Datei speichern, lädt Visual Studio Code die Anwendung automatisch mit dem aktualisierten Quellcode neu und verbleibt im Fehlerbehebungsmodus.

    Die Anwendung wird ausgeführt und überwacht den Port „9000“ mit der geladenen Codeänderung auf HTTP-Anfragen

    Abbildung 8. Die Anwendung wird ausgeführt und überwacht den Port 9000 mit geladener Codeänderung auf HTTP-Anfragen.

  9. Anstatt auf den Link zu klicken und in einem neuen Google-Dokument einige Sekunden zu warten, können Sie diesmal die letzte HTTP-Anfrage auswählen, die auf der Weboberfläche protokolliert wurde, die von der Anwendung ngrok in Ihrer lokalen Umgebung gehostet wird, und dann auf Replay klicken. Wie beim letzten Mal antwortet das Google Workspace-Add-on nicht, da es gerade aktiv debuggt wird.

  10. Wenn Sie die Ausführung aus dem Debugger von Visual Studio Code fortsetzen, können Sie in der von der Anwendung ngrok in Ihrer lokalen Umgebung gehosteten Weboberfläche sehen, dass die Anwendung eine Antwort mit der aktualisierten Version der Vorschaukarte generiert.

Java

  1. Führen Sie in der Visual Studio Code-IDE, die in Ihrer lokalen Umgebung installiert ist, folgende Schritte aus:

    1. Öffnen Sie den Ordner add-ons-samples/java/3p-resources in einem neuen Fenster.
    2. Konfigurieren Sie das Maven-Projekt so, dass die Anwendung CreateLinkPreview lokal auf Port 9000 ausgeführt wird. Fügen Sie dazu das Build-Plug-in function-maven-plugin für das Cloud Functions Framework in die Datei pom.xml ein:

      ...
      <plugin>
          <groupId>com.google.cloud.functions</groupId>
          <artifactId>function-maven-plugin</artifactId>
          <version>0.11.0</version>
          <configuration>
              <functionTarget>CreateLinkPreview</functionTarget>
              <port>9000</port>
          </configuration>
      </plugin>
      ...
      
    3. Sie können ihn jetzt lokal im Debug-Modus starten:

      mvnDebug function:run
      Preparing to execute Maven in debug mode
      Listening for transport dt_socket at address: 8000
      
    4. Erstellen Sie die Datei .vscode/launch.json im Stammverzeichnis und konfigurieren Sie einen Start mit dem Namen Remote Debug Watch, der an die zuvor mit Port 8000 gestartete Anwendung angehängt wird:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "java",
              "request": "attach",
              "name": "Remote Debug Watch",
              "projectName": "http-function",
              "hostName": "localhost",
              "port": 8000
          }]
      }
      
    5. Fügen Sie einen Haltepunkt hinzu, der die Verarbeitung der HTTP-Anfrage in der Datei CreateLinkPreview.java pausiert, und beginnen Sie das Anhängen und Debuggen mit der zuvor hinzugefügten Remote Debug Watch-Konfiguration. Die Anwendung wird jetzt ausgeführt und überwacht den Port 9000 auf HTTP-Anfragen.

      Die Anwendung wird ausgeführt und überwacht den Port &quot;9000&quot; auf HTTP-Anfragen.

      Abbildung 3. Die Anwendung wird ausgeführt und überwacht den Port 9000 auf HTTP-Anfragen.

  2. Starten Sie die Anwendung ngrok in Ihrer lokalen Umgebung:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000
    

    Ersetzen Sie NGROK_STATIC_DOMAIN durch die statische Domain in Ihrem ngrok-Konto. Alle Anfragen werden jetzt an Ihre lokale Umgebung und den von der Anwendung verwendeten Port weitergeleitet.

    Das Terminal mit dem Server „ngrok“, der ausgeführt wird und weitergeleitet wird

    Abbildung 4: Das Terminal mit dem ngrok-Server, der ausgeführt wird und weitergeleitet wird.

  3. Die ngrok-Anwendung startet auch eine Weboberfläche auf Ihrem lokalen Host. Sie können alle Aktivitäten überwachen, indem Sie sie in einem Browser öffnen.

    Die von der Anwendung „ngrok“ gehostete Weboberfläche ohne HTTP-Anfragen

    Abbildung 5: Die von der Anwendung ngrok gehostete Weboberfläche zeigt keine HTTP-Anfragen an.

  4. Testen Sie Ihr Google Workspace-Add-on, indem Sie sich eine Vorschau einer Fall-URL in einem neuen Google-Dokument mit einem Tester-Konto anzeigen lassen:

    • Erstellen Sie ein neues Google-Dokument.

      Google-Dokument erstellen

    • Geben Sie den folgenden Link ein und drücken Sie enter:

      https://example.com/support/case/?name=Name1&description=Description1&priority=P1
      
    • Klicken Sie auf den Link.

  5. In der Datei Visual Studio Code in Ihrer lokalen Umgebung können Sie sehen, dass die Ausführung an dem festgelegten Haltepunkt pausiert wird.

    Die Ausführung wird an dem festgelegten Haltepunkt angehalten.

    Abbildung 6: Die Ausführung wird an dem festgelegten Haltepunkt angehalten.

  6. Wenn Sie die Ausführung aus dem Debugger von Visual Studio Code fortsetzen, bevor für die Google Workspace-Add-ons eine Zeitüberschreitung auftritt, zeigt das Google Workspace-Add-on die Linkvorschau im Google-Dokument aus dem Cache an.

  7. Sie können die HTTP-Anfrage- und -Antwortlogs über die Weboberfläche prüfen, die von der Anwendung ngrok in Ihrer lokalen Umgebung gehostet wird.

    Die HTTP-Anfrage der von der Anwendung „ngrok“ gehosteten Weboberfläche

    Abbildung 7: Die HTTP-Anfrage der Weboberfläche, die von der Anwendung ngrok gehostet wird.

  8. Wenn Sie das Anwendungsverhalten ändern möchten, ersetzen Sie Case in der Datei CreateLinkPreview.java durch Case: durch Case:, starten Sie den mvnDebug-Prozess neu und starten Sie Remote Debug Watch neu, um das Debugging wieder anzuhängen und das Debugging neu zu starten.78

  9. Anstatt auf den Link zu klicken und in einem neuen Google-Dokument einige Sekunden zu warten, können Sie diesmal die letzte HTTP-Anfrage auswählen, die auf der Weboberfläche protokolliert wurde, die von der Anwendung ngrok in Ihrer lokalen Umgebung gehostet wird, und dann auf Replay klicken. Wie beim letzten Mal antwortet das Google Workspace-Add-on nicht, da es gerade aktiv debuggt wird.

  10. Wenn Sie die Ausführung aus dem Debugger von Visual Studio Code fortsetzen, können Sie in der von der Anwendung ngrok in Ihrer lokalen Umgebung gehosteten Weboberfläche sehen, dass die Anwendung eine Antwort mit der aktualisierten Version der Vorschaukarte generiert.

Fehler in der Remote-Umgebung beheben

In diesem Abschnitt interagieren Sie mit dem Google Workspace-Add-on, das in einer Remote-Umgebung ausgeführt wird.

Fehler in der Remote-Umgebung beheben

Abbildung 9. Beheben Sie Fehler in der Remote-Umgebung.

Voraussetzungen

  • Ihr Google Workspace-Add-on wurde bereitgestellt und installiert.
  • Ihre Anwendung, die in Ihrer Remote-Umgebung ausgeführt wird und der Debugger an einem bestimmten Port aktiviert ist, wird in der Anleitung in dieser Anleitung als REMOTE_DEBUG_PORT bezeichnet.
  • Ihre lokale Umgebung kann ssh an Ihre Remote-Umgebung senden.
  • Eine in Ihrer lokalen Umgebung eingerichtete IDE, die debuggen kann. In dieser Anleitung verwenden wir zur Veranschaulichung die Visual Studio Code IDE und ihre Standardfunktionen zum Debuggen.

Lokale und Remote-Umgebungen verbinden

Richten Sie in Ihrer lokalen Umgebung, von der aus Sie eine Debug-Clientverbindung initiieren möchten, einen SSH-Tunnel ein:

ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS

Ersetzen Sie Folgendes:

  • LOCAL_DEBUG_PORT: Der Port zur Fehlerbehebung in Ihrer lokalen Umgebung.
  • REMOTE_USERNAME: Nutzername in Ihrer Remote-Umgebung.
  • REMOTE_ADDRESS: Die Adresse Ihrer Remote-Umgebung.
  • REMOTE_DEBUG_PORT: Der Port zur Fehlerbehebung in der Remote-Umgebung.

Der Debug-Port in Ihrer lokalen Umgebung ist jetzt mit dem Debug-Port in Ihrer Remote-Umgebung verknüpft.

Debugging starten

Führen Sie in der Visual Studio Code-IDE, die in Ihrer lokalen Umgebung installiert ist, folgende Schritte aus:

  1. Öffnen Sie den Quellcode Ihrer App in einem neuen Fenster.
  2. Erstellen Sie die Datei .vscode/launch.json im Stammverzeichnis und konfigurieren Sie einen Start mit dem Namen Debug Remote, der an den Debug-Port in Ihrer lokalen Umgebung angehängt wird:

    Node.js

    {
        "version": "0.2.0",
        "configurations": [{
            "type": "node",
            "request": "attach",
            "name": "Debug Remote",
            "address": "127.0.0.1",
            "port": LOCAL_DEBUG_PORT
        }]
    }
    

    Python

    {
        "version": "0.2.0",
        "configurations": [{
            "type": "python",
            "request": "attach",
            "name": "Debug Remote",
            "connect": {
                "host": "127.0.0.1",
                "port": LOCAL_DEBUG_PORT
            }
        }]
    }
    

    Java

    {
        "version": "0.2.0",
        "configurations": [{
            "type": "java",
            "request": "attach",
            "name": "Debug Remote",
            "hostName": "127.0.0.1",
            "port": LOCAL_DEBUG_PORT
        }]
    }
    

    Ersetzen Sie LOCAL_DEBUG_PORT durch den Fehlerbehebungsport in Ihrer lokalen Umgebung.

  3. Fügen Sie im Quellcode Ihrer Anwendung einen Haltepunkt hinzu, der die Verarbeitung der HTTP-Anfrage pausiert, und beginnen Sie mit der Ausführung und Fehlerbehebung mit der zuvor hinzugefügten Debug Remote-Konfiguration.

Interagieren Sie mit dem installierten Google Workspace-Add-on. Ihr Google Workspace-Add-on antwortet nicht, da es in der Visual Studio Code-IDE aktiv gemobbt wird.

Fehlerlogs abfragen