In qualità di sviluppatore di app Google Chat, potresti dover eseguire il debug del codice per verificare le modifiche o risolvere problemi complessi. Il debug delle app di Chat può essere eseguito in molti modi diversi, a seconda dell'architettura dell'app, della sua funzionalità, del modo in cui viene implementata e delle tue preferenze.
Questa pagina spiega come eseguire il debug di un'app HTTP Chat utilizzando ngrok, una piattaforma di ingresso unificata che puoi utilizzare per testare gli ambienti di sviluppo locale. In questa guida, testerai le modifiche al codice in un ambiente locale e risolverai i problemi in un ambiente remoto.
Eseguire il debug dall'ambiente di sviluppo locale
In questa sezione, interagisci con l'app Chat che viene eseguita nel tuo ambiente locale.
Figura 1. Esegui il debug in un ambiente di sviluppo locale.
Officina
Node.js
Python
Java
Prerequisiti
Node.js
- Le versioni più recenti di
node
enpm
installate nel tuo ambiente locale. La versione più recente di
nodemon
installata nel tuo ambiente locale viene utilizzata per il ricaricamento automatico:npm install -g nodemon
Un'app Chat HTTP configurata per la messaggistica. Puoi seguire le sezioni Prerequisiti, Configurare l'ambiente e Pubblicare l'app in Google Chat della Guida rapida. Le uniche differenze sono che devi impostare il Nome app su
Debug App
e l'URL dell'endpoint HTTP su un valore ad esempiohttp://example.com
.Un IDE configurato nel tuo ambiente locale che può eseguire il debug. In questa guida utilizziamo IDE
Visual Studio Code
e le sue funzionalità di debug predefinite a scopo illustrativo.Git
installato nel tuo ambiente locale.Un account
ngrok
.
Python
- La versione più recente di
python3
installata nel tuo ambiente locale. - La versione più recente di
pip
evirtualenv
installata nel ambiente locale, vengono utilizzati rispettivamente per gestire i pacchetti Python e gli ambienti virtuali. - Un'app di chat HTTP configurata per
la messaggistica. Puoi seguire le sezioni Prerequisiti, Configurare l'ambiente e Pubblicare l'app in Google Chat della Guida rapida. Le uniche differenze sono che devi impostare Nome app su
Debug App
e URL endpoint HTTP su un valore qualsiasi, ad esempiohttp://example.com
. - Un IDE configurato nel tuo ambiente locale che può eseguire il debug. Utilizziamo l'IDE
Visual Studio Code
e le sue funzionalità di debug predefinite in questa guida a scopo illustrativo. Git
installato nel tuo ambiente locale.- Un account
ngrok
. - La versione più recente di
gcloud
installata e inizializzata nel tuo ambiente locale.
Java
- Ultima versione stabile di
Java SE 11's JDK
installata nel tuo ambiente locale. - La versione più recente di
Apache Maven
installata nel tuo ambiente locale, viene utilizzata per gestire i progetti Java. - Un'app di chat HTTP configurata per
la messaggistica. Puoi seguire le sezioni
Prerequisiti,
Configurare l'ambiente
e Pubblicare l'app su Google
Chat della
Guida rapida. Le uniche differenze sono che devi impostare Nome app su
Debug App
e URL endpoint HTTP su un valore qualsiasi, ad esempiohttp://example.com
. - Un IDE configurato nel tuo ambiente locale che può eseguire il debug. In questa guida utilizziamo IDE
Visual Studio Code
e le sue funzionalità di debug predefinite a scopo illustrativo. Git
installato nel tuo ambiente locale.- Un account
ngrok
. - La versione più recente di
gcloud
installata e inizializzata nel tuo ambiente locale.
Rendi disponibile pubblicamente il servizio localhost
Per accedere all'app Chat, devi connettere il tuo ambiente locale a internet. L'applicazione ngrok
viene utilizzata per reindirizzare le richieste HTTP effettuate a un URL pubblico al tuo ambiente locale.
- In un browser nel tuo ambiente locale, accedi al tuo account
ngrok
. - Installa l'applicazione e configura
authtoken
nel tuo ambiente locale. - Crea un dominio statico nel tuo account
ngrok
. Nelle istruzioni di questa guida viene indicato comeNGROK_STATIC_DOMAIN
.
Configurare l'app Chat
Configura l'app Chat in modo che invii tutte le richieste HTTP al tuo dominio statico.
Nella console Google Cloud, apri la pagina dell'API Google Chat:
Fai clic sulla scheda Configuration (Configurazione).
Vai a Funzionalità interattive > Impostazioni di connessione e imposta il valore del campo di testo URL endpoint HTTP su:
https://NGROK_STATIC_DOMAIN
Sostituisci
NGROK_STATIC_DOMAIN
con il dominio statico nel tuo accountngrok
.Fai clic su Salva.
Figura 2. L'app Chat invia tutte le sue richieste HTTP
al dominio statico. Il servizio pubblico ngrok
funge da ponte tra l'app Chat e il codice dell'applicazione che viene eseguito localmente.
Testare l'app Chat
Puoi eseguire il deployment, configurare, testare, eseguire il debug e ricaricare automaticamente la tua app Chat localmente.
Node.js
Clona il repository
googleworkspace/google-chat-samples
da GitHub nel tuo ambiente locale, contiene il codice dell'applicazione da eseguire:git clone https://github.com/googleworkspace/google-chat-samples.git
Nell'IDE
Visual Studio Code
installato nel tuo ambiente locale, segui questi passaggi:- In una nuova finestra, apri la cartella
google-chat-samples/node/basic-app
. Configura l'applicazione per il debug di ricarica automatica aggiungendo due script nel file
package.json
:{ ... "scripts": { ... "debug": "node --inspect index.js", "debug-watch": "nodemon --watch ./ --exec npm run debug" } ... }
Dalla directory principale, installa l'applicazione:
npm install
Crea e configura un lancio denominato
Debug Watch
che attivi lo scriptdebug-watch
creando il file.vscode/launch.json
nella directory principale:{ "version": "0.2.0", "configurations": [{ "type": "node", "request": "launch", "name": "Debug Watch", "cwd": "${workspaceRoot}", "runtimeExecutable": "npm", "runtimeArgs": ["run-script", "debug-watch"] }] }
Aggiungi un punto di interruzione che metta in pausa l'elaborazione della richiesta HTTP nel
index.js
file e avvia l'esecuzione e il debugging con la configurazioneDebug Watch
aggiunta in precedenza. Ora l'applicazione è in esecuzione e rimane in ascolto delle richieste HTTP sulla porta9000
.Figura 3. L'applicazione è in esecuzione e rimane in ascolto delle richieste HTTP sulla porta
9000
.
- In una nuova finestra, apri la cartella
Avvia l'applicazione
ngrok
nel tuo ambiente locale:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
Sostituisci
NGROK_STATIC_DOMAIN
con il dominio statico nel tuo accountngrok
. Ora tutte le richieste vengono reindirizzate all'ambiente locale e alla porta utilizzata dall'applicazione.Figura 4. Il terminale con il server
ngrok
in esecuzione e il reindirizzamento.L'applicazione
ngrok
avvia anche un'interfaccia web su localhost, che puoi monitorare in un browser.Figura 5. L'interfaccia web ospitata dall'applicazione
ngrok
non mostra richieste HTTP.Prova l'app Chat inviandole un messaggio diretto:
Apri Google Chat.
Fai clic su Nuova chat
.Nella finestra di dialogo, inserisci il nome della tua app Chat.
Nei risultati di ricerca, trova l'app Chat e fai clic su Aggiungi > Chat.
Nello spazio dei messaggi diretti, digita
Hello
e premienter
. L'app Chat non risponde perché è in fase di debug attivo.
In
Visual Studio Code
nel tuo ambiente locale, puoi vedere che l'esecuzione è in pausa nel punto di interruzione impostato.Figura 6. L'esecuzione è in pausa nel punto di interruzione impostato.
Quando riprendi l'esecuzione dal debugger di
Visual Studio Code
prima che Google Chat scada, l'app Chat rispondeYour message : Hello
.Puoi controllare i log delle richieste e delle risposte HTTP dall'interfaccia web ospitata dall'applicazione
ngrok
nel tuo ambiente locale.Figura 7. La richiesta HTTP dall'interfaccia web ospitata dall'applicazione
ngrok
.Per modificare il comportamento dell'applicazione, sostituisci
Your message
conHere was your message
35
in linea delindex.json
. Quando salvi il file,nodemon
ricarica automaticamente l'applicazione con il codice sorgente aggiornato e rimane in modalità di debug.Visual Studio Code
Figura 8. L'applicazione è in esecuzione e rimane in attesa di richieste HTTP sulla porta
9000
con la modifica del codice caricata.Questa volta, invece di inviare un secondo messaggio
Hello
nello spazio, puoi selezionare l'ultima richiesta HTTP registrata nell'interfaccia web ospitata dall'applicazionengrok
nel tuo ambiente locale e fare clic suReplay
. Come la volta scorsa, l'app Chat non risponde perché è in corso il debug.Quando riprendi l'esecuzione dal debugger di
Visual Studio Code
, puoi vedere dall'interfaccia web ospitata dall'applicazionengrok
nel tuo ambiente locale che l'applicazione genera una risposta con la versione aggiornata del messaggioHere was your message : Hello
.
Python
Acquisisci nuove credenziali utente da utilizzare per le Credenziali predefinite dell'applicazione:
gcloud config set project PROJECT_ID
gcloud auth application-default login
Sostituisci
PROJECT_ID
con l'ID progetto per il progetto Cloud dell'app.Clona il repository
googleworkspace/google-chat-samples
da GitHub nel tuo ambiente locale, contiene il codice dell'applicazione:git clone https://github.com/googleworkspace/google-chat-samples.git
Dall'IDE
Visual Studio Code
installato nel tuo ambiente locale:- In una nuova finestra, apri la cartella
google-chat-samples/python/avatar-app
. Crea un nuovo ambiente virtuale per Python
env
e attivalo:virtualenv env
source env/bin/activate
Installa tutte le dipendenze del progetto utilizzando
pip
nell'ambiente virtuale:pip install -r requirements.txt
Crea il file
.vscode/launch.json
nella directory principale e configura un lancio denominatoDebug Watch
che attivi l'applicazione dal modulofunctions-framework
sulla porta9000
in modalità di debug nell'ambiente virtualeenv
:{ "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" ] }] }
Aggiungi un punto di interruzione che metta in pausa l'elaborazione della richiesta HTTP nel
main.py
file e avvia l'esecuzione e il debugging con la configurazioneDebug Watch
aggiunta in precedenza. Ora l'applicazione è in esecuzione e rimane in ascolto delle richieste HTTP sulla porta9000
.Figura 3. L'applicazione è in esecuzione e rimane in ascolto delle richieste HTTP sulla porta
9000
.
- In una nuova finestra, apri la cartella
Avvia l'applicazione
ngrok
nel tuo ambiente locale:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
Sostituisci
NGROK_STATIC_DOMAIN
con il dominio statico nel tuo accountngrok
. Ora tutte le richieste vengono reindirizzate all'ambiente locale e alla porta utilizzata dall'applicazione.Figura 4. Il terminale con il server
ngrok
in esecuzione e il reindirizzamento.L'applicazione
ngrok
avvia anche un'interfaccia web su localhost, che puoi monitorare in un browser.Figura 5. L'interfaccia web ospitata dall'applicazione
ngrok
non mostra richieste HTTP.Prova l'app Chat inviandole un messaggio diretto:
Apri Google Chat.
Fai clic su Nuova chat
.Nella finestra di dialogo, inserisci il nome della tua app Chat.
Nei risultati di ricerca, individua l'app Chat, fai clic su Aggiungi > Chat.
Nello spazio del messaggio diretto, digita
Hey!
e premienter
. L'app Chat non risponde perché è in corso il debug attivo.
In
Visual Studio Code
nel tuo ambiente locale, puoi vedere che l'esecuzione è in pausa nel punto di interruzione impostato.Figura 6. L'esecuzione è in pausa nel punto di interruzione impostato.
Quando riprendi l'esecuzione dal debugger di
Visual Studio Code
prima che Google Chat scada, l'app Chat risponde con il tuo nome e la tua immagine avatar nel messaggio.Puoi controllare i log delle richieste e delle risposte HTTP dall'interfaccia web ospitata dall'applicazione
ngrok
nel tuo ambiente locale.Figura 7. La richiesta HTTP dall'interfaccia web ospitata dall'applicazione
ngrok
.Per modificare il comportamento dell'applicazione, sostituisci
Hello
conHey
in linea51
del filemain.py
. Quando salvi il file,Visual Studio Code
ricarica automaticamente l'applicazione con il codice sorgente aggiornato e rimane in modalità di debug.Figura 8. L'applicazione è in esecuzione e rimane in ascolto delle richieste HTTP sulla porta
9000
con la modifica del codice caricata.Questa volta, anziché inviare un secondo messaggio
Hey!
nello spazio, puoi selezionare l'ultima richiesta HTTP registrata nell'interfaccia web ospitata dall'applicazionengrok
nel tuo ambiente locale e fare clic suReplay
. Come la volta scorsa, l'app Chat non risponde perché è in corso il debug.Quando riprendi l'esecuzione dal debugger di
Visual Studio Code
, puoi vedere dall'interfaccia web ospitata dall'applicazionengrok
nel tuo ambiente locale che l'applicazione genera una risposta con la versione aggiornata del messaggio.
Java
Acquisisci nuove credenziali utente da utilizzare per le Credenziali predefinite dell'applicazione:
gcloud config set project PROJECT_ID
gcloud auth application-default login
Sostituisci
PROJECT_ID
con l'ID progetto del progetto Cloud dell'app.Clona il repository
googleworkspace/google-chat-samples
da GitHub nel tuo ambiente locale, contiene il codice dell'applicazione:git clone https://github.com/googleworkspace/google-chat-samples.git
Dall'IDE
Visual Studio Code
installato nel tuo ambiente locale:- In una nuova finestra, apri la cartella
google-chat-samples/java/avatar-app
. Configura il progetto Maven in modo da eseguire l'applicazione
App
sulla porta9000
in locale aggiungendo il plug-in di compilazione del framework Cloud Functionsfunction-maven-plugin
nel filepom.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> ...
Ora puoi avviarlo localmente in modalità di debug:
mvnDebug function:run Preparing to execute Maven in debug mode Listening for transport dt_socket at address: 8000
Crea il file
.vscode/launch.json
nella directory principale e configura un avvio denominatoRemote Debug Watch
che si connette all'applicazione lanciata in precedenza con la porta8000
:{ "version": "0.2.0", "configurations": [{ "type": "java", "request": "attach", "name": "Remote Debug Watch", "projectName": "http-function", "hostName": "localhost", "port": 8000 }] }
Aggiungi un punto di interruzione che mette in pausa l'elaborazione della richiesta HTTP nel file
App.java
e avvia il collegamento e il debug con la configurazioneRemote Debug Watch
aggiunta in precedenza. Ora l'applicazione è in esecuzione e rimane in ascolto delle richieste HTTP sulla porta9000
.Figura 3. L'applicazione è in esecuzione e rimane in ascolto delle richieste HTTP sulla porta
9000
.
- In una nuova finestra, apri la cartella
Avvia l'applicazione
ngrok
nel tuo ambiente locale:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
Sostituisci
NGROK_STATIC_DOMAIN
con il dominio statico nel tuo accountngrok
. Ora tutte le richieste vengono reindirizzate all'ambiente locale e alla porta utilizzata dall'applicazione.Figura 4. Il terminale con il server
ngrok
in esecuzione e il reindirizzamento.L'applicazione
ngrok
avvia anche un'interfaccia web su localhost, che puoi monitorare in un browser.Figura 5. L'interfaccia web ospitata dall'applicazione
ngrok
non mostra richieste HTTP.Prova l'app Chat inviandole un messaggio diretto:
Apri Google Chat.
Fai clic su Nuova chat
.Nella finestra di dialogo, inserisci il nome della tua app Chat.
Nei risultati di ricerca, trova l'app Chat e fai clic su Aggiungi > Chat.
Nello spazio dei messaggi diretti, digita
Hey!
e premienter
. L'app Chat non risponde perché è in corso il debug attivo.
In
Visual Studio Code
nel tuo ambiente locale, puoi vedere che l'esecuzione è in pausa nel punto di interruzione impostato.Figura 6. L'esecuzione è in pausa nel punto di interruzione impostato.
Quando riprendi l'esecuzione dal debugger di
Visual Studio Code
prima che Google Chat scada, l'app Chat risponde con il tuo nome e la tua immagine avatar nel messaggio.Puoi controllare i log delle richieste e delle risposte HTTP dall'interfaccia web ospitata dall'applicazione
ngrok
nel tuo ambiente locale.Figura 7. La richiesta HTTP dall'interfaccia web ospitata dall'applicazione
ngrok
.Per modificare il comportamento dell'applicazione, sostituisci
Hello
conHey
in linea55
del fileApp.java
, riavvia il processomvnDebug
e riavviaRemote Debug Watch
per riattaccare e riavviare il debug.Questa volta, invece di inviare un secondo messaggio
Hey!
nello spazio, puoi selezionare l'ultima richiesta HTTP registrata nell'interfaccia web ospitata dall'applicazionengrok
nel tuo ambiente locale e fare clic suReplay
. Come la volta scorsa, l'app Chat non risponde perché è in corso il debug.Quando riprendi l'esecuzione dal debugger di
Visual Studio Code
puoi vedere dall'interfaccia web ospitata dall'applicazionengrok
nel tuo ambiente locale che l'applicazione genera una risposta con la versione aggiornata del messaggio.
Eseguire il debug dall'ambiente remoto
In questa sezione, interagisci con la tua app Chat che viene eseguita in un ambiente remoto.
Figura 9. Debug da ambiente remoto.
Prerequisiti
- Uno spazio di messaggi diretti con la tua app Chat. Puoi seguire la sezione Testare l'app Chat della guida rapida e cercare la tua app Chat per avviarne una.
- L'applicazione in esecuzione nell'ambiente remoto con il debugger abilitato su una determinata porta è indicata come
REMOTE_DEBUG_PORT
nelle istruzioni di questa guida. - Il tuo ambiente locale può
ssh
all'ambiente remoto. - Un IDE configurato nel tuo ambiente locale che può eseguire il debug. Utilizziamo l'IDE
Visual Studio Code
e le sue funzionalità di debug predefinite in questa guida a scopo illustrativo.
Connetti i tuoi ambienti locali e remoti
Nell'ambiente locale da cui vuoi avviare una connessione del client di debug, configura un tunnel SSH:
ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS
Sostituisci quanto segue:
LOCAL_DEBUG_PORT
: la porta di debug nell'ambiente locale.REMOTE_USERNAME
: il nome utente nell'ambiente remoto.REMOTE_ADDRESS
: l'indirizzo del tuo ambiente remoto.REMOTE_DEBUG_PORT
: la porta di debug nell'ambiente remoto.
La porta di debug nel tuo ambiente locale è ora collegata alla porta di debug nel tuo ambiente remoto.
Avvia debug
Nell'IDE Visual Studio Code
installato nel tuo ambiente locale, svolgi quanto segue:
- In una nuova finestra, apri il codice sorgente dell'app.
Crea il file
.vscode/launch.json
nella directory principale e configura un lancio denominatoDebug Remote
che si connette alla porta di debug nel tuo ambiente locale: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 }] }
Sostituisci
LOCAL_DEBUG_PORT
con la porta di debug nel tuo ambiente locale.Aggiungi un punto di interruzione nel codice sorgente della tua app che mette in pausa l'elaborazione delle richieste HTTP e avvia l'esecuzione e il debug con la configurazione
Debug Remote
aggiunta in precedenza.
Nello spazio dei messaggi diretti dell'app Chat, digita qualsiasi cosa tu voglia testare e premi enter
. L'app Chat non risponde perché è in fase di debug attivo nell'IDE Visual Studio Code
.
Argomenti correlati
- Scopri come attivare e eseguire query sui log degli errori.
- Scopri come correggere gli errori dell'app Google Chat, ad esempio "L'app non risponde", "L'API Google Chat è disponibile solo per gli utenti di Google Workspace" o "Gli utenti possono essere esclusi dagli spazi".
- Scopri come correggere gli errori delle schede, ad esempio i messaggi, le finestre di dialogo o le anteprime dei link che non vengono visualizzati o non funzionano come previsto.