Tester et déboguer les modules complémentaires HTTP Google Workspace

En tant que développeur de modules complémentaires Google Workspace, vous devrez peut-être déboguer du code pour tester les modifications ou résoudre des problèmes complexes. Déboguer les modules complémentaires Google Workspace peut s'effectuer de différentes manières en fonction de l'architecture de votre application, l'application, la façon dont elle est déployée et vos préférences.

Cette page explique comment déboguer un module complémentaire HTTP Google Workspace à l'aide de ngrok, une plate-forme d'entrée unifiée que vous pouvez utiliser pour tester des environnements de développement Google Cloud. Dans ce guide, vous allez tester les modifications de code dans un environnement et résoudre les problèmes dans un environnement distant.

Déboguer à partir de l'environnement de développement local

Dans cette section, vous interagissez avec votre module complémentaire Google Workspace s'exécute dans votre environnement local.

Figure 1. Procédez au débogage dans un environnement de développement local.

Prérequis

Node.js

• Dernières versions de node et npm installé dans votre environnement local.

• Dernière version de nodemon installée sur votre ordinateur est utilisé pour l'actualisation automatique:

  npm install -g nodemon
  

• Un projet Google Cloud. Vous pouvez suivre les sections Conditions préalables, et configurez le environnement du Guide de démarrage rapide guide.

• Code du module complémentaire Google Workspace à déboguer dans votre environnement environnement. Nous utilisons les fonctionnalités du lien d'aperçu de l'exemple de code. 3p-resources du dépôt GitHub googleworkspace/add-ons-samples de ce guide à titre d'illustration.

• Un IDE configuré dans votre environnement local et capable de déboguer Nous utilisons les Visual Studio Code IDE et son IDE par défaut fonctionnalités de débogage ce guide à titre d'illustration.

• Un compte ngrok

• Dernière version de gcloud installée et initialisées dans votre environnement local.

Python

• Dernière version de python3 installée dans votre environnement local.
• La dernière version de pip et virtualenv installé dans votre dans l'environnement local, ils permettent de gérer les packages Python et les respectivement.
• Un projet Google Cloud. Vous pouvez suivre les sections Conditions préalables, et configurez le environnement du Guide de démarrage rapide guide.
• Code du module complémentaire Google Workspace à déboguer dans votre environnement environnement. Nous utilisons les fonctionnalités du lien d'aperçu de l'exemple de code. 3p-resources du dépôt GitHub googleworkspace/add-ons-samples de ce guide à titre d'illustration.
• Un IDE configuré dans votre environnement local et capable de déboguer Nous utilisons les Visual Studio Code IDE et son IDE par défaut fonctionnalités de débogage ce guide à titre d'illustration.
• Un compte ngrok
• Dernière version de gcloud installée et initialisées dans votre environnement local.

Java

• La dernière version stable de Java SE 11's JDK installée sur votre environnement.
• Dernière version de Apache Maven installée dans votre environnement local ; il est utilisé pour gérer les projets Java.
• Un projet Google Cloud. Vous pouvez suivre les sections Conditions préalables, et configurez le environnement du Guide de démarrage rapide guide.
• Code du module complémentaire Google Workspace à déboguer dans votre environnement environnement. Nous utilisons les fonctionnalités du lien d'aperçu de l'exemple de code. 3p-resources du dépôt GitHub googleworkspace/add-ons-samples de ce guide à titre d'illustration.
• Un IDE configuré dans votre environnement local et capable de déboguer Nous utilisons les Visual Studio Code IDE et son IDE par défaut fonctionnalités de débogage ce guide à titre d'illustration.
• Un compte ngrok
• Dernière version de gcloud installée et initialisées dans votre environnement local.

Rendre le service localhost disponible publiquement

Vous devez connecter votre environnement local à Internet pour que le module complémentaire Google Workspace peut y accéder. L'application ngrok est utilisée pour rediriger les requêtes HTTP effectuées vers une URL publique vers votre environnement local.

