Fehler in Google Chat-Apps beheben

Als Entwickler von Google Chat-Apps müssen Sie möglicherweise Code debuggen, um Änderungen zu testen oder komplexe Probleme zu beheben. Das Debuggen von Chat-Apps kann je nach App-Architektur, Funktionsumfang der App, Bereitstellung der App und Ihren Einstellungen auf viele verschiedene Arten erfolgen.

Auf dieser Seite wird erläutert, wie Sie Fehler in einer HTTP Chat-Anwendung 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 der Chat-Anwendung, die in Ihrer lokalen Umgebung ausgeführt wird.

Fehler in der lokalen
Entwicklungsumgebung beheben

Abbildung 1: Fehlerbehebung in einer lokalen Entwicklungsumgebung

Workshop

Node.js

Python

Java

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
    
  • Eine HTTP Chat-App, die für Nachrichten konfiguriert ist. Weitere Informationen finden Sie in den Abschnitten Voraussetzungen, Umgebung einrichten und Anwendung in Google Chat veröffentlichen in der Kurzanleitung. Die einzigen Unterschiede bestehen darin, dass Sie den App-Namen auf Debug App und die App-URL auf einen beliebigen Wert wie http://example.com festlegen müssen.

  • 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.

  • Git in Ihrer lokalen Umgebung installiert ist.

  • Ein ngrok-Konto.

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.
  • Eine HTTP Chat-App, die für Nachrichten konfiguriert ist. Weitere Informationen finden Sie in den Abschnitten Voraussetzungen, Umgebung einrichten und Anwendung in Google Chat veröffentlichen in der Kurzanleitung. Die einzigen Unterschiede bestehen darin, dass Sie den App-Namen auf Debug App und die App-URL auf einen beliebigen Wert wie http://example.com festlegen müssen.
  • 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.
  • Git in Ihrer lokalen Umgebung installiert ist.
  • 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.
  • Eine HTTP Chat-App, die für Nachrichten konfiguriert ist. Weitere Informationen finden Sie in den Abschnitten Voraussetzungen, Umgebung einrichten und Anwendung in Google Chat veröffentlichen in der Kurzanleitung. Die einzigen Unterschiede bestehen darin, dass Sie den App-Namen auf Debug App und die App-URL auf einen beliebigen Wert wie http://example.com festlegen müssen.
  • 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.
  • Git in Ihrer lokalen Umgebung installiert ist.
  • 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 die Chat-App 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.

Chat-App konfigurieren

Konfigurieren Sie die Chat-Anwendung so, dass alle HTTP-Anfragen an Ihre statische Domain gesendet werden.

  1. Öffnen Sie in der Google Cloud Console die Seite „Google Chat API“:

    Zur Seite „Google Chat API“

  2. Klicken Sie auf den Tab Konfiguration.

  3. Rufen Sie Interaktive Funktionen > Verbindungseinstellungen auf und legen Sie den Wert des Textfelds App-URL auf einen der folgenden Werte fest:

    https://NGROK_STATIC_DOMAIN
    

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

  4. Klicken Sie auf Speichern.

Die Chat-Anwendung sendet alle HTTP-Anfragen an die statische Domain.

Abbildung 2: Die Chat-Anwendung sendet alle ihre HTTP-Anfragen an die statische Domain. Der öffentliche Dienst ngrok fungiert als Brücke zwischen der Chat-App und dem lokal ausgeführten Anwendungscode.

Chat App testen

Sie können die Chat-App lokal bereitstellen, konfigurieren, testen, debuggen und automatisch neu laden.

