Como desarrollador de apps de Google Chat, es posible que debas depurar código para probar cambios o solucionar problemas complejos. La depuración de apps de Chat se puede realizar de muchas maneras diferentes según la arquitectura de tu app, lo que hace, 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 locales. En esta guía, puedes probar cambios de código en un entorno local 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 se ejecuta en el 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
instaladas en tu entorno local La versión más reciente de
nodemon
instalada en tu entorno local, se usa con fines de recarga automática:npm install -g nodemon
Una app de chat HTTP configurada para la mensajería. Puedes seguir las secciones Requisitos previos, Configura el entorno y Publica la app en Google Chat de la Guía de inicio rápido. Las únicas diferencias son que debes establecer el Nombre de la app en
Debug App
y la URL de la app en algo comohttp://example.com
.Un IDE configurado en tu entorno local que puede depurar. Usamos el IDE de
Visual Studio Code
y sus funciones de depuración predeterminadas en esta guía con fines ilustrativos.Git
instalado en tu entorno local.Una cuenta de
ngrok
Python
- La versión más reciente de
python3
instalada en tu entorno local. - Las versiones más recientes de
pip
yvirtualenv
, instaladas en tu entorno local, se usan para administrar paquetes de Python y entornos virtuales, respectivamente. - Una app de chat HTTP
configurada para la mensajería. Puedes seguir las secciones Requisitos previos, Configura el entorno y Publica la app en Google Chat de la Guía de inicio rápido. Las únicas diferencias son que debes establecer el Nombre de la app en
Debug App
y la URL de la app en algo comohttp://example.com
. - Un IDE configurado en tu entorno local que puede depurar. Usamos el IDE de
Visual Studio Code
y sus funciones de depuración predeterminadas en esta guía con fines ilustrativos. Git
instalado en tu entorno local.- Una cuenta de
ngrok
- La versión más reciente de
gcloud
instalada e inicializada en tu entorno local
Java
- La versión estable más reciente de
Java SE 11's JDK
instalada en tu entorno local. - La 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 el entorno y Publica la app en Google Chat de la Guía de inicio rápido. Las únicas diferencias son que debes establecer el Nombre de la app en
Debug App
y la URL de la app en algo comohttp://example.com
. - Un IDE configurado en tu entorno local que puede depurar. Usamos el IDE de
Visual Studio Code
y sus funciones de depuración predeterminadas en esta guía con fines ilustrativos. Git
instalado en tu entorno local.- Una cuenta de
ngrok
- La versión más reciente de
gcloud
instalada e inicializada en tu entorno local
Haz que el servicio localhost esté disponible de forma pública
Debes conectar tu entorno local a Internet para que la
app de Chat pueda acceder a ella. La aplicación ngrok
se usa 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. - Crea un dominio estático en tu cuenta
ngrok
. En las instrucciones de esta guía, se hace referencia a él comoNGROK_STATIC_DOMAIN
.
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 app en:
https://NGROK_STATIC_DOMAIN
Reemplaza
NGROK_STATIC_DOMAIN
por el dominio estático en tu cuentangrok
.Haz clic en Guardar.
Figura 2: La app de Chat envía todas sus solicitudes
HTTP al dominio estático. El servicio público ngrok
actúa como un puente entre la app de Chat y el código de la aplicación que se ejecuta de forma local.
Prueba la app de Chat
Puedes implementar, configurar, probar, depurar y volver a cargar automáticamente tu app de Chat de forma local.
Node.js
Clona el repositorio
googleworkspace/google-chat-samples
de GitHub en tu entorno local. Este 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:- En una ventana nueva, abre la carpeta
google-chat-samples/node/basic-app
. Agrega dos secuencias de comandos en el archivo
package.json
a fin de configurar la aplicación para la depuración de recarga automática:{ ... "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 secuencia de comandosdebug-watch
mediante la creación del archivo.vscode/launch.json
en el 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 pause el procesamiento de solicitudes HTTP en el archivo
index.js
y comienza a ejecutar y depurar con la configuraciónDebug Watch
que se agregó antes. La aplicación está en ejecución y detecta las solicitudes HTTP en el puerto9000
.Figura 3: La aplicación está en ejecución y detecta las solicitudes HTTP 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 cuentangrok
. Ahora, todas las solicitudes se redireccionan a tu entorno local y al puerto que usa la aplicación.Figura 4: La terminal con el servidor
ngrok
en ejecución y redireccionando.La aplicación
ngrok
también inicia una interfaz web en tu host local. Puedes supervisar todas las actividades si la abres en un navegador.Figura 5: La interfaz web que aloja la aplicación
ngrok
no muestra solicitudes HTTP.Para probar tu app de Chat, envíale un mensaje directo:
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 y haz clic en Add > Chat.
En el espacio del mensaje directo, escribe
Hello
y presionaenter
. Tu app de Chat no responde porque se está depurando de forma activa.
En el
Visual Studio Code
de tu entorno local, puedes ver que la ejecución está detenida 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, la app de Chat respondaYour message : Hello
.Puedes verificar los registros de solicitud y respuesta HTTP desde la interfaz web que aloja la aplicación
ngrok
en tu entorno local.Figura 7: Es la solicitud HTTP de la interfaz web que aloja la aplicación
ngrok
.Para cambiar el comportamiento de la aplicación, reemplaza
Your message
porHere was your message
35
intercalado deindex.json
. Cuando guardas el archivo,nodemon
vuelve a cargar automáticamente la aplicación con el código fuente actualizado yVisual Studio Code
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 cargado.Esta vez, en lugar de enviar un segundo mensaje
Hello
en el espacio, puedes seleccionar la última solicitud HTTP registrada en la interfaz web alojada por la aplicaciónngrok
en tu entorno local y hacer clic enReplay
. Al igual que la última vez, la app de Chat no responde porque se está depurando de forma activa.Cuando reanudas la ejecución desde el depurador de
Visual Studio Code
, puedes ver, en la interfaz web que aloja la aplicaciónngrok
en tu entorno local, que la aplicación genera una respuesta con la versión actualizada del mensajeHere was your message : Hello
.
Python
Adquiere credenciales de usuario nuevas para usar las credenciales predeterminadas de la aplicación:
gcloud config set project PROJECT_ID gcloud auth application-default login
Reemplaza
PROJECT_ID
por el ID del proyecto de Cloud de la app.Clona el repositorio
googleworkspace/google-chat-samples
de GitHub en tu entorno local, que contiene el 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:- 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 con
pip
en el entorno virtual:pip install -r requirements.txt
Crea el archivo
.vscode/launch.json
en el directorio raíz y configura un lanzamiento llamadoDebug Watch
que active la aplicación desde el 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", "hello_chat", "--port", "9000", "--debug" ] }] }
Agrega un punto de interrupción que pause el procesamiento de solicitudes HTTP en el archivo
main.py
y comienza a ejecutar y depurar con la configuraciónDebug Watch
que se agregó antes. La aplicación está en ejecución y detecta las solicitudes HTTP en el puerto9000
.Figura 3: La aplicación está en ejecución y detecta las solicitudes HTTP 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 cuentangrok
. Ahora, todas las solicitudes se redireccionan a tu entorno local y al puerto que usa la aplicación.Figura 4: La terminal con el servidor
ngrok
en ejecución y redireccionando.La aplicación
ngrok
también inicia una interfaz web en tu host local. Puedes supervisar todas las actividades si la abres en un navegador.Figura 5: La interfaz web que aloja la aplicación
ngrok
no muestra solicitudes HTTP.Para probar tu app de Chat, envíale un mensaje directo:
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 y haz clic en Add > Chat.
En el espacio del mensaje directo, escribe
Hey!
y presionaenter
. Tu app de Chat no responde porque se está depurando de forma activa.
En el
Visual Studio Code
de tu entorno local, puedes ver que la ejecución está detenida 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 se agote el tiempo de espera de Google Chat, la app de Chat responde con tu nombre y foto de avatar en el mensaje.Puedes verificar los registros de solicitud y respuesta HTTP desde la interfaz web que aloja la aplicación
ngrok
en tu entorno local.Figura 7: Es la solicitud HTTP de la interfaz web que aloja la aplicación
ngrok
.Para cambiar el comportamiento de la aplicación, reemplaza
Hello
porHey
51
intercalado del archivomain.py
. Cuando guardas 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 cargado.Esta vez, en lugar de enviar un segundo mensaje
Hey!
en el espacio, puedes seleccionar la última solicitud HTTP registrada en la interfaz web alojada por la aplicaciónngrok
en tu entorno local y hacer clic enReplay
. Al igual que la última vez, la app de Chat no responde porque se está depurando de forma activa.Cuando reanudas la ejecución desde el depurador de
Visual Studio Code
, puedes ver en la interfaz web que aloja la aplicaciónngrok
en tu entorno local que la aplicación genera una respuesta con la versión actualizada del mensaje.
Java
Adquiere credenciales de usuario nuevas para usar las credenciales predeterminadas de la aplicación:
gcloud config set project PROJECT_ID gcloud auth application-default login
Reemplaza
PROJECT_ID
por el ID del proyecto de Cloud de la app.Clona el repositorio
googleworkspace/google-chat-samples
desde GitHub en tu entorno local, que contiene el 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:- En una ventana nueva, abre la carpeta
google-chat-samples/java/avatar-app
. Configura el proyecto de Maven para ejecutar la aplicación
HelloChat
en el puerto9000
de forma local. Para ello, agrega el complemento de compilación de Cloud Functions Frameworkfunction-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>HelloChat</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 y configura un lanzamiento llamadoRemote Debug Watch
que se conecte a la aplicación que se inició antes 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 pause el procesamiento de solicitudes HTTP en el archivo
HelloChat.java
y comienza a adjuntar y depurar con la configuraciónRemote Debug Watch
que se agregó antes. La aplicación ahora está en ejecución y detecta las solicitudes HTTP en el puerto9000
.Figura 3: La aplicación está en ejecución y detecta las solicitudes HTTP 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 cuentangrok
. Ahora, todas las solicitudes se redireccionan a tu entorno local y al puerto que usa la aplicación.Figura 4: La terminal con el servidor
ngrok
en ejecución y redireccionando.La aplicación
ngrok
también inicia una interfaz web en tu host local. Puedes supervisar todas las actividades si la abres en un navegador.Figura 5: La interfaz web que aloja la aplicación
ngrok
no muestra solicitudes HTTP.Para probar tu app de Chat, envíale un mensaje directo:
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 y haz clic en Add > Chat.
En el espacio del mensaje directo, escribe
Hey!
y presionaenter
. Tu app de Chat no responde porque se está depurando de forma activa.
En el
Visual Studio Code
de tu entorno local, puedes ver que la ejecución está detenida 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 se agote el tiempo de espera de Google Chat, la app de Chat responde con tu nombre y foto de avatar en el mensaje.Puedes verificar los registros de solicitud y respuesta HTTP desde la interfaz web que aloja la aplicación
ngrok
en tu entorno local.Figura 7: Es la solicitud HTTP de la interfaz web que aloja la aplicación
ngrok
.Para cambiar el comportamiento de la aplicación, reemplaza
Hello
porHey
intercalado55
del archivoHelloChat.java
, reinicia el procesomvnDebug
y reiniciaRemote Debug Watch
para volver a adjuntar y reiniciar la depuración.Esta vez, en lugar de enviar un segundo mensaje
Hey!
en el espacio, puedes seleccionar la última solicitud HTTP registrada en la interfaz web alojada por la aplicaciónngrok
en tu entorno local y hacer clic enReplay
. Al igual que la última vez, la app de Chat no responde porque se está depurando de forma activa.Cuando reanudas la ejecución desde el depurador de
Visual Studio Code
, puedes ver en la interfaz web que aloja la aplicaciónngrok
en tu entorno local que la aplicación genera una respuesta con la versión actualizada del mensaje.
Depurar desde un entorno remoto
En esta sección, interactuarás con tu 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 seguir la sección Prueba tu app de Chat de la Guía de inicio rápido y buscar la app de 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. En esta guía, usamos el IDE de
Visual Studio Code
y sus funciones de depuración predeterminadas con fines ilustrativos.
Conecta tus entornos locales y remotos
En tu entorno local desde el que deseas iniciar una conexión de cliente de depuración, 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 el entorno local.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 en el entorno remoto.
El puerto de depuración en tu entorno local ahora está vinculado al puerto de depuración en tu entorno remoto.
Cómo iniciar la depuración
Desde el IDE de Visual Studio Code
instalado en tu entorno local, haz 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 un lanzamiento llamadoDebug Remote
que se conecte al puerto de depuración en tu entorno 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 }] }
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 pause el procesamiento de solicitudes HTTP y comienza a ejecutar y depurar con la configuración
Debug Remote
que agregaste antes.
En el espacio de mensaje directo con tu app de Chat, escribe
lo que quieras probar y presiona enter
. Tu app de Chat no responde porque se está depurando de forma activa en el IDE de Visual Studio Code
.
Temas relacionados
- Aprende a enable y consultar los registros de errores.
- Aprende a corregir errores de la app de Google Chat, como “La app no responde”, “La API de Google Chat solo está disponible para los usuarios de Google Workspace” o “Los usuarios pueden excluirse de los espacios”.
- Descubre cómo corregir errores de tarjetas, como los mensajes de tarjetas, los diálogos o las vistas previas de vínculos, que no se renderizan o no funcionan según lo esperado.