Como desarrollador de apps de Google Chat, es posible que debas depurar código para probar cambios o solucionar problemas complejos. Cómo depurar apps de Chat se puede hacer de muchas maneras diferentes según la arquitectura de tu app, hace la app, cómo se implementa y tus preferencias.
En esta página, se explica cómo depurar una app de chat HTTP con ngrok, una plataforma de entrada unificada que puedes usar para probar entornos de desarrollo de aplicaciones. En esta guía, probarás cambios de código en una instancia y solucionar problemas en un entorno remoto.
Cómo depurar desde un entorno de desarrollo local
En esta sección, interactuarás con la app de Chat que que se ejecuta en tu entorno local.
Figura 1: Depura en un entorno de desarrollo local.
Taller
Node.js
Python
Java
Requisitos previos
Node.js
- Las versiones más recientes de
node
ynpm
instalada en tu entorno local. La versión más reciente de
nodemon
instalada en tu dispositivo local este se usa para la recarga automática:npm install -g nodemon
Una app de chat HTTP configurada para la mensajería. Puedes seguir las secciones Requisitos previos, Configura la entorno, y publicar la aplicación en Google Chat del Guía de inicio rápido. El único hay que configurar el App name como
Debug App
y la URL de la app a cualquier valor, comohttp://example.com
.Un IDE configurado en tu entorno local que puede depurar. Usamos la
Visual Studio Code
IDE y su configuración predeterminada funciones de depuración en esta guía con fines ilustrativos.Git
instalada en tu entorno local.Una cuenta de
ngrok
Python
- Versión más reciente de
python3
instalada en tu entorno local. - La versión más reciente de
pip
y Se instalóvirtualenv
en tu en un entorno local, se usan para administrar paquetes de Python y APIs de manera respectiva. - Una app de chat HTTP configurada para
la mensajería. Puedes seguir las secciones
Requisitos previos,
Configura la
entorno,
y publicar la aplicación en Google
Chat del
Guía de inicio rápido. El único
hay que configurar el App name como
Debug App
y la URL de la app a cualquier valor, comohttp://example.com
. - Un IDE configurado en tu entorno local que puede depurar. Usamos la
Visual Studio Code
IDE y su configuración predeterminada funciones de depuración en esta guía con fines ilustrativos. Git
instalada en tu entorno local.- Una cuenta de
ngrok
- Versión más reciente de
gcloud
instalada y se inicializa en tu entorno local.
Java
- La versión estable más reciente de
Java SE 11's JDK
instalada en tu app local en un entorno de nube. - Versión más reciente de
Apache Maven
instalada en tu entorno local se usa para administrar proyectos de Java. - Una app de chat HTTP configurada para
la mensajería. Puedes seguir las secciones
Requisitos previos,
Configura la
entorno,
y publicar la aplicación en Google
Chat del
Guía de inicio rápido. El único
hay que configurar el App name como
Debug App
y la URL de la app a cualquier valor, comohttp://example.com
. - Un IDE configurado en tu entorno local que puede depurar. Usamos la
Visual Studio Code
IDE y su configuración predeterminada funciones de depuración en esta guía con fines ilustrativos. Git
instalada en tu entorno local.- Una cuenta de
ngrok
- Versión más reciente de
gcloud
instalada y se inicializa en tu entorno local.
Haz que el servicio localhost esté disponible de forma pública
Debes conectar tu entorno local a Internet para que el
la app de Chat podrá acceder a ella. Se usa la aplicación ngrok
para redireccionar las solicitudes HTTP realizadas a una URL pública a tu entorno local.
- En un navegador de tu entorno local, accede a tu cuenta de
ngrok
. - Instala la aplicación y configura tu
authtoken
en tu entorno local entorno. - Crea un dominio estático en tu
ngrok
cuenta, se hace referencia a ella comoNGROK_STATIC_DOMAIN
en las instrucciones de esta guía.
Configura la app de Chat
Configura la app de Chat para que envíe todas sus solicitudes HTTP a tu dominio estático.
En la consola de Google Cloud, abre la página de la API de Google Chat:
Haz clic en la pestaña Configuración.
Ve a Funciones interactivas > Configuración de la conexión y establece el valor del campo de texto URL de la aplicación de la siguiente manera:
https://NGROK_STATIC_DOMAIN
Reemplaza
NGROK_STATIC_DOMAIN
por el dominio estático en tu cuenta dengrok
.Haz clic en Guardar.
Figura 2: La app de Chat envía todas sus solicitudes HTTP
al dominio estático. El servicio público de ngrok
actúa como un puente entre los
App de Chat y el código de la aplicación que se ejecuta
de forma local.
Prueba la app de Chat
De forma local, puedes implementar, configurar, probar, depurar y volver a cargar automáticamente tus App de Chat
Node.js
Clona el repositorio
googleworkspace/google-chat-samples
desde GitHub a tu entorno local, contiene el código de la aplicación que se ejecutar:git clone https://github.com/googleworkspace/google-chat-samples.git
Desde el IDE de
Visual Studio Code
instalado en tu entorno local, haz lo siguiente: haz lo siguiente:- En una ventana nueva, abre la carpeta.
google-chat-samples/node/basic-app
Configura la aplicación para la depuración de recarga automática agregando dos secuencias de comandos en el archivo
package.json
:{ ... "scripts": { ... "debug": "node --inspect index.js", "debug-watch": "nodemon --watch ./ --exec npm run debug" } ... }
Desde el directorio raíz, instala la aplicación:
npm install
Crea y configura un lanzamiento llamado
Debug Watch
que active la función de secuencia de comandosdebug-watch
creando el archivo.vscode/launch.json
en directorio raíz:{ "version": "0.2.0", "configurations": [{ "type": "node", "request": "launch", "name": "Debug Watch", "cwd": "${workspaceRoot}", "runtimeExecutable": "npm", "runtimeArgs": ["run-script", "debug-watch"] }] }
Agrega un punto de interrupción que detenga el procesamiento de solicitudes HTTP en la
index.js
y comenzar a ejecutar y la depuración con el Se agregó la configuración deDebug Watch
antes. Ahora la aplicación ejecuta y escucha solicitudes HTTP en el puerto9000
.Figura 3: La aplicación se ejecuta y escucha HTTP de estado en el puerto
9000
.
- En una ventana nueva, abre la carpeta.
Inicia la aplicación
ngrok
en tu entorno local:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
Reemplaza
NGROK_STATIC_DOMAIN
por el dominio estático en tu cuenta dengrok
. Todas las solicitudes se redireccionarán a la instancia y el puerto que usa la aplicación.Figura 4: La terminal con el servidor
ngrok
en ejecución y redireccionando.ngrok
también inicia una interfaz web en tu localhost. puedes supervisar todas las actividades abriéndola en un navegador.Figura 5: La interfaz web que aloja la aplicación
ngrok
que no muestra solicitudes HTTP.Para probar tu app de Chat, envíale un mensaje mensaje:
Abre Google Chat.
Haz clic en New chat
.En el cuadro de diálogo, ingresa el nombre de tu App de Chat
En los resultados de la búsqueda, busca tu app de Chat Haz clic en Agregar >. Chat.
En el espacio del mensaje directo, escribe
Hello
y presionaenter
. Tu La app de Chat no responde porque se está depurados activamente.
En el
Visual Studio Code
de tu entorno local, puedes ver que se pausó la ejecución en el punto de interrupción que se estableció.Figura 6: Se pausó la ejecución en el punto de interrupción que se estableció.
Cuando reanudas la ejecución desde el depurador de
Visual Studio Code
antes de que Google Chat agote el tiempo de espera de la app de Chat respuestasYour message : Hello
.Puedes verificar los registros de solicitud y respuesta HTTP desde la interfaz web alojada por la aplicación
ngrok
en tu entorno local.Figura 7: La solicitud HTTP de la interfaz web alojada por el
ngrok
.Para cambiar el comportamiento de la aplicación, reemplaza
Your message
porHere was your message
intercalado35
deindex.json
. Al guardar el archivo,nodemon
vuelve a cargar automáticamente la aplicación con el el código fuente actualizado yVisual Studio Code
permanecen en modo de depuración.Figura 8: La aplicación se ejecuta y detecta solicitudes HTTP. en el puerto
9000
con el cambio de código cargadoEsta vez, en lugar de enviar un segundo mensaje
Hello
en el espacio, solo puede seleccionar la última solicitud HTTP registrada en la interfaz web alojada por la aplicaciónngrok
en tu entorno local y haz clic enReplay
. Al igual que la última vez, la app de Chat no responde porque se están depurando activamente.Cuando reanudas la ejecución desde el depurador de
Visual Studio Code
Desde la interfaz web que aloja la aplicaciónngrok
en tu entorno local con el que la aplicación genera una respuesta la versión actualizada del mensajeHere was your message : Hello
Python
Adquiere nuevas credenciales de usuario para utilizarlas en Configuración predeterminada de la aplicación Credenciales:
gcloud config set project PROJECT_ID
gcloud auth application-default login
Reemplaza
PROJECT_ID
por el ID del proyecto para el proyecto de Cloud de la app.Clona el repositorio
googleworkspace/google-chat-samples
desde GitHub a tu entorno local, contiene el siguiente código de la aplicación:git clone https://github.com/googleworkspace/google-chat-samples.git
Desde el IDE de
Visual Studio Code
instalado en tu entorno local, haz lo siguiente: haz lo siguiente:- En una ventana nueva, abre la carpeta.
google-chat-samples/python/avatar-app
Crea un entorno virtual nuevo para
env
de Python y actívalo:virtualenv env
source env/bin/activate
Instala todas las dependencias del proyecto usando
pip
en el entorno:pip install -r requirements.txt
Crea el archivo
.vscode/launch.json
en el directorio raíz. configurar un lanzamiento llamadoDebug Watch
que active la aplicación del módulofunctions-framework
en el puerto9000
, en modo de depuración en el entorno virtualenv
:{ "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" ] }] }
Agrega un punto de interrupción que detenga el procesamiento de solicitudes HTTP en la
main.py
y comenzar a ejecutar y la depuración con el Se agregó la configuración deDebug Watch
antes. Ahora la aplicación ejecuta y escucha solicitudes HTTP en el puerto9000
.Figura 3: La aplicación se ejecuta y escucha HTTP de estado en el puerto
9000
.
- En una ventana nueva, abre la carpeta.
Inicia la aplicación
ngrok
en tu entorno local:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
Reemplaza
NGROK_STATIC_DOMAIN
por el dominio estático en tu cuenta dengrok
. Todas las solicitudes se redireccionarán a la instancia y el puerto que usa la aplicación.Figura 4: La terminal con el servidor
ngrok
en ejecución y redireccionando.ngrok
también inicia una interfaz web en tu localhost. puedes supervisar todas las actividades abriéndola en un navegador.Figura 5: La interfaz web que aloja la aplicación
ngrok
que no muestra solicitudes HTTP.Para probar tu app de Chat, envíale un mensaje mensaje:
Abre Google Chat.
Haz clic en New chat
.En el cuadro de diálogo, ingresa el nombre de tu App de Chat
En los resultados de la búsqueda, busca tu app de Chat Haz clic en Agregar >. Chat.
En el espacio del mensaje directo, escribe
Hey!
y presionaenter
. Tu La app de Chat no responde porque se está depurados activamente.
En el
Visual Studio Code
de tu entorno local, puedes ver que se pausó la ejecución en el punto de interrupción que se estableció.Figura 6: Se pausó la ejecución en el punto de interrupción que se estableció.
Cuando reanudas la ejecución desde el depurador de
Visual Studio Code
antes de que Google Chat agote el tiempo de espera de la app de Chat respuestas con tu nombre y foto de avatar en el mensaje.Puedes verificar los registros de solicitud y respuesta HTTP desde la interfaz web alojada por la aplicación
ngrok
en tu entorno local.Figura 7: La solicitud HTTP de la interfaz web alojada por el
ngrok
.Para cambiar el comportamiento de la aplicación, reemplaza
Hello
porHey
intercalado.51
del archivomain.py
. Cuando guardes el archivo,Visual Studio Code
vuelve a cargar automáticamente la aplicación con el código fuente actualizado y permanece en modo de depuración.Figura 8: La aplicación se ejecuta y detecta solicitudes HTTP. en el puerto
9000
con el cambio de código cargadoEsta vez, en lugar de enviar un segundo mensaje
Hey!
en el espacio, solo puede seleccionar la última solicitud HTTP registrada en la interfaz web alojada por la aplicaciónngrok
en tu entorno local y haz clic enReplay
. Al igual que la última vez, la app de Chat no responde porque se están depurando activamente.Cuando reanudas la ejecución desde el depurador de
Visual Studio Code
Desde la interfaz web que aloja la aplicaciónngrok
en tu entorno local con el que la aplicación genera una respuesta la versión actualizada del mensaje.
Java
Adquiere nuevas credenciales de usuario para utilizarlas en Configuración predeterminada de la aplicación Credenciales:
gcloud config set project PROJECT_ID
gcloud auth application-default login
Reemplaza
PROJECT_ID
por el ID del proyecto para el proyecto de Cloud de la app.Clona el repositorio
googleworkspace/google-chat-samples
desde GitHub en tu entorno local, contiene el siguiente código de la aplicación:git clone https://github.com/googleworkspace/google-chat-samples.git
Desde el IDE de
Visual Studio Code
instalado en tu entorno local, haz lo siguiente: haz lo siguiente:- En una ventana nueva, abre la carpeta.
google-chat-samples/java/avatar-app
Configura el proyecto de Maven para ejecutar la aplicación
App
en puerto9000
de forma local agregando la compilación de Cloud Functions Framework el complementofunction-maven-plugin
en el archivopom.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> ...
Ahora puedes iniciarla de manera local en modo de depuración:
mvnDebug function:run Preparing to execute Maven in debug mode Listening for transport dt_socket at address: 8000
Crea el archivo
.vscode/launch.json
en el directorio raíz. configurar un lanzamiento llamadoRemote Debug Watch
que se conecte al aplicación iniciada anteriormente con el puerto8000
:{ "version": "0.2.0", "configurations": [{ "type": "java", "request": "attach", "name": "Remote Debug Watch", "projectName": "http-function", "hostName": "localhost", "port": 8000 }] }
Agrega un punto de interrupción que detenga el procesamiento de solicitudes HTTP en la
App.java
y comenzar a adjuntar y la depuración con el Se agregó la configuración deRemote Debug Watch
antes. La aplicación es que ahora se ejecutan y están a la escucha de solicitudes HTTP en el puerto9000
.Figura 3: La aplicación ejecuta y escucha HTTP de estado en el puerto
9000
.
- En una ventana nueva, abre la carpeta.
Inicia la aplicación
ngrok
en tu entorno local:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
Reemplaza
NGROK_STATIC_DOMAIN
por el dominio estático en tu cuenta dengrok
. Todas las solicitudes se redireccionarán a la instancia y el puerto que usa la aplicación.Figura 4: La terminal con el servidor
ngrok
en ejecución y redireccionando.ngrok
también inicia una interfaz web en tu localhost. puedes supervisar todas las actividades abriéndola en un navegador.Figura 5: La interfaz web que aloja la aplicación
ngrok
que no muestra solicitudes HTTP.Para probar tu app de Chat, envíale un mensaje mensaje:
Abre Google Chat.
Haz clic en New chat
.En el cuadro de diálogo, ingresa el nombre de tu App de Chat
En los resultados de la búsqueda, busca tu app de Chat Haz clic en Agregar >. Chat.
En el espacio del mensaje directo, escribe
Hey!
y presionaenter
. Tu La app de Chat no responde porque se está depurados activamente.
En el
Visual Studio Code
de tu entorno local, puedes ver que se pausó la ejecución en el punto de interrupción que se estableció.Figura 6: Se pausó la ejecución en el punto de interrupción que se estableció.
Cuando reanudas la ejecución desde el depurador de
Visual Studio Code
antes de que Google Chat agote el tiempo de espera de la app de Chat respuestas con tu nombre y foto de avatar en el mensaje.Puedes verificar los registros de solicitud y respuesta HTTP desde la interfaz web alojada por la aplicación
ngrok
en tu entorno local.Figura 7: La solicitud HTTP de la interfaz web alojada por el
ngrok
.Para cambiar el comportamiento de la aplicación, reemplaza
Hello
porHey
intercalado.55
del archivoApp.java
, reinicia el procesomvnDebug
. reiniciarRemote Debug Watch
para volver a conectarlo y reiniciarlo del contenedor.Esta vez, en lugar de enviar un segundo mensaje
Hey!
en el espacio, solo puede seleccionar la última solicitud HTTP registrada en la interfaz web alojada por la aplicaciónngrok
en tu entorno local y haz clic enReplay
. Al igual que la última vez, la app de Chat no responde porque se están depurando activamente.Cuando reanudas la ejecución desde el depurador de
Visual Studio Code
Desde la interfaz web que aloja la aplicaciónngrok
en tu entorno local con el que la aplicación genera una respuesta la versión actualizada del mensaje.
Depurar desde un entorno remoto
En esta sección, interactuarás con la app de Chat que se ejecuta en un entorno remoto.
Figura 9: Depurar desde un entorno remoto
Requisitos previos
- Un espacio de mensaje directo con tu app de Chat Puedes sigue la sección Prueba tu app de Chat de la Guía de inicio rápido y busca tu de Google Chat para iniciar una.
- Tu aplicación que se ejecuta en tu entorno remoto con el depurador
habilitado en un puerto determinado, se denomina
REMOTE_DEBUG_PORT
en las instrucciones de esta guía. - Tu entorno local puede
ssh
a tu entorno remoto. - Un IDE configurado en tu entorno local que puede depurar. Usamos la
Visual Studio Code
IDE y su configuración predeterminada funciones de depuración de este con fines ilustrativos.
Conecta tus entornos locales y remotos
En tu entorno local desde el que quieres iniciar un cliente de depuración de red, configura un túnel SSH:
ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS
Reemplaza lo siguiente:
LOCAL_DEBUG_PORT
: Es el puerto de depuración en tu entorno local. en un entorno de nube.REMOTE_USERNAME
: Es el nombre de usuario en el entorno remoto.REMOTE_ADDRESS
: Es la dirección de tu entorno remoto.REMOTE_DEBUG_PORT
: Es el puerto de depuración del control remoto. en un entorno de nube.
El puerto de depuración en tu entorno local ahora está vinculado al puerto de depuración en tu en un entorno remoto.
Cómo iniciar la depuración
Desde el IDE de Visual Studio Code
instalado en tu entorno local, haz lo siguiente:
lo siguiente:
- En una ventana nueva, abre el código fuente de la app.
Crea el archivo
.vscode/launch.json
en el directorio raíz y configura una Inicia con el nombreDebug Remote
que se conecta al puerto de depuración en tu red local entorno: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 }] }
Reemplaza
LOCAL_DEBUG_PORT
por el puerto de depuración en tu entorno local.Agrega un punto de interrupción en el código fuente de tu app que detenga la solicitud HTTP. procesamiento y comenzar a ejecutar y depurando con la configuración
Debug Remote
que se agregó antes.
En el espacio de mensaje directo con tu app de Chat, escribe
cualquier cosa que quieras probar y presiona enter
. Tu
La app de Chat no responde porque se está realizando
depurado
en el IDE de Visual Studio Code
.
Temas relacionados
- Obtén más información sobre cómo habilitar y query.
- Aprende a corregir los problemas de la app de Google Chat errores como “La app no responde” o “API de Google Chat solo está disponible para usuarios de Google Workspace”, o bien “Se pueden excluir usuarios de los espacios”.
- Aprende a corregir errores de tarjetas, como los mensajes de tarjetas. Los diálogos o las vistas previas de vínculos no se renderizan o no funcionan según lo esperado.