En tant que développeur d'applications Google Chat, vous devrez peut-être déboguer du code pour pour tester les modifications ou résoudre des problèmes complexes. Déboguer les applications Chat 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 une application de chat HTTP à 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 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
Prérequis
Node.js
- Dernières versions de
node
etnpm
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
Une application de chat HTTP configurée pour messagerie. Vous pouvez suivre les sections Conditions préalables, Configurez environnement, et publiez l'application sur Google. Chat de Guide de démarrage rapide. La seule la différence est que vous devez définir le nom de l'application sur
Debug App
. l'URL de l'application vers un élément tel quehttp://example.com
.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.Git
installée 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
etvirtualenv
installé dans votre dans l'environnement local, ils permettent de gérer les packages Python et les respectivement. - Une application de chat HTTP configurée pour
messagerie. Vous pouvez suivre les sections
Conditions préalables,
Configurez
environnement,
et publiez l'application sur Google.
Chat de
Guide de démarrage rapide. La seule
la différence est que vous devez définir le nom de l'application sur
Debug App
. l'URL de l'application vers un élément tel quehttp://example.com
. - 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. Git
installée dans votre environnement local.- 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. - Une application de chat HTTP configurée pour
messagerie. Vous pouvez suivre les sections
Conditions préalables,
Configurez
environnement,
et publiez l'application sur Google.
Chat de
Guide de démarrage rapide. La seule
la différence est que vous devez définir le nom de l'application sur
Debug App
. l'URL de l'application vers un élément tel quehttp://example.com
. - 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. Git
installée dans votre environnement local.- 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
L'application Chat 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.
- Dans un navigateur de votre environnement local, connectez-vous à votre compte
ngrok
. - Installez l'application et configurez votre
authtoken
dans votre environnement cloud. - Créez un domaine statique dans votre
ngrok
, il est référencé sous la formeNGROK_STATIC_DOMAIN
dans les instructions de ce guide.
Configurer l'application Chat
Configurer 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 App Url (URL de l'application) par:
https://NGROK_STATIC_DOMAIN
Remplacez
NGROK_STATIC_DOMAIN
par le domaine statique dans 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 passerelle entre les
Application de chat et code de l'application qui s'exécute
localement.
Tester l'application Chat
Vous pouvez déployer, configurer, tester, déboguer et recharger automatiquement votre Application Chat
Node.js
Cloner le dépôt
googleworkspace/google-chat-samples
depuis GitHub dans votre environnement local, il contient le code de l'application exécuter:git clone https://github.com/googleworkspace/google-chat-samples.git
Depuis l'IDE
Visual Studio Code
installé dans votre environnement local, effectuer les opérations suivantes:- Ouvrez le dossier dans une nouvelle fenêtre.
google-chat-samples/node/basic-app
Configurez l'application pour le débogage par actualisation automatique en ajoutant deux dans le 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 l'événement 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
index.js
, puis lancez l'exécution et le débogage avec ConfigurationDebug Watch
ajoutée précédemment. L'application est maintenant en cours d'exécution et à l'écoute des requêtes HTTP sur le port9000
.Figure 3. L'application est en cours d'exécution et écoute le trafic HTTP requêtes sur le port
9000
.
- Ouvrez le dossier dans une nouvelle fenêtre.
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 comptengrok
. 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.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.Testez votre application Chat en lui envoyant directement message:
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, cliquez sur Ajouter > Chatter.
Dans l'espace de message privé, saisissez
Hello
et appuyez surenter
. Votre L'application Chat ne répond pas, car elle est en cours activement débogués.
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.
Lorsque vous reprenez l'exécution à partir du débogueur de
Visual Studio Code
avant que Google Chat n'expire l'application Chat répondYour message : Hello
.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
.Pour modifier le comportement de l'application, remplacez
Your message
parHere was your message
a intégré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 second message
Hello
dans l'espace, vous peut sélectionner la dernière requête HTTP consignée sur l'interface Web hébergée par l'applicationngrok
dans votre environnement local, puis cliquez surReplay
. Comme la dernière fois, votre application Chat ne répond pas car il est en cours de débogage actif.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
l'environnement local avec lequel l'application génère une réponse la version mise à jour du messageHere was your message : Hello
.
Python
Procurez-vous de nouveaux identifiants utilisateur à utiliser pour les paramètres par défaut de l'application Identifiants:
gcloud config set project PROJECT_ID
gcloud auth application-default login
Remplacez
PROJECT_ID
par le ID du projet pour le projet Cloud de l'application.Cloner le dépôt
googleworkspace/google-chat-samples
depuis GitHub dans votre environnement local, il contient le code de l'application:git clone https://github.com/googleworkspace/google-chat-samples.git
Depuis l'IDE
Visual Studio Code
installé dans votre environnement local, effectuer les opérations suivantes:- Ouvrez le dossier dans une nouvelle fenêtre.
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 le environnement:pip install -r requirements.txt
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 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", "avatar_app", "--port", "9000", "--debug" ] }] }
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 ConfigurationDebug Watch
ajoutée précédemment. L'application est maintenant en cours d'exécution et à l'écoute des requêtes HTTP sur le port9000
.Figure 3. L'application est en cours d'exécution et écoute le trafic HTTP requêtes sur le port
9000
.
- Ouvrez le dossier dans une nouvelle fenêtre.
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 comptengrok
. 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.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.Testez votre application Chat en lui envoyant directement message:
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, cliquez sur Ajouter > Chatter.
Dans l'espace de message privé, saisissez
Hey!
et appuyez surenter
. Votre L'application Chat ne répond pas, car elle est en cours activement débogués.
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.
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 avec votre nom et votre photo d'avatar dans le message.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
.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 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 second message
Hey!
dans l'espace, vous peut sélectionner la dernière requête HTTP consignée sur l'interface Web hébergée par l'applicationngrok
dans votre environnement local, puis cliquez surReplay
. Comme la dernière fois, votre application Chat ne répond pas car il est en cours de débogage actif.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
l'environnement local avec lequel l'application génère une réponse la version mise à jour du message.
Java
Procurez-vous de nouveaux identifiants utilisateur à utiliser pour les paramètres par défaut de l'application Identifiants:
gcloud config set project PROJECT_ID
gcloud auth application-default login
Remplacez
PROJECT_ID
par le ID du projet pour le projet Cloud de l'application.Cloner le dépôt
googleworkspace/google-chat-samples
depuis GitHub dans votre environnement local, il contient le code d'application:git clone https://github.com/googleworkspace/google-chat-samples.git
Depuis l'IDE
Visual Studio Code
installé dans votre environnement local, effectuer les opérations suivantes:- Ouvrez le dossier dans une nouvelle fenêtre.
google-chat-samples/java/avatar-app
Configurer le projet Maven sur lequel exécuter l'application
App
portez9000
localement en ajoutant le build du framework Cloud Functions Plug-infunction-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>App</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. configurez un lancement nomméRemote Debug Watch
qui s'associe 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
App.java
, puis commencez à joindre et le débogage avec ConfigurationRemote Debug Watch
ajoutée précédemment. L'application est en cours d'exécution et à l'écoute des requêtes HTTP sur le port9000
.Figure 3 : L'application est en cours d'exécution et écoute le protocole HTTP. sur le port
9000
.
- Ouvrez le dossier dans une nouvelle fenêtre.
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 comptengrok
. 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.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.Testez votre application Chat en lui envoyant directement message:
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, cliquez sur Ajouter > Chatter.
Dans l'espace de message privé, saisissez
Hey!
et appuyez surenter
. Votre L'application Chat ne répond pas, car elle est en cours activement débogués.
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.
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 avec votre nom et votre photo d'avatar dans le message.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
.Pour modifier le comportement de l'application, remplacez
Hello
parHey
intégré55
du fichierApp.java
, redémarrez le processusmvnDebug
et relancerRemote Debug Watch
pour le réassocier et le redémarrer le débogage.Cette fois, au lieu d'envoyer un second message
Hey!
dans l'espace, vous peut sélectionner la dernière requête HTTP consignée sur l'interface Web hébergée par l'applicationngrok
dans votre environnement local, puis cliquez surReplay
. Comme la dernière fois, votre application Chat ne répond pas car il est en cours de débogage actif.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
l'environnement local avec lequel l'application génère une réponse 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.
Prérequis
- Un espace de messagerie privée avec votre application Chat Vous pouvez suivez la section Testez votre application Chat de la Guide de démarrage rapide et recherchez Application de chat pour en démarrer une.
- 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:
- 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 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.Ajouter 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.
Dans l'espace de message privé de votre application Chat, saisissez
à tester et appuyez sur enter
. Votre
L'application Chat ne répond pas, car elle est en cours d'exécution
débogué
dans l'IDE Visual Studio Code
.
Articles associés
- Découvrez comment activer et query.
- Découvrez comment résoudre les problèmes liés à l'application Google Chat des erreurs comme "L'application ne répond pas", "API Google Chat" n'est disponible que pour les utilisateurs Google Workspace" ou "Les utilisateurs peuvent être exclus" à partir des espaces".
- Découvrez comment corriger les erreurs des cartes, comme les messages associés aux cartes, des boîtes de dialogue ou des aperçus de liens qui ne s'affichent pas ou ne fonctionnent pas comme prévu.