Jako deweloper aplikacji w Google Chat możesz potrzebować debugowania kodu, aby testować zmiany lub rozwiązywać złożone problemy. Debugowanie aplikacji Google Chat można przeprowadzić na wiele sposobów w zależności od architektury aplikacji, działania aplikacji, sposobu jej wdrożenia i Twoich preferencji.
Na tej stronie dowiesz się, jak debugować aplikację HTTP do obsługi czatu za pomocą ujednoliconej platformy ruchu przychodzącego ngrok, której możesz używać do testowania lokalnych środowisk programistycznych. Z tego przewodnika dowiesz się, jak testować zmiany kodu w środowisku lokalnym i rozwiązywać problemy w środowisku zdalnym.
Debuguj z lokalnego środowiska programistycznego
W tej sekcji dowiesz się, jak używać aplikacji Google Chat, która działa w Twoim środowisku lokalnym.
Rysunek 1. Debuguj w lokalnym środowisku programistycznym.
Warsztat
Node.js
Python
Java
Wymagania wstępne
Node.js
- W środowisku lokalnym zainstalowano najnowsze wersje aplikacji
node
inpm
. W środowisku lokalnym zainstalowano najnowszą wersję aplikacji
nodemon
. Jest ona używana do automatycznego ponownego wczytywania:npm install -g nodemon
To aplikacja do obsługi czatu HTTP skonfigurowana do przesyłania wiadomości. Zapoznaj się z sekcjami Wymagania wstępne, Konfigurowanie środowiska i Publikowanie aplikacji w Google Chat w krótkim przewodniku. Jedyne różnice polegają na tym, że w polu Nazwa aplikacji musisz ustawić wartość
Debug App
, a w polu URL aplikacji ustawić dowolną wartość, np.http://example.com
.IDE skonfigurowane w środowisku lokalnym z możliwością debugowania. W celach ilustracyjnych używamy narzędzia
Visual Studio Code
IDE i jego domyślnych funkcji debugowania przedstawionych w tym przewodniku.Git
zainstalowano w środowisku lokalnym.konto
ngrok
,
Python
- W środowisku lokalnym zainstalowano najnowszą wersję usługi
python3
. - Najnowsze wersje
pip
ivirtualenv
zainstalowane w środowisku lokalnym są używane odpowiednio do zarządzania pakietami Pythona i środowiskami wirtualnymi. - To aplikacja do obsługi czatu HTTP skonfigurowana
do przesyłania wiadomości. Zapoznaj się z sekcjami Wymagania wstępne, Konfigurowanie środowiska i Publikowanie aplikacji w Google Chat w krótkim przewodniku. Jedyne różnice polegają na tym, że w polu Nazwa aplikacji musisz ustawić wartość
Debug App
, a w polu URL aplikacji ustawić dowolną wartość, np.http://example.com
. - IDE skonfigurowane w środowisku lokalnym z możliwością debugowania. W celach ilustracyjnych używamy narzędzia
Visual Studio Code
IDE i jego domyślnych funkcji debugowania przedstawionych w tym przewodniku. Git
zainstalowano w środowisku lokalnym.- konto
ngrok
, - Najnowsza wersja aplikacji
gcloud
zainstalowana i zainicjowana w środowisku lokalnym.
Java
- Najnowsza stabilna wersja systemu
Java SE 11's JDK
zainstalowana w środowisku lokalnym. - W środowisku lokalnym zainstalowana jest najnowsza wersja pakietu
Apache Maven
, która służy do zarządzania projektami Java. - To aplikacja do obsługi czatu HTTP skonfigurowana
do przesyłania wiadomości. Zapoznaj się z sekcjami Wymagania wstępne, Konfigurowanie środowiska i Publikowanie aplikacji w Google Chat w krótkim przewodniku. Jedyne różnice polegają na tym, że w polu Nazwa aplikacji musisz ustawić wartość
Debug App
, a w polu URL aplikacji ustawić dowolną wartość, np.http://example.com
. - IDE skonfigurowane w środowisku lokalnym z możliwością debugowania. W celach ilustracyjnych używamy narzędzia
Visual Studio Code
IDE i jego domyślnych funkcji debugowania przedstawionych w tym przewodniku. Git
zainstalowano w środowisku lokalnym.- konto
ngrok
, - Najnowsza wersja aplikacji
gcloud
zainstalowana i zainicjowana w środowisku lokalnym.
Udostępnij usługę lokalnego hosta publicznie
Musisz połączyć swoje lokalne środowisko z internetem, aby aplikacja Google Chat miała do niego dostęp. Aplikacja ngrok
służy do przekierowywania żądań HTTP wysyłanych na publiczny adres URL do Twojego środowiska lokalnego.
- W przeglądarce w środowisku lokalnym zaloguj się na konto
ngrok
. - Zainstaluj aplikację i skonfiguruj
authtoken
w środowisku lokalnym. - Utwórz na koncie
ngrok
domenę statyczną. W instrukcjach w tym przewodniku jest ona nazywanaNGROK_STATIC_DOMAIN
.
Konfigurowanie aplikacji Google Chat
Skonfiguruj aplikację Google Chat tak, aby wysyłała wszystkie żądania HTTP do Twojej domeny statycznej.
W konsoli Google Cloud otwórz stronę interfejsu Google Chat API:
Kliknij kartę Configuration (Konfiguracja).
Wybierz Funkcje interaktywne > Ustawienia połączenia i ustaw wartość w polu tekstowym URL aplikacji na:
https://NGROK_STATIC_DOMAIN
Zastąp
NGROK_STATIC_DOMAIN
domeną statyczną na konciengrok
.Kliknij Zapisz.
Rysunek 2. Aplikacja Google Chat wysyła wszystkie
żądania HTTP do domeny statycznej. Usługa publiczna ngrok
działa jako pomost między aplikacją Google Chat a wykonywanym lokalnie kodem aplikacji.
Testowanie aplikacji Google Chat
Aplikację Google Chat możesz wdrożyć lokalnie, skonfigurować, przetestować, debugować i automatycznie ponownie ładować.
Node.js
Sklonujesz repozytorium
googleworkspace/google-chat-samples
z GitHuba do środowiska lokalnego. Zawiera ono kod aplikacji do wykonania:git clone https://github.com/googleworkspace/google-chat-samples.git
W IDE
Visual Studio Code
zainstalowanym w środowisku lokalnym wykonaj te czynności:- W nowym oknie otwórz folder
google-chat-samples/node/basic-app
. Skonfiguruj aplikację pod kątem automatycznego ponownego ładowania debugowania, dodając 2 skrypty w pliku
package.json
:{ ... "scripts": { ... "debug": "node --inspect index.js", "debug-watch": "nodemon --watch ./ --exec npm run debug" } ... }
Zainstaluj aplikację z katalogu głównego:
npm install
Utwórz i skonfiguruj uruchomienie o nazwie
Debug Watch
, które wyzwala skryptdebug-watch
, tworząc plik.vscode/launch.json
w katalogu głównym:{ "version": "0.2.0", "configurations": [{ "type": "node", "request": "launch", "name": "Debug Watch", "cwd": "${workspaceRoot}", "runtimeExecutable": "npm", "runtimeArgs": ["run-script", "debug-watch"] }] }
Dodaj punkt przerwania, który wstrzymuje przetwarzanie żądania HTTP w pliku
index.js
, a potem rozpocznij uruchamianie i debugowanie z dodaną wcześniej konfiguracjąDebug Watch
. Aplikacja działa teraz i nasłuchuje żądań HTTP na porcie9000
.Rysunek 3. Aplikacja działa i nasłuchuje żądań HTTP na porcie
9000
.
- W nowym oknie otwórz folder
Uruchom aplikację
ngrok
w środowisku lokalnym:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
Zastąp
NGROK_STATIC_DOMAIN
domeną statyczną na konciengrok
. Wszystkie żądania są teraz przekierowywane do środowiska lokalnego i do portu używanego przez aplikację.Rysunek 4. Terminal z serwerem
ngrok
uruchomionym i przekierowującym.Na serwerze lokalnym uruchamia się też interfejs internetowy przez aplikację
ngrok
. Możesz monitorować wszystkie działania, otwierając go w przeglądarce.Rysunek 5. Interfejs internetowy hostowany przez aplikację
ngrok
nie wykazujący żadnych żądań HTTP.Przetestuj aplikację Google Chat, wysyłając ją na czacie:
Otwórz Google Chat.
Kliknij Nowy czat
.W oknie wpisz nazwę aplikacji Google Chat.
W wynikach wyszukiwania znajdź aplikację Google Chat i kliknij Dodaj > Google Chat.
W pokoju czatu wpisz
Hello
i naciśnijenter
. Aplikacja Google Chat nie odpowiada, ponieważ trwa debugowanie.
W
Visual Studio Code
w środowisku lokalnym możesz zobaczyć, że wykonanie jest wstrzymane w ustawionym punkcie przerwania.Rysunek 6. Wykonanie jest wstrzymane w ustawionym punkcie przerwania.
Gdy wznowisz wykonanie za pomocą debugera
Visual Studio Code
, zanim Google Chat przekroczy limit czasu, aplikacja Google Chat otrzyma odpowiedźYour message : Hello
.Możesz wyświetlić logi żądań i odpowiedzi HTTP z interfejsu internetowego hostowanego przez aplikację
ngrok
w środowisku lokalnym.Rysunek 7. Żądanie HTTP z interfejsu internetowego hostowanego przez aplikację
ngrok
.Aby zmienić działanie aplikacji, zamień
Your message
naHere was your message
w tekście35
windex.json
. Gdy zapiszesz plik,nodemon
automatycznie załaduje ponownie aplikację ze zaktualizowanym kodem źródłowym, aVisual Studio Code
pozostanie w trybie debugowania.Rysunek 8. Aplikacja jest uruchomiona i nasłuchuje żądań HTTP na porcie
9000
z załadowaną zmianą kodu.Tym razem zamiast wysyłać w pokoju drugą wiadomość
Hello
, możesz wybrać ostatnie żądanie HTTP zarejestrowane w interfejsie internetowym hostowane przez aplikacjęngrok
w Twoim środowisku lokalnym i kliknąćReplay
. Tak jak ostatnio, aplikacja Google Chat nie odpowiada, ponieważ jest aktywnie debugowana.Gdy wznowisz wykonanie przy pomocy debugera kodu
Visual Studio Code
, z interfejsu internetowego hostowanego przez aplikacjęngrok
w Twoim środowisku lokalnym zobaczysz, że generuje ona odpowiedź ze zaktualizowaną wersją komunikatuHere was your message : Hello
.
Python
Uzyskiwanie nowych danych logowania użytkownika na potrzeby domyślnych danych logowania aplikacji:
gcloud config set project PROJECT_ID gcloud auth application-default login
Zastąp
PROJECT_ID
identyfikatorem projektu projektu Cloud danej aplikacji.Sklonujesz repozytorium
googleworkspace/google-chat-samples
z GitHuba do środowiska lokalnego. Zawiera ono kod aplikacji:git clone https://github.com/googleworkspace/google-chat-samples.git
W IDE
Visual Studio Code
zainstalowanym w środowisku lokalnym wykonaj te czynności:- W nowym oknie otwórz folder
google-chat-samples/python/avatar-app
. Utwórz nowe środowisko wirtualne dla języka Python
env
i aktywuj je:virtualenv env
source env/bin/activate
Zainstaluj wszystkie zależności projektu za pomocą interfejsu
pip
w środowisku wirtualnym:pip install -r requirements.txt
Utwórz plik
.vscode/launch.json
w katalogu głównym i skonfiguruj uruchomienie o nazwieDebug Watch
, które wyzwala aplikację z modułufunctions-framework
na porcie9000
w trybie debugowania w środowisku wirtualnymenv
:{ "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" ] }] }
Dodaj punkt przerwania, który wstrzymuje przetwarzanie żądania HTTP w pliku
main.py
, a potem rozpocznij uruchamianie i debugowanie z dodaną wcześniej konfiguracjąDebug Watch
. Aplikacja działa teraz i nasłuchuje żądań HTTP na porcie9000
.Rysunek 3. Aplikacja działa i nasłuchuje żądań HTTP na porcie
9000
.
- W nowym oknie otwórz folder
Uruchom aplikację
ngrok
w środowisku lokalnym:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
Zastąp
NGROK_STATIC_DOMAIN
domeną statyczną na konciengrok
. Wszystkie żądania są teraz przekierowywane do środowiska lokalnego i do portu używanego przez aplikację.Rysunek 4. Terminal z serwerem
ngrok
uruchomionym i przekierowującym.Na serwerze lokalnym uruchamia się też interfejs internetowy przez aplikację
ngrok
. Możesz monitorować wszystkie działania, otwierając go w przeglądarce.Rysunek 5. Interfejs internetowy hostowany przez aplikację
ngrok
nie wykazujący żadnych żądań HTTP.Przetestuj aplikację Google Chat, wysyłając ją na czacie:
Otwórz Google Chat.
Kliknij Nowy czat
.W oknie wpisz nazwę aplikacji Google Chat.
W wynikach wyszukiwania znajdź aplikację Google Chat i kliknij Dodaj > Google Chat.
W pokoju czatu wpisz
Hey!
i naciśnijenter
. Aplikacja Google Chat nie odpowiada, ponieważ trwa debugowanie.
W
Visual Studio Code
w środowisku lokalnym możesz zobaczyć, że wykonanie jest wstrzymane w ustawionym punkcie przerwania.Rysunek 6. Wykonanie jest wstrzymane w ustawionym punkcie przerwania.
Gdy wznowisz wykonywanie kodu za pomocą debugera
Visual Studio Code
, zanim Google Chat przekroczy limit czasu, aplikacja Google Chat wyśle w wiadomości Twoją nazwę i zdjęcie awatara.Możesz wyświetlić logi żądań i odpowiedzi HTTP z interfejsu internetowego hostowanego przez aplikację
ngrok
w środowisku lokalnym.Rysunek 7. Żądanie HTTP z interfejsu internetowego hostowanego przez aplikację
ngrok
.Aby zmienić działanie aplikacji, zamień
Hello
naHey
w tekście51
w plikumain.py
. Po zapisaniu plikuVisual Studio Code
automatycznie załaduje ponownie aplikację ze zaktualizowanym kodem źródłowym i pozostanie w trybie debugowania.Rysunek 8. Aplikacja jest uruchomiona i nasłuchuje żądań HTTP na porcie
9000
z załadowaną zmianą kodu.Tym razem zamiast wysyłać w pokoju drugą wiadomość
Hey!
, możesz wybrać ostatnie żądanie HTTP zarejestrowane w interfejsie internetowym hostowane przez aplikacjęngrok
w Twoim środowisku lokalnym i kliknąćReplay
. Tak jak ostatnio, aplikacja Google Chat nie odpowiada, ponieważ jest aktywnie debugowana.Gdy wznowisz wykonanie za pomocą debugera skryptu
Visual Studio Code
, z interfejsu internetowego hostowanego przez aplikacjęngrok
w Twoim środowisku lokalnym zobaczysz, że ta aplikacja generuje odpowiedź ze zaktualizowaną wersją komunikatu.
Java
Uzyskiwanie nowych danych logowania użytkownika na potrzeby domyślnych danych logowania aplikacji:
gcloud config set project PROJECT_ID gcloud auth application-default login
Zastąp
PROJECT_ID
identyfikatorem projektu projektu Cloud danej aplikacji.Skopiuj repozytorium
googleworkspace/google-chat-samples
z GitHuba w środowisku lokalnym. Zawiera ono kod aplikacji:git clone https://github.com/googleworkspace/google-chat-samples.git
W IDE
Visual Studio Code
zainstalowanym w środowisku lokalnym wykonaj te czynności:- W nowym oknie otwórz folder
google-chat-samples/java/avatar-app
. Skonfiguruj projekt Maven do lokalnego uruchamiania aplikacji
HelloChat
na porcie9000
, dodając wtyczkę kompilacji Cloud Functions Frameworkfunction-maven-plugin
w plikupom.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> ...
Możesz go teraz uruchomić lokalnie w trybie debugowania:
mvnDebug function:run Preparing to execute Maven in debug mode Listening for transport dt_socket at address: 8000
Utwórz plik
.vscode/launch.json
w katalogu głównym i skonfiguruj uruchomienie o nazwieRemote Debug Watch
, które zostanie dołączone do aplikacji uruchomionej wcześniej na porcie8000
:{ "version": "0.2.0", "configurations": [{ "type": "java", "request": "attach", "name": "Remote Debug Watch", "projectName": "http-function", "hostName": "localhost", "port": 8000 }] }
Dodaj punkt przerwania, który wstrzymuje przetwarzanie żądania HTTP w pliku
HelloChat.java
, a potem rozpocznij podłączanie i debugowanie z dodaną wcześniej konfiguracjąRemote Debug Watch
. Aplikacja działa teraz i nasłuchuje żądań HTTP na porcie9000
.Rysunek 3. Aplikacja jest uruchomiona i nasłuchuje żądań HTTP na porcie
9000
.
- W nowym oknie otwórz folder
Uruchom aplikację
ngrok
w środowisku lokalnym:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
Zastąp
NGROK_STATIC_DOMAIN
domeną statyczną na konciengrok
. Wszystkie żądania są teraz przekierowywane do środowiska lokalnego i do portu używanego przez aplikację.Rysunek 4. Terminal z serwerem
ngrok
uruchomionym i przekierowującym.Na serwerze lokalnym uruchamia się też interfejs internetowy przez aplikację
ngrok
. Możesz monitorować wszystkie działania, otwierając go w przeglądarce.Rysunek 5. Interfejs internetowy hostowany przez aplikację
ngrok
nie wykazujący żadnych żądań HTTP.Przetestuj aplikację Google Chat, wysyłając ją na czacie:
Otwórz Google Chat.
Kliknij Nowy czat
.W oknie wpisz nazwę aplikacji Google Chat.
W wynikach wyszukiwania znajdź aplikację Google Chat i kliknij Dodaj > Google Chat.
W pokoju czatu wpisz
Hey!
i naciśnijenter
. Aplikacja Google Chat nie odpowiada, ponieważ trwa debugowanie.
W
Visual Studio Code
w środowisku lokalnym możesz zobaczyć, że wykonanie jest wstrzymane w ustawionym punkcie przerwania.Rysunek 6. Wykonanie jest wstrzymane w ustawionym punkcie przerwania.
Gdy wznowisz wykonywanie kodu za pomocą debugera
Visual Studio Code
, zanim Google Chat przekroczy limit czasu, aplikacja Google Chat wyśle w wiadomości Twoją nazwę i zdjęcie awatara.Możesz wyświetlić logi żądań i odpowiedzi HTTP z interfejsu internetowego hostowanego przez aplikację
ngrok
w środowisku lokalnym.Rysunek 7. Żądanie HTTP z interfejsu internetowego hostowanego przez aplikację
ngrok
.Aby zmienić działanie aplikacji, zastąp
Hello
elementemHey
w tekście55
w plikuHelloChat.java
, ponownie uruchom procesmvnDebug
i uruchom ponownieRemote Debug Watch
, aby ponownie dołączyć i rozpocząć debugowanie.Tym razem zamiast wysyłać w pokoju drugą wiadomość
Hey!
, możesz wybrać ostatnie żądanie HTTP zarejestrowane w interfejsie internetowym hostowane przez aplikacjęngrok
w Twoim środowisku lokalnym i kliknąćReplay
. Tak jak ostatnio, aplikacja Google Chat nie odpowiada, ponieważ jest aktywnie debugowana.Gdy wznowisz wykonanie za pomocą debugera skryptu
Visual Studio Code
, z interfejsu internetowego hostowanego przez aplikacjęngrok
w Twoim środowisku lokalnym zobaczysz, że ta aplikacja generuje odpowiedź ze zaktualizowaną wersją komunikatu.
Debuguj ze środowiska zdalnego
W tej sekcji dowiesz się, jak używać aplikacji Google Chat, która działa w środowisku zdalnym.
Rysunek 9. Debuguj ze środowiska zdalnego.
Wymagania wstępne
- Pokój czatu z aplikacją Google Chat. Aby go uruchomić, przejdź do sekcji Testowanie aplikacji Google Chat w krótkim przewodniku i wyszukaj swoją aplikację Google Chat.
- Twoja aplikacja działająca w środowisku zdalnym z włączonym debugerem na danym porcie nazywa się
REMOTE_DEBUG_PORT
w instrukcjach w tym przewodniku. - Środowisko lokalne może
ssh
z Twoim środowiskiem zdalnym. - IDE skonfigurowane w środowisku lokalnym z możliwością debugowania. W celach ilustracyjnych używamy narzędzia
Visual Studio Code
IDE i jego domyślnych funkcji debugowania opisanych w tym przewodniku.
Połącz środowiska lokalne i zdalne
W środowisku lokalnym, z którego chcesz zainicjować połączenie z klientem debugowania, skonfiguruj tunel SSH:
ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS
Zastąp następujące elementy:
LOCAL_DEBUG_PORT
: port debugowania w środowisku lokalnym.REMOTE_USERNAME
: nazwa użytkownika w środowisku zdalnym.REMOTE_ADDRESS
: adres środowiska zdalnego.REMOTE_DEBUG_PORT
: port debugowania w środowisku zdalnym.
Port debugowania w środowisku lokalnym jest teraz połączony z portem debugowania w środowisku zdalnym.
Rozpocznij debugowanie
Z IDE Visual Studio Code
zainstalowanego w środowisku lokalnym wykonaj te czynności:
- W nowym oknie otwórz kod źródłowy aplikacji.
Utwórz plik
.vscode/launch.json
w katalogu głównym i skonfiguruj uruchomienie o nazwieDebug Remote
, które będzie podłączane do portu debugowania w środowisku lokalnym: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 }] }
Zastąp
LOCAL_DEBUG_PORT
portem debugowania w środowisku lokalnym.Dodaj w kodzie źródłowym aplikacji punkt przerwania, który wstrzymuje przetwarzanie żądania HTTP, i zacznij działać oraz debugować przy użyciu dodanej wcześniej konfiguracji
Debug Remote
.
W pokoju czatu w aplikacji Google Chat wpisz tekst, który chcesz przetestować, i naciśnij enter
. Twoja aplikacja Google Chat nie odpowiada, ponieważ jest aktywnie debugowana w IDE Visual Studio Code
.
Powiązane artykuły
- Dowiedz się, jak enable logi błędów i wykonywać zapytania.
- Dowiedz się, jak naprawić błędy aplikacji Google Chat takie jak „Aplikacja nie odpowiada”, „Interfejs Google Chat API jest dostępny tylko dla użytkowników Google Workspace” lub „Użytkownicy mogą zostać wykluczeni z pokoi”.
- Dowiedz się, jak naprawić błędy kart, takie jak komunikaty na kartach, okna dialogowe czy podglądy linków, które nie renderują się lub nie działają zgodnie z oczekiwaniami.