Se usó la API de Cloud Translation para traducir esta página.

Cómo depurar apps de Google Chat

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 su arquitectura, lo que 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 locales. En esta guía, probarás los cambios de código en un entorno local y solucionarás problemas en un entorno remoto.

Depurar desde el entorno de desarrollo local

En esta sección, interactuarás con la app de Chat, que se ejecuta en tu entorno local.

Depurar desde un entorno de desarrollo local

Figura 1. Depurar en un entorno de desarrollo local

Taller

Node.js

Python

Java

Requisitos previos

Node.js

Las versiones más recientes de node y npm 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 mensajería. Puedes seguir las secciones Requisitos previos, Cómo configurar 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 cualquier valor, como http://example.com.
Un IDE configurado en tu entorno local que pueda depurarse. 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 y virtualenv instaladas en el entorno local, se usan para administrar paquetes de Python y entornos virtuales, respectivamente.
Una app de chat HTTP configurada para mensajería. Puedes seguir las secciones Requisitos previos, Cómo configurar 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 cualquier valor, como http://example.com.
Un IDE configurado en tu entorno local que pueda depurarse. 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 inicializa 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 el entorno local, que se usa para administrar proyectos de Java.
Una app de chat HTTP configurada para mensajería. Puedes seguir las secciones Requisitos previos, Cómo configurar 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 cualquier valor, como http://example.com.
Un IDE configurado en tu entorno local que pueda depurarse. 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 inicializa en tu entorno local

Haz que el servicio de localhost esté disponible públicamente

Debes conectar tu entorno local a Internet para que la app de Chat pueda acceder a él. La aplicación ngrok se usa para redireccionar las solicitudes HTTP realizadas a una URL pública hacia tu entorno local.

En un navegador en 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, al que se hace referencia como NGROK_STATIC_DOMAIN en las instrucciones de esta guía.

Configura la app de Chat

Configura la app de Chat para enviar 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:

Ir a 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 de la siguiente manera:
```
https://NGROK_STATIC_DOMAIN
```
Reemplaza NGROK_STATIC_DOMAIN por el dominio estático en tu cuenta ngrok.
Haz clic en Guardar.

La app de Chat envía todas sus solicitudes HTTP al dominio estático

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 a tu entorno local, que contiene el código de la aplicación que se ejecutará:
```
git clone https://github.com/googleworkspace/google-chat-samples.git
```
Desde el IDE Visual Studio Code instalado en tu entorno local, haz lo siguiente:
1. En una ventana nueva, abre la carpeta google-chat-samples/node/basic-app.
2. Para configurar la aplicación de la depuración automáticamente, agrega dos secuencias de comandos en el archivo package.json:
```
{
    ...
    "scripts": {
        ...
        "debug": "node --inspect index.js",
        "debug-watch": "nodemon --watch ./ --exec npm run debug"
    }
    ...
}
```
3. Desde el directorio raíz, instala la aplicación:
```
npm install
```
4. Crea y configura un lanzamiento llamado Debug Watch que active la secuencia de comandos debug-watch. Para ello, crea el 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"]
    }]
}
```
5. Agrega un punto de interrupción que detenga el procesamiento de la solicitud HTTP en el archivo index.js y comienza a ejecutarse y depurar con la configuración de Debug Watch que se agregó antes. Ahora, la aplicación está en ejecución y detecta las solicitudes HTTP en el puerto 9000.
  
  Figura 3: La aplicación está en ejecución y detecta las solicitudes HTTP en el puerto 9000.
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 ngrok. 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 redirigiendo.
La aplicación ngrok también inicia una interfaz web en tu localhost. Puedes supervisar todas las actividades si la abres en un navegador.

Figura 5: La interfaz web que aloja la aplicación ngrok, que no muestra solicitudes HTTP.
Envía un mensaje directo a tu app de Chat:
- Abre Google Chat.
  
  Ir a Google Chat
- Haz clic en Nuevo 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 presiona enter. Tu app de Chat no responde porque se está depurando de forma activa.
En la Visual Studio Code de tu entorno local, puedes ver que la ejecución se detiene en el punto de interrupción que se estableció.

Figura 6: La ejecución se pausa 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 responde a Your 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: La solicitud HTTP de la interfaz web que aloja la aplicación ngrok.
Para cambiar el comportamiento de la aplicación, reemplaza Your message por Here was your message intercalado 35 de index.json. Cuando guardas el archivo, nodemon vuelve a cargar automáticamente la aplicación con el código fuente actualizado, y Visual Studio Code permanece en modo de depuración.

Figura 8: La aplicación está en ejecución y detecta las 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 que aloja la aplicación ngrok en tu entorno local y hacer clic en Replay. Igual que la última vez, tu 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ón ngrok en tu entorno local que la aplicación genera una respuesta con la versión actualizada del mensaje Here 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, ya que contiene el código de la aplicación:
```
git clone https://github.com/googleworkspace/google-chat-samples.git
```
Desde el IDE Visual Studio Code instalado en tu entorno local, haz lo siguiente:
1. En una ventana nueva, abre la carpeta google-chat-samples/python/avatar-app.
2. Crea un entorno virtual nuevo para Python env y actívalo:
```
virtualenv env
source env/bin/activate
```
3. Instala todas las dependencias del proyecto con pip en el entorno virtual:
```
pip install -r requirements.txt
```
4. Crea el archivo .vscode/launch.json en el directorio raíz y configura un lanzamiento llamado Debug Watch que active la aplicación desde el módulo functions-framework en el puerto 9000 en modo de depuración en el entorno virtual env:
```
{
    "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"
        ]
    }]
}
```
5. Agrega un punto de interrupción que detenga el procesamiento de la solicitud HTTP en el archivo main.py y comienza a ejecutarse y depurar con la configuración de Debug Watch que se agregó antes. Ahora, la aplicación está en ejecución y detecta las solicitudes HTTP en el puerto 9000.
  
  Figura 3: La aplicación está en ejecución y detecta las solicitudes HTTP en el puerto 9000.
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 ngrok. 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 redirigiendo.
La aplicación ngrok también inicia una interfaz web en tu localhost. Puedes supervisar todas las actividades si la abres en un navegador.

Figura 5: La interfaz web que aloja la aplicación ngrok, que no muestra solicitudes HTTP.
Envía un mensaje directo a tu app de Chat:
- Abre Google Chat.
  
  Ir a Google Chat
- Haz clic en Nuevo 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 presiona enter. Tu app de Chat no responde porque se está depurando de forma activa.
En la Visual Studio Code de tu entorno local, puedes ver que la ejecución se detiene en el punto de interrupción que se estableció.

Figura 6: La ejecución se pausa 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 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: La solicitud HTTP de la interfaz web que aloja la aplicación ngrok.
Para cambiar el comportamiento de la aplicación, reemplaza Hello por Hey intercalado 51 del archivo main.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 está en ejecución y detecta las 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 que aloja la aplicación ngrok en tu entorno local y hacer clic en Replay. Igual que la última vez, tu 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ón ngrok 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 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 Visual Studio Code instalado en tu entorno local, haz lo siguiente:
1. En una ventana nueva, abre la carpeta google-chat-samples/java/avatar-app.
2. Configura el proyecto de Maven para ejecutar la aplicación HelloChat en el puerto 9000 de forma local. Para ello, agrega el complemento de compilación function-maven-plugin de Cloud Functions Framework en el archivo pom.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>
...
```
3. Ahora puedes iniciarlo localmente en modo de depuración:
```
mvnDebug function:run
Preparing to execute Maven in debug mode
Listening for transport dt_socket at address: 8000
```
4. Crea el archivo .vscode/launch.json en el directorio raíz y configura un lanzamiento llamado Remote Debug Watch que se conecte a la aplicación que se inició con el puerto 8000:
```
{
    "version": "0.2.0",
    "configurations": [{
        "type": "java",
        "request": "attach",
        "name": "Remote Debug Watch",
        "projectName": "http-function",
        "hostName": "localhost",
        "port": 8000
    }]
}
```
5. Agrega un punto de interrupción que detenga el procesamiento de la solicitud HTTP en el archivo HelloChat.java y comienza a adjuntar y depurar con la configuración Remote Debug Watch que se agregó antes. Ahora, la aplicación está en ejecución y detecta las solicitudes HTTP en el puerto 9000.
  
  Figura 3: La aplicación está en ejecución y detecta las solicitudes HTTP en el puerto 9000
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 ngrok. 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 redirigiendo.
La aplicación ngrok también inicia una interfaz web en tu localhost. Puedes supervisar todas las actividades si la abres en un navegador.