Node.js

  1. Klonen Sie das googleworkspace/google-chat-samples-Repository aus GitHub in Ihre lokale Umgebung. Es enthält den Code der auszuführenden Anwendung:

    git clone https://github.com/googleworkspace/google-chat-samples.git
    
  2. Führen Sie in der Visual Studio Code-IDE, die in Ihrer lokalen Umgebung installiert ist, folgende Schritte aus:

    1. Öffnen Sie den Ordner google-chat-samples/node/basic-app in einem neuen Fenster.
    2. Konfigurieren Sie die Anwendung für die Fehlerbehebung bei der automatischen Aktualisierung. Fügen Sie dazu der Datei package.json zwei Skripts hinzu:

      {
          ...
          "scripts": {
              ...
              "debug": "node --inspect index.js",
              "debug-watch": "nodemon --watch ./ --exec npm run debug"
          }
          ...
      }
      
    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.

  3. 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.

  4. 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.

  5. Senden Sie eine Direktnachricht, um die Chat-App zu testen:

    • Öffnen Sie Google Chat.

      Zu Google Chat

    • Klicken Sie auf Neuer Chat .

    • Geben Sie im Dialogfeld den Namen Ihrer Chat-App ein.

    • Klicken Sie in den Suchergebnissen bei der Chat-App auf Hinzufügen > Chat.

    • Geben Sie im Direktnachrichtbereich Hello ein und drücken Sie enter. Ihre Chat-App antwortet nicht, da sie aktiv debuggt.

  6. 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.

  7. Wenn Sie die Ausführung aus dem Debugger von Visual Studio Code fortsetzen, bevor Google Chat eine Zeitüberschreitung vornimmt, antwortet Your message : Hello.

  8. 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.

  9. Wenn Sie das Anwendungsverhalten ändern möchten, ersetzen Sie Your message in der Zeile 35 von index.json durch Here was your message. Wenn Sie die Datei speichern, lädt nodemon die Anwendung automatisch mit dem aktualisierten Quellcode neu und Visual Studio Code bleibt 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.

  10. Anstatt eine zweite Nachricht Hello im Gruppenbereich zu senden, können Sie diesmal die letzte HTTP-Anfrage auswählen, die auf der von der Anwendung ngrok in Ihrer lokalen Umgebung gehosteten Weboberfläche protokolliert wurde, und dann auf Replay klicken. Wie beim letzten Mal antwortet die Chat-App nicht, da sie derzeit aktiv debuggt.

  11. 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 Nachricht Here was your message : Hello generiert.

Python

  1. Rufen Sie neue Nutzeranmeldedaten ab, die Sie als Standardanmeldedaten für Anwendungen verwenden möchten:

    gcloud config set project PROJECT_ID
    gcloud auth application-default login
    

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

  2. Klonen Sie das Repository googleworkspace/google-chat-samples aus GitHub in Ihre lokale Umgebung. Es enthält den Anwendungscode:

    git clone https://github.com/googleworkspace/google-chat-samples.git
    
  3. Führen Sie in der Visual Studio Code-IDE, die in Ihrer lokalen Umgebung installiert ist, folgende Schritte aus:

    1. Öffnen Sie den Ordner google-chat-samples/python/avatar-app 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", "hello_chat",
                  "--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.

  4. 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.

  5. 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.

  6. Senden Sie eine Direktnachricht, um die Chat-App zu testen:

    • Öffnen Sie Google Chat.

      Zu Google Chat

    • Klicken Sie auf Neuer Chat .

    • Geben Sie im Dialogfeld den Namen Ihrer Chat-App ein.

    • Klicken Sie in den Suchergebnissen bei der Chat-App auf Hinzufügen > Chat.

    • Geben Sie im Direktnachrichtbereich Hey! ein und drücken Sie enter. Ihre Chat-App antwortet nicht, da sie aktiv debuggt.

  7. 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.

  8. Wenn Sie die Ausführung aus dem Debugger von Visual Studio Code fortsetzen, bevor in Google Chat eine Zeitüberschreitung auftritt, antwortet die Chat-App mit Ihrem Namen und Avatarbild in der Nachricht.

  9. 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.

  10. Um das Anwendungsverhalten zu ändern, ersetzen Sie Hello inline 51 in der Datei main.py durch Hey. 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.

  11. Anstatt eine zweite Nachricht Hey! im Gruppenbereich zu senden, können Sie diesmal die letzte HTTP-Anfrage auswählen, die auf der von der Anwendung ngrok in Ihrer lokalen Umgebung gehosteten Weboberfläche protokolliert wurde, und dann auf Replay klicken. Wie beim letzten Mal antwortet die Chat-App nicht, da sie derzeit aktiv debuggt.

  12. 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 Nachricht generiert.

