In qualità di sviluppatore di app Google Chat, potresti dover eseguire il debug del codice per testare 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, delle funzioni dell'app, del modo in cui viene eseguito il deployment dell'app e delle tue preferenze.
In questa pagina viene spiegato come eseguire il debug di un'app di chat HTTP utilizzando ngrok, una piattaforma in entrata unificata che puoi utilizzare per testare gli ambienti di sviluppo locali. In questa guida testerai le modifiche al codice in un ambiente locale e risolverai i problemi in un ambiente remoto.
Debug dall'ambiente di sviluppo locale
In questa sezione interagisci con l'app di 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 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 il Nome app su
Debug App
e l'URL dell'app su un valore comehttp://example.com
.Un IDE configurato nel tuo ambiente locale in grado di 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
.
Python
- La versione più recente di
python3
installata nel tuo ambiente locale. - La versione più recente di
pip
evirtualenv
installate nel tuo ambiente locale vengono utilizzate per gestire rispettivamente 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 su Google Chat della Guida rapida. Le uniche
differenze sono che devi impostare il Nome app su
Debug App
e l'URL dell'app su un valore comehttp://example.com
. - Un IDE configurato nel tuo ambiente locale in grado di 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 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 il Nome app su
Debug App
e l'URL dell'app su un valore comehttp://example.com
. - Un IDE configurato nel tuo ambiente locale in grado di 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.
Rendi il servizio localhost disponibile pubblicamente
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 nel 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 sue 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 applicazione 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 eseguito localmente.
Testare l'app Chat
Puoi eseguire il deployment, configurare, testare, eseguire il debug e ricaricare automaticamente l'app Chat in locale.
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
Dall'IDE
Visual Studio Code
installato nel tuo ambiente locale:- In una nuova finestra, apri la cartella
google-chat-samples/node/basic-app
. Configura l'applicazione per il debug del ricaricamento automatico aggiungendo due script nel file
package.json
:{ ... "scripts": { ... "debug": "node --inspect index.js", "debug-watch": "nodemon --watch ./ --exec npm run debug" } ... }
Installa l'applicazione dalla directory root:
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 mette in pausa l'elaborazione della richiesta HTTP nel file
index.js
e avvia l'esecuzione e il debug con la configurazioneDebug Watch
aggiunta in precedenza. Ora l'applicazione è in esecuzione e 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
. Tutte le richieste vengono ora reindirizzate al tuo ambiente locale e alla porta utilizzata dall'applicazione.Figura 4. Il terminale con il server
ngrok
in esecuzione e reindirizzato.Un'interfaccia web viene avviata anche sul tuo localhost dall'applicazione
ngrok
; puoi monitorare tutte le attività aprendola in un browser.Figura 5. L'interfaccia web ospitata dall'applicazione
ngrok
in cui non vengono mostrate richieste HTTP.Testa 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 del messaggio diretto, digita
Hello
e premienter
. L'app Chat non risponde perché è in fase di debug attivo.
In
Visual Studio Code
del tuo ambiente locale, puoi notare 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
incorporato diindex.json
. Quando salvi il file,nodemon
ricarica automaticamente l'applicazione con il codice sorgente aggiornato eVisual Studio Code
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
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 l'ultima volta, l'app Chat non risponde perché è in fase di debug attivo.Quando riprendi l'esecuzione dal debugger di
Visual Studio Code
, puoi vedere nell'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 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/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 attiva l'applicazione dal modulofunctions-framework
sulla porta9000
in modalità di debug sull'ambiente virtualeenv
:{ "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" ] }] }
Aggiungi un punto di interruzione che mette in pausa l'elaborazione della richiesta HTTP nel file
main.py
e avvia l'esecuzione e il debug con la configurazioneDebug Watch
aggiunta in precedenza. Ora l'applicazione è in esecuzione e 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
. Tutte le richieste vengono ora reindirizzate al tuo ambiente locale e alla porta utilizzata dall'applicazione.Figura 4. Il terminale con il server
ngrok
in esecuzione e reindirizzato.Un'interfaccia web viene avviata anche sul tuo localhost dall'applicazione
ngrok
; puoi monitorare tutte le attività aprendola in un browser.Figura 5. L'interfaccia web ospitata dall'applicazione
ngrok
in cui non vengono mostrate richieste HTTP.Testa 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 del messaggio diretto, digita
Hey!
e premienter
. L'app Chat non risponde perché è in fase di debug attivo.
In
Visual Studio Code
del tuo ambiente locale, puoi notare 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 dell'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 l'ultima volta, l'app Chat non risponde perché è in fase di debug attivo.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 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 per eseguire in locale l'applicazione
HelloChat
sulla porta9000
aggiungendo il plug-in di build 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>HelloChat</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 root e configura un lancio denominatoRemote Debug Watch
che si collega all'applicazione avviata 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
HelloChat.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
. Tutte le richieste vengono ora reindirizzate al tuo ambiente locale e alla porta utilizzata dall'applicazione.Figura 4. Il terminale con il server
ngrok
in esecuzione e reindirizzato.Un'interfaccia web viene avviata anche sul tuo localhost dall'applicazione
ngrok
; puoi monitorare tutte le attività aprendola in un browser.Figura 5. L'interfaccia web ospitata dall'applicazione
ngrok
in cui non vengono mostrate richieste HTTP.Testa 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 del messaggio diretto, digita
Hey!
e premienter
. L'app Chat non risponde perché è in fase di debug attivo.
In
Visual Studio Code
del tuo ambiente locale, puoi notare 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 dell'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
incorporato55
del fileHelloChat.java
, riavvia il processomvnDebug
e riavviaRemote Debug Watch
per ricollegare e riavviare il debug.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 l'ultima volta, l'app Chat non risponde perché è in fase di debug attivo.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.
Debug da ambiente remoto
In questa sezione interagisci con l'app di Chat che viene eseguita in un ambiente remoto.
Figura 9. Debug da ambiente remoto.
Prerequisiti
- Uno spazio per i messaggi diretti con l'app Chat. Puoi seguire la sezione Testare l'app Chat della Guida rapida e cercare l'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
nel tuo ambiente remoto. - Un IDE configurato nel tuo ambiente locale in grado di 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
Nel tuo ambiente locale da cui vuoi avviare la 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 nel tuo 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
Dall'IDE Visual Studio Code
installato nel tuo ambiente locale, segui questi passaggi:
- In una nuova finestra, apri il codice sorgente della tua app.
Crea il file
.vscode/launch.json
nella directory root e configura un lancio denominatoDebug Remote
che si collega 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 con l'app Chat, digita
il testo che vuoi verificare e premi enter
. L'app Chat non risponde perché è in fase di debug attivo nell'IDE Visual Studio Code
.
Argomenti correlati
- Scopri come enable i log degli errori per query.
- 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 messaggi delle schede, finestre di dialogo o anteprime di link che non vengono visualizzate o non funzionano come previsto.