1. Dans un navigateur de votre environnement local, connectez-vous à votre compte ngrok.
2. Installez l'application et configurez votre authtoken dans votre environnement cloud.
3. Créez un domaine statique dans votre ngrok, il est référencé sous la forme NGROK_STATIC_DOMAIN dans les instructions de ce guide.

Créer et installer le déploiement du module complémentaire

1. Configurez le module complémentaire Google Workspace pour qu'il envoie toutes ses requêtes HTTP au votre domaine statique. Votre fichier de déploiement doit se présenter comme suit:

   {
     "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"
           }
         ]
       }
     }
   }
   

   Remplacez NGROK_STATIC_DOMAIN par le domaine statique de votre Compte ngrok.

2. Définissez le projet Google Cloud à utiliser:

   gcloud config set project PROJECT_ID
   

3. Procurez-vous de nouveaux identifiants utilisateur à utiliser pour les paramètres par défaut de l'application Identifiants:

   gcloud auth application-default login
   

   Remplacez PROJECT_ID par le ID du projet pour le projet Google Cloud de l'application.

4. Créez le déploiement :

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

   Remplacez DEPLOYMENT_FILE_PATH par le chemin d'accès de votre fichier de déploiement.

5. Installez le déploiement:

   gcloud workspace-add-ons deployments install manageSupportCases
   

Figure 2. Le module complémentaire Google Workspace envoie toutes ses requêtes HTTP au domaine statique. Le service public ngrok sert de passerelle entre les le module complémentaire Google Workspace et le code de l'application qui s'exécute localement.

Tester le module complémentaire Google Workspace

Vous pouvez déployer, tester, déboguer et recharger automatiquement votre du module complémentaire Google Workspace.

Remarque :Le module complémentaire Google Workspace s'exécute avec les fonctions Cloud Functions Framework exemples.

Node.js

1. Depuis l'IDE Visual Studio Code installé dans votre environnement local, effectuer les opérations suivantes:

   1. Ouvrez le dossier dans une nouvelle fenêtre. add-ons-samples/node/3p-resources

   2. Configurer l'application pour l'exécution locale et l'actualisation automatique du débogage en en ajoutant une dépendance et deux scripts dans le fichier package.json:

      {
          ...
          "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. À partir du répertoire racine, installez l'application:

      npm install
      

   4. Créez et configurez un lancement nommé Debug Watch qui déclenche l'événement script debug-watch en créant le fichier .vscode/launch.json dans le répertoire racine:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "node",
              "request": "launch",
              "name": "Debug Watch",
              "cwd": "${workspaceRoot}",
              "runtimeExecutable": "npm",
              "runtimeArgs": ["run-script", "debug-watch"]
          }]
      }
      

   5. Ajoutez un point d'arrêt qui suspend le traitement de la requête HTTP dans le index.js, puis lancez l'exécution et le débogage avec Configuration Debug Watch ajoutée précédemment. L'application est maintenant en cours d'exécution et à l'écoute des requêtes HTTP sur le port 9000.

      

      Figure 3. L'application est en cours d'exécution et écoute le trafic HTTP requêtes sur le port 9000.

2. Lancez l'application ngrok dans votre environnement local:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   Remplacez NGROK_STATIC_DOMAIN par le domaine statique dans votre compte ngrok. Toutes les requêtes sont désormais redirigées vers votre et le port utilisé par l'application.

   

   Figure 4. Le terminal avec le serveur ngrok en cours d'exécution et en cours de redirection.

3. Une interface Web est également démarrée sur votre localhost par ngrok vous pouvez surveiller toutes les activités en l'ouvrant dans un navigateur.

   

   Figure 5. Interface Web hébergée par l'application ngrok n'affichant aucune requête HTTP.

4. Testez votre module complémentaire Google Workspace en prévisualisant une URL de demande dans un nouveau Document Google Docs avec un compte de testeur:

   • Créez un document Google Docs.

     Créer un document Google Docs

   • Saisissez le lien suivant, puis appuyez sur enter:

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • Cliquez sur le lien.