Java

  1. Rufen Sie neue Nutzeranmeldedaten ab, die Sie als Standardanmeldedaten für Anwendungen verwenden möchten:

    gcloud config set project PROJECT_ID
    gcloud auth application-default login
    

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

  2. Klonen Sie das Repository googleworkspace/google-chat-samples aus GitHub in Ihre lokale Umgebung. Es enthält den Anwendungscode:

    git clone https://github.com/googleworkspace/google-chat-samples.git
    
  3. Führen Sie in der Visual Studio Code-IDE, die in Ihrer lokalen Umgebung installiert ist, folgende Schritte aus:

    1. Öffnen Sie den Ordner google-chat-samples/java/avatar-app in einem neuen Fenster.
    2. Konfigurieren Sie das Maven-Projekt so, dass die Anwendung HelloChat lokal auf Port 9000 ausgeführt wird. Fügen Sie dazu das Cloud Functions Framework-Build-Plug-in function-maven-plugin 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>HelloChat</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 HelloChat.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.

  4. 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.

  5. 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.

  6. Senden Sie eine Direktnachricht, um die Chat-App zu testen:

    • Öffnen Sie Google Chat.

      Zu Google Chat

    • Klicken Sie auf Neuer Chat .

    • Geben Sie im Dialogfeld den Namen Ihrer Chat-App ein.

    • Klicken Sie in den Suchergebnissen bei der Chat-App auf Hinzufügen > Chat.

    • Geben Sie im Direktnachrichtbereich Hey! ein und drücken Sie enter. Ihre Chat-App antwortet nicht, da sie aktiv debuggt.

  7. 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.

  8. Wenn Sie die Ausführung aus dem Debugger von Visual Studio Code fortsetzen, bevor in Google Chat eine Zeitüberschreitung auftritt, antwortet die Chat-App mit Ihrem Namen und Avatarbild in der Nachricht.

  9. 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.

  10. Wenn Sie das Anwendungsverhalten ändern möchten, ersetzen Sie Hello in der Datei HelloChat.java durch Hey durch Hey, starten Sie den mvnDebug-Prozess neu und starten Sie Remote Debug Watch neu, um das Debugging noch einmal anzuhängen und das Debugging neu zu starten.55

  11. Anstatt eine zweite Nachricht Hey! im Gruppenbereich zu senden, können Sie diesmal die letzte HTTP-Anfrage auswählen, die auf der von der Anwendung ngrok in Ihrer lokalen Umgebung gehosteten Weboberfläche protokolliert wurde, und dann auf Replay klicken. Wie beim letzten Mal antwortet die Chat-App nicht, da sie derzeit aktiv debuggt.

  12. 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 Nachricht generiert.

Fehler in der Remote-Umgebung beheben

In diesem Abschnitt interagieren Sie mit der Chat-Anwendung, die in einer Remote-Umgebung ausgeführt wird.

Fehler in der Remote-Umgebung beheben

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

Voraussetzungen

  • Einen Gruppenbereich für Direktnachrichten in Ihre Chat-App. Folgen Sie dem Abschnitt Chat-App testen in der Kurzanleitung und suchen Sie nach Ihrer Chat-App, um einen Gruppenbereich zu erstellen.
  • 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.

Geben Sie im Direktnachrichtenbereich mit der Chat-App einen Text ein, den Sie testen möchten, und drücken Sie enter. Ihre Chat-App antwortet nicht, da sie in der Visual Studio Code-IDE aktiv gemobbt wird.