Figura 5: La interfaz web que aloja la aplicación ngrok, que no muestra solicitudes HTTP.
Envía un mensaje directo a tu app de Chat:
- Abre Google Chat.
  
  Ir a Google Chat
- Haz clic en Nuevo 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 presiona enter. Tu app de Chat no responde porque se está depurando de forma activa.
En la Visual Studio Code de tu entorno local, puedes ver que la ejecución se detiene en el punto de interrupción que se estableció.

Figura 6: La ejecución se pausa 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 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: La solicitud HTTP de la interfaz web que aloja la aplicación ngrok.
Para cambiar el comportamiento de la aplicación, reemplaza Hello por Hey intercalado 55 del archivo HelloChat.java, reinicia el proceso mvnDebug y reinicia Remote Debug Watch para volver a conectar 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 que aloja la aplicación ngrok en tu entorno local y hacer clic en Replay. Igual que la última vez, tu 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ón ngrok 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.

Depurar desde un entorno remoto

Figura 9: Depurar desde un entorno remoto

Requisitos previos

Un espacio de mensajes directos con tu app de Chat. Puedes seguir la sección Cómo probar tu app de Chat de la Guía de inicio rápido y buscar tu app de Chat para iniciar una.
La aplicación que se ejecuta en el entorno remoto con el depurador habilitado en un puerto determinado se menciona como REMOTE_DEBUG_PORT en las instrucciones de esta guía.
Tu entorno local puede ssh al entorno remoto.
Un IDE configurado en tu entorno local que pueda depurarse. Usamos el IDE de Visual Studio Code y sus funciones de depuración predeterminadas en esta guía 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 tu entorno local.
REMOTE_USERNAME: Es el nombre de usuario en tu entorno remoto.
REMOTE_ADDRESS: Es la dirección de tu entorno remoto.
REMOTE_DEBUG_PORT: Es el puerto de depuración en tu entorno remoto.

El puerto de depuración de tu entorno local ahora está vinculado al puerto de depuración de 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 tu app.

Crea el archivo .vscode/launch.json en el directorio raíz y configura un lanzamiento llamado Debug 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 detenga el procesamiento de solicitudes HTTP y comienza a ejecutar y depurar con la configuración Debug Remote que se agregó antes.

En el espacio de mensajes directos con tu app de Chat, escribe lo que quieras probar y presiona enter. Tu app de Chat no responde porque se depura activamente en el IDE de Visual Studio Code.

Temas relacionados

Aprende a enable y consultar los registros de errores.
Aprende a solucionar 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 “Se pueden excluir usuarios de los espacios”.
Obtén información para corregir errores de tarjetas, como mensajes de tarjetas, diálogos o vistas previas de vínculos que no se procesan o no funcionan como se espera.