5. Dans le fichier Visual Studio Code de votre environnement local, vous pouvez voir que l'exécution est mise en pause au point d'arrêt défini.

   

   Figure 6. L'exécution est suspendue au point d'arrêt défini.

6. Lorsque vous reprenez l'exécution à partir du débogueur de Visual Studio Code avant que les modules complémentaires Google Workspace n'expirent affiche l'aperçu du lien dans le document Google Docs à partir du cache.

7. Vous pouvez consulter les journaux de requêtes et de réponses HTTP depuis l'interface Web hébergé par l'application ngrok dans votre environnement local.

   

   Figure 7. Requête HTTP provenant de l'interface Web hébergée par le Application ngrok.

8. Pour modifier le comportement de l'application, remplacez Case par Case: intégré 51 sur index.js. Lorsque vous enregistrez le fichier, nodemon automatiquement actualise l'application avec le code source mis à jour Visual Studio Code reste en mode débogage.

   

   Figure 8. L'application est en cours d'exécution et écoute les requêtes HTTP. sur le port 9000 avec la modification de code chargée.

9. Cette fois, au lieu de cliquer sur le lien et d'attendre quelques secondes un nouveau document Google Docs, vous pouvez sélectionner la dernière requête HTTP enregistrée interface hébergée par l'application ngrok dans votre environnement local et cliquez sur Replay. Comme la dernière fois, votre module complémentaire Google Workspace ne répond pas, car il est en cours de débogage.

10. Lorsque vous reprenez l'exécution à partir du débogueur de Visual Studio Code vous pouvez voir dans l'interface Web hébergée par l'application ngrok l'environnement local avec lequel l'application génère une réponse la version mise à jour de la fiche d'aperçu.

Python

