En tant que développeur d'applications Google Chat, vous devrez peut-être déboguer du code pour tester les modifications ou résoudre des problèmes complexes. Le débogage des applications Chat peut être effectué de différentes manières en fonction de l'architecture de votre application, de sa fonction, de son déploiement et de vos préférences.
Cette page explique comment déboguer une application de chat HTTP à l'aide de ngrok, une plate-forme d'entrée unifiée que vous pouvez utiliser pour tester les environnements de développement locaux. Dans ce guide, vous allez tester les modifications de code dans un environnement local 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 application Chat qui s'exécute dans votre environnement local.
Figure 1. Procédez au débogage dans un environnement de développement local.
Atelier
Node.js
Python
Java
Conditions préalables
Node.js
- Dernières versions de
node
et denpm
installées dans votre environnement local. Dernière version de
nodemon
installée dans votre environnement local. Elle est utilisée pour le rechargement automatique:npm install -g nodemon
Une application de chat HTTP configurée pour la messagerie. Vous pouvez suivre les sections Conditions préalables, Configurer l'environnement et Publier l'application sur Google Chat du guide de démarrage rapide. Les seules différences sont les suivantes : vous devez définir le nom de l'application sur
Debug App
et l'URL de l'application surhttp://example.com
, par exemple.Un IDE configuré dans votre environnement local et capable de déboguer Nous utilisons l'IDE
Visual Studio Code
et ses fonctionnalités de débogage par défaut dans ce guide à titre d'illustration.Git
installé dans votre environnement local.Un compte
ngrok
Python
- Dernière version de
python3
installée dans votre environnement local. - La dernière version de
pip
et devirtualenv
installée dans votre environnement local permet, respectivement, de gérer les packages Python et les environnements virtuels. - Une application de chat HTTP configurée pour la messagerie. Vous pouvez suivre les sections Conditions préalables, Configurer l'environnement et Publier l'application sur Google Chat du guide de démarrage rapide. Les seules différences sont les suivantes : vous devez définir le nom de l'application sur
Debug App
et l'URL de l'application surhttp://example.com
, par exemple. - Un IDE configuré dans votre environnement local et capable de déboguer Nous utilisons l'IDE
Visual Studio Code
et ses fonctionnalités de débogage par défaut dans ce guide à titre d'illustration. Git
installé dans votre environnement local.- Un compte
ngrok
- Dernière version de
gcloud
installée et initiale dans votre environnement local.
Java
- La dernière version stable de
Java SE 11's JDK
installée dans votre environnement local. - La dernière version de
Apache Maven
installée dans votre environnement local. Elle permet de gérer les projets Java. - Une application de chat HTTP configurée pour la messagerie. Vous pouvez suivre les sections Conditions préalables, Configurer l'environnement et Publier l'application sur Google Chat du guide de démarrage rapide. Les seules différences sont les suivantes : vous devez définir le nom de l'application sur
Debug App
et l'URL de l'application surhttp://example.com
, par exemple. - Un IDE configuré dans votre environnement local et capable de déboguer Nous utilisons l'IDE
Visual Studio Code
et ses fonctionnalités de débogage par défaut dans ce guide à titre d'illustration. Git
installé dans votre environnement local.- Un compte
ngrok
- Dernière version de
gcloud
installée et initiale dans votre environnement local.
Rendre le service localhost disponible publiquement
Vous devez connecter votre environnement local à Internet pour que l'application Chat puisse y accéder. L'application ngrok
permet de rediriger les requêtes HTTP adressées à une URL publique vers votre environnement local.
- Dans un navigateur de votre environnement local, connectez-vous à votre compte
ngrok
. - Installez l'application et configurez votre
authtoken
dans votre environnement local. - Créez un domaine statique dans votre compte
ngrok
. Dans les instructions de ce guide, il est référencé sous le nomNGROK_STATIC_DOMAIN
.
Configurer l'application Chat
Configurez l'application Chat pour qu'elle envoie toutes ses requêtes HTTP à votre domaine statique.
Dans la console Google Cloud, ouvrez la page de l'API Google Chat:
Cliquez sur l'onglet Configuration.
Accédez à Fonctionnalités interactives > Paramètres de connexion, puis définissez la valeur du champ de texte URL de l'application sur:
https://NGROK_STATIC_DOMAIN
Remplacez
NGROK_STATIC_DOMAIN
par le domaine statique de votre comptengrok
.Cliquez sur Enregistrer.
Figure 2. L'application Chat envoie toutes ses requêtes HTTP au domaine statique. Le service public ngrok
sert de pont entre l'application Chat et le code de l'application qui s'exécute localement.
Tester l'application Chat
Vous pouvez déployer, configurer, tester, déboguer et actualiser automatiquement votre application Chat en local.
Node.js
Clonez le dépôt
googleworkspace/google-chat-samples
depuis GitHub vers votre environnement local. Il contient le code de l'application à exécuter:git clone https://github.com/googleworkspace/google-chat-samples.git
À partir de l'IDE
Visual Studio Code
installé dans votre environnement local, procédez comme suit:- Dans une nouvelle fenêtre, ouvrez le dossier
google-chat-samples/node/basic-app
. Configurez l'application pour le débogage par recharge automatique en ajoutant deux scripts au fichier
package.json
:{ ... "scripts": { ... "debug": "node --inspect index.js", "debug-watch": "nodemon --watch ./ --exec npm run debug" } ... }
À partir du répertoire racine, installez l'application:
npm install
Créez et configurez un lancement nommé
Debug Watch
qui déclenche le scriptdebug-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"] }] }
Ajoutez un point d'arrêt qui suspend le traitement de la requête HTTP dans le fichier
index.js
, puis démarrez l'exécution et le débogage avec la configurationDebug Watch
déjà ajoutée. L'application est maintenant en cours d'exécution et écoute les requêtes HTTP sur le port9000
.Figure 3. L'application est en cours d'exécution et écoute les requêtes HTTP sur le port
9000
.
- Dans une nouvelle fenêtre, ouvrez le dossier
Lancez l'application
ngrok
dans votre environnement local:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
Remplacez
NGROK_STATIC_DOMAIN
par le domaine statique de votre comptengrok
. Toutes les requêtes sont maintenant redirigées vers votre environnement local 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.Une interface Web est également démarrée sur votre hôte local par l'application
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
qui n'affiche aucune requête HTTP.Testez votre application Chat en lui envoyant un message privé:
Ouvrez Google Chat.
Cliquez sur Nouveau chat
.Dans la boîte de dialogue, saisissez le nom de votre application Chat.
Dans les résultats de recherche, recherchez votre application Chat, puis cliquez sur Add (Ajouter) > Chat.
Dans l'espace de message privé, saisissez
Hello
et appuyez surenter
. Votre application Chat ne répond pas, car elle est en cours de débogage actif.
Dans le
Visual Studio Code
de votre environnement local, vous pouvez constater que l'exécution est suspendue au point d'arrêt défini.Figure 6. L'exécution est suspendue au point d'arrêt défini.
Lorsque vous reprenez l'exécution à partir du débogueur de
Visual Studio Code
avant que Google Chat n'expire, l'application Chat répond àYour message : Hello
.Vous pouvez consulter les journaux des requêtes et réponses HTTP à partir de l'interface Web hébergée par l'application
ngrok
dans votre environnement local.Figure 7. Requête HTTP provenant de l'interface Web hébergée par l'application
ngrok
.Pour modifier le comportement de l'application, remplacez
Your message
parHere was your message
dans l'35
deindex.json
. Lorsque vous enregistrez le fichier,nodemon
actualise automatiquement l'application avec le code source mis à jour, etVisual 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.Cette fois, au lieu d'envoyer un deuxième message
Hello
dans l'espace, vous pouvez sélectionner la dernière requête HTTP journalisée sur l'interface Web hébergée par l'applicationngrok
dans votre environnement local, puis cliquer surReplay
. Comme la dernière fois, votre application Chat ne répond pas, car elle est en cours de débogage.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'applicationngrok
dans votre environnement local que l'application génère une réponse avec la version mise à jour du messageHere was your message : Hello
.
Python
Procurez-vous de nouveaux identifiants utilisateur à utiliser comme identifiants par défaut de l'application:
gcloud config set project PROJECT_ID gcloud auth application-default login
Remplacez
PROJECT_ID
par l'ID du projet Cloud de l'application.Clonez le dépôt
googleworkspace/google-chat-samples
de GitHub vers votre environnement local. Il contient le code d'application:git clone https://github.com/googleworkspace/google-chat-samples.git
À partir de l'IDE
Visual Studio Code
installé dans votre environnement local, procédez comme suit:- Dans une nouvelle fenêtre, ouvrez le dossier
google-chat-samples/python/avatar-app
. Créez un environnement virtuel pour Python
env
et activez-le:virtualenv env
source env/bin/activate
Installez toutes les dépendances du projet à l'aide de
pip
dans l'environnement virtuel:pip install -r requirements.txt
Créez le fichier
.vscode/launch.json
dans le répertoire racine et configurez un lancement nomméDebug Watch
qui déclenche l'application à partir du modulefunctions-framework
sur le port9000
en mode débogage sur l'environnement virtuelenv
:{ "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" ] }] }
Ajoutez un point d'arrêt qui suspend le traitement de la requête HTTP dans le fichier
main.py
, puis démarrez l'exécution et le débogage avec la configurationDebug Watch
déjà ajoutée. L'application est maintenant en cours d'exécution et écoute les requêtes HTTP sur le port9000
.Figure 3. L'application est en cours d'exécution et écoute les requêtes HTTP sur le port
9000
.
- Dans une nouvelle fenêtre, ouvrez le dossier
Lancez l'application
ngrok
dans votre environnement local:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
Remplacez
NGROK_STATIC_DOMAIN
par le domaine statique de votre comptengrok
. Toutes les requêtes sont maintenant redirigées vers votre environnement local 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.Une interface Web est également démarrée sur votre hôte local par l'application
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
qui n'affiche aucune requête HTTP.Testez votre application Chat en lui envoyant un message privé:
Ouvrez Google Chat.
Cliquez sur Nouveau chat
.Dans la boîte de dialogue, saisissez le nom de votre application Chat.
Dans les résultats de recherche, recherchez votre application Chat, puis cliquez sur Add (Ajouter) > Chat.
Dans l'espace de message privé, saisissez
Hey!
et appuyez surenter
. Votre application Chat ne répond pas, car elle est en cours de débogage.
Dans le
Visual Studio Code
de votre environnement local, vous pouvez constater que l'exécution est suspendue au point d'arrêt défini.Figure 6. L'exécution est suspendue au point d'arrêt défini.
Lorsque vous reprenez l'exécution à partir du débogueur de
Visual Studio Code
avant l'expiration de Google Chat, l'application Chat répond avec votre nom et votre photo d'avatar dans le message.Vous pouvez consulter les journaux des requêtes et réponses HTTP à partir de l'interface Web hébergée par l'application
ngrok
dans votre environnement local.Figure 7. Requête HTTP provenant de l'interface Web hébergée par l'application
ngrok
.Pour modifier le comportement de l'application, remplacez
Hello
parHey
intégré51
du fichiermain.py
. Lorsque vous enregistrez le fichier,Visual Studio Code
actualise automatiquement l'application avec le code source mis à jour et 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.Cette fois, au lieu d'envoyer un deuxième message
Hey!
dans l'espace, vous pouvez sélectionner la dernière requête HTTP journalisée sur l'interface Web hébergée par l'applicationngrok
dans votre environnement local, puis cliquer surReplay
. Comme la dernière fois, votre application Chat ne répond pas, car elle est en cours de débogage.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'applicationngrok
dans votre environnement local que l'application génère une réponse avec la version mise à jour du message.
Java
Procurez-vous de nouveaux identifiants utilisateur à utiliser comme identifiants par défaut de l'application:
gcloud config set project PROJECT_ID gcloud auth application-default login
Remplacez
PROJECT_ID
par l'ID du projet Cloud de l'application.Clonez le dépôt
googleworkspace/google-chat-samples
à partir de GitHub dans votre environnement local. Il contient le code d'application:git clone https://github.com/googleworkspace/google-chat-samples.git
À partir de l'IDE
Visual Studio Code
installé dans votre environnement local, procédez comme suit:- Dans une nouvelle fenêtre, ouvrez le dossier
google-chat-samples/java/avatar-app
. Configurez le projet Maven pour exécuter localement l'application
HelloChat
sur le port9000
en ajoutant le plug-in de compilation du framework Cloud Functionsfunction-maven-plugin
dans le fichierpom.xml
:... <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> ...
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
Créez le fichier
.vscode/launch.json
dans le répertoire racine, puis configurez un lancement nomméRemote Debug Watch
qui s'associe à l'application précédemment lancée avec le port8000
:{ "version": "0.2.0", "configurations": [{ "type": "java", "request": "attach", "name": "Remote Debug Watch", "projectName": "http-function", "hostName": "localhost", "port": 8000 }] }
Ajoutez un point d'arrêt qui suspend le traitement de la requête HTTP dans le fichier
HelloChat.java
, puis commencez à effectuer des rattachements et des débogages avec la configurationRemote Debug Watch
déjà ajoutée. L'application est maintenant en cours d'exécution et écoute les requêtes HTTP sur le port9000
.Figure 3 : L'application est en cours d'exécution et écoute les requêtes HTTP sur le port
9000
.
- Dans une nouvelle fenêtre, ouvrez le dossier
Lancez l'application
ngrok
dans votre environnement local:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
Remplacez
NGROK_STATIC_DOMAIN
par le domaine statique de votre comptengrok
. Toutes les requêtes sont maintenant redirigées vers votre environnement local 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.Une interface Web est également démarrée sur votre hôte local par l'application
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
qui n'affiche aucune requête HTTP.Testez votre application Chat en lui envoyant un message privé:
Ouvrez Google Chat.
Cliquez sur Nouveau chat
.Dans la boîte de dialogue, saisissez le nom de votre application Chat.
Dans les résultats de recherche, recherchez votre application Chat, puis cliquez sur Add (Ajouter) > Chat.
Dans l'espace de message privé, saisissez
Hey!
et appuyez surenter
. Votre application Chat ne répond pas, car elle est en cours de débogage.
Dans le
Visual Studio Code
de votre environnement local, vous pouvez constater que l'exécution est suspendue au point d'arrêt défini.Figure 6. L'exécution est suspendue au point d'arrêt défini.
Lorsque vous reprenez l'exécution à partir du débogueur de
Visual Studio Code
avant l'expiration de Google Chat, l'application Chat répond avec votre nom et votre photo d'avatar dans le message.Vous pouvez consulter les journaux des requêtes et réponses HTTP à partir de l'interface Web hébergée par l'application
ngrok
dans votre environnement local.Figure 7. Requête HTTP provenant de l'interface Web hébergée par l'application
ngrok
.Pour modifier le comportement de l'application, remplacez
Hello
parHey
intégré55
du fichierHelloChat.java
, redémarrez le processusmvnDebug
, puis relancezRemote Debug Watch
pour rattacher et redémarrer le débogage.Cette fois, au lieu d'envoyer un deuxième message
Hey!
dans l'espace, vous pouvez sélectionner la dernière requête HTTP journalisée sur l'interface Web hébergée par l'applicationngrok
dans votre environnement local, puis cliquer surReplay
. Comme la dernière fois, votre application Chat ne répond pas, car elle est en cours de débogage.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'applicationngrok
dans votre environnement local que l'application génère une réponse avec la version mise à jour du message.
Déboguer depuis l'environnement distant
Dans cette section, vous interagissez avec votre application Chat qui s'exécute dans un environnement distant.
Figure 9. Effectuez le débogage depuis l'environnement distant.
Conditions préalables
- Un espace de message privé avec votre application Chat. Vous pouvez suivre la section Tester votre application Chat du guide de démarrage rapide et rechercher votre application Chat pour en démarrer une.
- Votre application s'exécutant dans votre environnement distant avec le débogueur activé sur un port donné est référencée comme
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 l'IDE
Visual Studio Code
et ses fonctionnalités de débogage par défaut dans ce guide à titre d'illustration.
Connectez vos environnements local et distant
Dans votre environnement local à partir duquel vous souhaitez initier une connexion 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 dans votre environnement local.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 environnement distant.
Le port de débogage de votre environnement local est désormais associé au port de débogage de votre environnement distant.
Démarrer le débogage
À partir de l'IDE Visual Studio Code
installé dans votre environnement local, procédez comme suit:
- Dans une nouvelle fenêtre, ouvrez le code source de votre application.
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 local: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 de votre environnement local.Ajoutez un point d'arrêt dans le code source de votre application qui suspend le traitement de la requête HTTP, puis lancez l'exécution et le débogage avec la configuration
Debug Remote
déjà ajoutée.
Dans l'espace de message privé de votre application Chat, saisissez ce que vous souhaitez tester et appuyez sur enter
. Votre application Chat ne répond pas, car elle est en cours de débogage dans l'IDE Visual Studio Code
.
Articles associés
- Découvrez comment enable et interroger les journaux d'erreurs.
- Découvrez comment corriger les erreurs de l'application Google Chat telles que "L'application ne répond pas", "L'API Google Chat n'est disponible que pour les utilisateurs Google Workspace" ou "Les utilisateurs peuvent être exclus des espaces".
- Découvrez comment corriger les erreurs liées aux fiches, telles que les messages de fiches, les boîtes de dialogue ou les aperçus de liens qui ne s'affichent pas ou ne fonctionnent pas comme prévu.