1. Depuis l'IDE Visual Studio Code installé dans votre environnement local, effectuer les opérations suivantes:

   1. Ouvrez le dossier dans une nouvelle fenêtre. add-ons-samples/python/3p-resources/create_link_preview

   2. Créez un environnement virtuel pour Python env et activez-le:

      virtualenv env
      source env/bin/activate
      

   3. Installez toutes les dépendances du projet à l'aide de pip dans le environnement:

      pip install -r requirements.txt
      

   4. Créez le fichier .vscode/launch.json dans le répertoire racine. configurer un lancement nommé Debug Watch qui déclenche l'application à partir du module functions-framework sur le port 9000 en mode débogage sur l'environnement virtuel env:

      {
          "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. Ajoutez un point d'arrêt qui suspend le traitement de la requête HTTP dans le main.py, puis lancez l'exécution et le débogage avec Configuration Debug Watch ajoutée précédemment. L'application est maintenant en cours d'exécution et à l'écoute des requêtes HTTP sur le port 9000.

      

      Figure 3. L'application est en cours d'exécution et écoute le trafic HTTP requêtes sur le port 9000.

2. Lancez l'application ngrok dans votre environnement local:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   Remplacez NGROK_STATIC_DOMAIN par le domaine statique dans votre compte ngrok. Toutes les requêtes sont désormais redirigées vers votre et le port utilisé par l'application.

   

   Figure 4. Le terminal avec le serveur ngrok en cours d'exécution et en cours de redirection.

3. Une interface Web est également démarrée sur votre localhost par ngrok vous pouvez surveiller toutes les activités en l'ouvrant dans un navigateur.

   

   Figure 5. Interface Web hébergée par l'application ngrok n'affichant aucune requête HTTP.

4. Testez votre module complémentaire Google Workspace en prévisualisant une URL de demande dans un nouveau Document Google Docs avec un compte de testeur:

   • Créez un document Google Docs.

     Créer un document Google Docs

   • Saisissez le lien suivant, puis appuyez sur enter:

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • Cliquez sur le lien.

5. Dans le fichier Visual Studio Code de votre environnement local, vous pouvez voir que l'exécution est mise en pause au point d'arrêt défini.

   

   Figure 6. L'exécution est suspendue au point d'arrêt défini.

6. Lorsque vous reprenez l'exécution à partir du débogueur de Visual Studio Code avant que les modules complémentaires Google Workspace n'expirent affiche l'aperçu du lien dans le document Google Docs à partir du cache.

7. Vous pouvez consulter les journaux de requêtes et de réponses HTTP depuis l'interface Web hébergé par l'application ngrok dans votre environnement local.

   

   Figure 7. Requête HTTP provenant de l'interface Web hébergée par le Application ngrok.

8. Pour modifier le comportement de l'application, remplacez Case par Case: intégré 56 du fichier main.py. Lorsque vous enregistrez le fichier, Visual Studio Code actualise automatiquement l'application avec le code source mis à jour reste en mode débogage.

   

   Figure 8. L'application est en cours d'exécution et écoute les requêtes HTTP. sur le port 9000 avec la modification de code chargée.

9. Cette fois, au lieu de cliquer sur le lien et d'attendre quelques secondes un nouveau document Google Docs, vous pouvez sélectionner la dernière requête HTTP enregistrée interface hébergée par l'application ngrok dans votre environnement local et cliquez sur Replay. Comme la dernière fois, votre module complémentaire Google Workspace ne répond pas, car il est en cours de débogage.

10. Lorsque vous reprenez l'exécution à partir du débogueur de Visual Studio Code vous pouvez voir dans l'interface Web hébergée par l'application ngrok l'environnement local avec lequel l'application génère une réponse la version mise à jour de la fiche d'aperçu.

Java

1. Depuis l'IDE Visual Studio Code installé dans votre environnement local, effectuer les opérations suivantes:

   1. Ouvrez le dossier dans une nouvelle fenêtre. add-ons-samples/java/3p-resources

   2. Configurer le projet Maven pour exécuter l'application CreateLinkPreview sur le port 9000 localement en ajoutant le Cloud Plug-in de compilation function-maven-plugin du framework des fonctions Fichier pom.xml:

      ...
      <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. Vous pouvez maintenant le lancer localement en mode débogage:

      mvnDebug function:run
      Preparing to execute Maven in debug mode
      Listening for transport dt_socket at address: 8000
      

   4. Créez le fichier .vscode/launch.json dans le répertoire racine. configurez un lancement nommé Remote Debug Watch qui s'associe application précédemment lancée avec le port 8000:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "java",
              "request": "attach",
              "name": "Remote Debug Watch",
              "projectName": "http-function",
              "hostName": "localhost",
              "port": 8000
          }]
      }
      

   5. Ajoutez un point d'arrêt qui suspend le traitement de la requête HTTP dans le CreateLinkPreview.java, puis commencez à joindre et le débogage avec Configuration Remote Debug Watch ajoutée précédemment. L'application est en cours d'exécution et à l'écoute des requêtes HTTP sur le port 9000.

      

      Figure 3 : L'application est en cours d'exécution et écoute le protocole HTTP. sur le port 9000.

2. Lancez l'application ngrok dans votre environnement local:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   Remplacez NGROK_STATIC_DOMAIN par le domaine statique dans votre compte ngrok. Toutes les requêtes sont désormais redirigées vers votre et le port utilisé par l'application.

   

   Figure 4. Le terminal avec le serveur ngrok en cours d'exécution et en cours de redirection.

3. Une interface Web est également démarrée sur votre localhost par ngrok vous pouvez surveiller toutes les activités en l'ouvrant dans un navigateur.

   

   Figure 5. Interface Web hébergée par l'application ngrok n'affichant aucune requête HTTP.

4. Testez votre module complémentaire Google Workspace en prévisualisant une URL de demande dans un nouveau Document Google Docs avec un compte de testeur:

   • Créez un document Google Docs.

     Créer un document Google Docs

   • Saisissez le lien suivant, puis appuyez sur enter:

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • Cliquez sur le lien.

5. Dans le fichier Visual Studio Code de votre environnement local, vous pouvez voir que l'exécution est mise en pause au point d'arrêt défini.

   

   Figure 6. L'exécution est suspendue au point d'arrêt défini.

6. Lorsque vous reprenez l'exécution à partir du débogueur de Visual Studio Code avant que les modules complémentaires Google Workspace n'expirent affiche l'aperçu du lien dans le document Google Docs à partir du cache.

7. Vous pouvez consulter les journaux de requêtes et de réponses HTTP depuis l'interface Web hébergé par l'application ngrok dans votre environnement local.

   

   Figure 7. Requête HTTP provenant de l'interface Web hébergée par le Application ngrok.

8. Pour modifier le comportement de l'application, remplacez Case par Case: intégré 78 du fichier CreateLinkPreview.java, redémarrez mvnDebug et relancer Remote Debug Watch pour le réassocier et le redémarrer le débogage.

9. Cette fois, au lieu de cliquer sur le lien et d'attendre quelques secondes un nouveau document Google Docs, vous pouvez sélectionner la dernière requête HTTP enregistrée interface hébergée par l'application ngrok dans votre environnement local et cliquez sur Replay. Comme la dernière fois, votre module complémentaire Google Workspace ne répond pas, car il est en cours de débogage.

10. Lorsque vous reprenez l'exécution à partir du débogueur de Visual Studio Code vous pouvez voir dans l'interface Web hébergée par l'application ngrok l'environnement local avec lequel l'application génère une réponse la version mise à jour de la fiche d'aperçu.

Déboguer depuis l'environnement distant

Dans cette section, vous interagissez avec votre module complémentaire Google Workspace s'exécute dans un environnement distant.

Figure 9. Effectuez le débogage depuis l'environnement distant.

Prérequis

• Votre module complémentaire Google Workspace déployé et installé.
• Votre application s'exécutant dans votre environnement distant avec le débogueur activé sur un port donné, il est référencé REMOTE_DEBUG_PORT dans les instructions de ce guide.
• Votre environnement local peut ssh vers votre environnement distant.
• Un IDE configuré dans votre environnement local et capable de déboguer Nous utilisons les Visual Studio Code IDE et son IDE par défaut les fonctionnalités de débogage à des fins d'illustration.

Connectez vos environnements local et distant

Dans votre environnement local à partir duquel vous souhaitez lancer un client de débogage configurez un tunnel SSH:

ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS

Remplacez les éléments suivants :

• LOCAL_DEBUG_PORT: port de débogage de votre environnement environnement.
• REMOTE_USERNAME: nom d'utilisateur dans votre environnement distant.
• REMOTE_ADDRESS: adresse de votre environnement distant.
• REMOTE_DEBUG_PORT: port de débogage de votre télécommande environnement.

Le port de débogage de votre environnement local est désormais lié au port de débogage de votre un environnement distant.

Démarrer le débogage

À partir de l'IDE Visual Studio Code installé dans votre environnement local, effectuez la suivantes:

1. Dans une nouvelle fenêtre, ouvrez le code source de votre application.

2. Créez le fichier .vscode/launch.json dans le répertoire racine et configurez un lancement nommé Debug Remote qui s'associe au port de débogage dans votre environnement environnement:

   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
       }]
   }
   

   Remplacez LOCAL_DEBUG_PORT par le port de débogage dans votre environnement local.

3. Ajoutez un point d'arrêt dans le code source de votre application qui suspend la requête HTTP traitement, puis lancez l'exécution débogage avec la configuration Debug Remote ajoutée précédemment.

Interagissez avec le module complémentaire Google Workspace installé. Votre Le module complémentaire Google Workspace ne répond pas, car il est en cours d'exécution débogué dans l'IDE Visual Studio Code.

Articles associés

Découvrez comment interroger les journaux d'erreurs.