Jako deweloper aplikacji do Google Chat możesz potrzebować debugowania kodu, aby testować zmiany lub rozwiązywać złożone problemy. Debugowanie aplikacji do obsługi czatu można przeprowadzić na wiele różnych sposobów w zależności od architektury aplikacji, jej funkcji, sposobu wdrażania i preferencji.
Na tej stronie objaśniamy, jak debugować aplikację do obsługi czatu HTTP za pomocą ngroku – ujednoliconej platformy ruchu przychodzącego, której można używać do testowania lokalnych środowisk programistycznych. W tym przewodniku testujesz zmiany w kodzie w środowisku lokalnym i rozwiązujesz problemy w środowisku zdalnym.
Debuguj z lokalnego środowiska programistycznego
W tej sekcji pracujesz z aplikacją 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
- Najnowsze wersje
node
inpm
zainstalowane w środowisku lokalnym. Najnowsza wersja pakietu
nodemon
zainstalowana w środowisku lokalnym jest używana do automatycznego ponownego wczytywania:npm install -g nodemon
aplikację czatu HTTP skonfigurowaną do przesyłania wiadomości. Wykonaj czynności opisane w sekcjach Wymagania wstępne, Konfigurowanie środowiska i Publikowanie aplikacji w Google Chat w Krótkim przewodniku. Jedyną różnicą jest ustawienie w polu Nazwa aplikacji wartości
Debug App
, a w polu Adres URL aplikacji dowolnej wartości, np.http://example.com
.Skonfigurowane w środowisku lokalnym IDE, które można debugować. Do celów poglądowych używamy IDE
Visual Studio Code
i jego domyślnych funkcji debugowania w tym przewodniku.Git
została zainstalowana w Twoim środowisku lokalnym.konto
ngrok
,
Python
- Najnowsza wersja aplikacji
python3
zainstalowana w środowisku lokalnym. - Najnowsza wersja
pip
ivirtualenv
zainstalowana w środowisku lokalnym służy do zarządzania pakietami Pythona i środowiskami wirtualnymi odpowiednio do zarządzania pakietami Pythona. - aplikację czatu HTTP skonfigurowaną do przesyłania wiadomości. Wykonaj czynności opisane w sekcjach Wymagania wstępne, Konfigurowanie środowiska i Publikowanie aplikacji w Google Chat w Krótkim przewodniku. Jedyną różnicą jest ustawienie w polu Nazwa aplikacji wartości
Debug App
, a w polu Adres URL aplikacji dowolnej wartości, np.http://example.com
. - Skonfigurowane w środowisku lokalnym IDE, które można debugować. Do celów poglądowych używamy IDE
Visual Studio Code
i jego domyślnych funkcji debugowania w tym przewodniku. Git
została zainstalowana w Twoim środowisku lokalnym.- konto
ngrok
, - Najnowsza wersja pakietu
gcloud
zainstalowana i zainicjowana w środowisku lokalnym.
Java
- Najnowsza stabilna wersja aplikacji
Java SE 11's JDK
zainstalowana w środowisku lokalnym. - Najnowsza wersja pakietu
Apache Maven
zainstalowana w środowisku lokalnym jest używana do zarządzania projektami Java. - aplikację czatu HTTP skonfigurowaną do przesyłania wiadomości. Wykonaj czynności opisane w sekcjach Wymagania wstępne, Konfigurowanie środowiska i Publikowanie aplikacji w Google Chat w Krótkim przewodniku. Jedyną różnicą jest ustawienie w polu Nazwa aplikacji wartości
Debug App
, a w polu Adres URL aplikacji dowolnej wartości, np.http://example.com
. - Skonfigurowane w środowisku lokalnym IDE, które można debugować. Do celów poglądowych używamy IDE
Visual Studio Code
i jego domyślnych funkcji debugowania w tym przewodniku. Git
została zainstalowana w Twoim środowisku lokalnym.- konto
ngrok
, - Najnowsza wersja pakietu
gcloud
zainstalowana i zainicjowana w środowisku lokalnym.
Udostępnij usługę lokalnego hosta jako publicznie
Aby aplikacja Google Chat mogła uzyskać dostęp do środowiska lokalnego, musisz połączyć je z internetem. Aplikacja ngrok
służy do przekierowania żądań HTTP 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 tego przewodnika wspominamy o niej jakoNGROK_STATIC_DOMAIN
.
Konfigurowanie aplikacji Google Chat
Skonfiguruj aplikację Google Chat, aby wysyłała wszystkie żądania HTTP do Twojej domeny statycznej.
W konsoli Google Cloud otwórz stronę Google Chat API:
Kliknij kartę Configuration (Konfiguracja).
Wybierz Funkcje interaktywne > Ustawienia połączenia i ustaw wartość pola tekstowego 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 most między aplikacją Google Chat a kodem aplikacji uruchamianym lokalnie.
Testowanie aplikacji Google Chat
Aplikację Google Chat możesz wdrożyć lokalnie, skonfigurować, przetestować, debugować i automatycznie załadować ponownie.
Node.js
Skopiuj 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 debugowanie automatycznego ponownego ładowania, dodając w pliku
package.json
2 skrypty:{ ... "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 będzie uruchamiać skryptdebug-watch
. W tym celu utwórz w katalogu głównym plik.vscode/launch.json
:{ "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
, i rozpocznij uruchamianie i debugowanie z użyciem konfiguracjiDebug Watch
dodanej wcześniej. Aplikacja jest teraz uruchomiona 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 portu używanego przez aplikację.Rysunek 4. Terminal z serwerem
ngrok
działającym i przekierowującym.Aplikacja
ngrok
uruchamia na serwerze lokalnym interfejs internetowy. Możesz monitorować wszystkie działania, otwierając go w przeglądarce.Rysunek 5. Interfejs internetowy hostowany przez aplikację
ngrok
, który nie pokazuje żadnych żądań HTTP.Przetestuj swoją aplikację do obsługi czatu, wysyłając do niej wiadomość na czacie:
Otwórz Google Chat.
Kliknij Nowy czat
.W oknie wpisz nazwę aplikacji Google Chat.
W wynikach wyszukiwania znajdź aplikację do obsługi czatu i kliknij Dodaj > Google Chat.
W pokoju czatu wpisz
Hello
i naciśnijenter
. Aplikacja Google Chat nie odpowiada, ponieważ jest w trakcie debugowania.
W
Visual Studio Code
w środowisku lokalnym możesz zobaczyć, że wykonanie zostało wstrzymane w ustawionym punkcie przerwania.Rysunek 6. Wykonanie jest wstrzymywane w ustawionym punkcie przerwania.
Gdy wznowisz wykonywanie kodu przez debugera
Visual Studio Code
, zanim Google Chat odpowie na żądanieYour message : Hello
, zanim upłynie czas oczekiwania na odpowiedź Google Chat.Logi żądań i odpowiedzi HTTP możesz sprawdzać w interfejsie internetowym hostowanym 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 ponownie wczyta aplikację ze zaktualizowanym kodem źródłowym, aVisual Studio Code
pozostanie w trybie debugowania.Rysunek 8. Aplikacja działa 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 hostowanym przez aplikacjęngrok
w środowisku lokalnym i kliknąćReplay
. Tak jak ostatnio, aplikacja Google Chat nie odpowiada, ponieważ jest w trakcie debugowania.Po wznowieniu działania z debugera
Visual Studio Code
zobaczysz w interfejsie internetowym udostępnianym przez aplikacjęngrok
w środowisku lokalnym, że aplikacja generuje odpowiedź ze zaktualizowaną wersją komunikatuHere was your message : Hello
.
Python
Uzyskiwanie nowych danych logowania użytkownika do wykorzystania 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 aplikacji.Skopiuj 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ą narzędzia
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 będzie uruchamiać 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
, i rozpocznij uruchamianie i debugowanie z użyciem konfiguracjiDebug Watch
dodanej wcześniej. Aplikacja jest teraz uruchomiona 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 portu używanego przez aplikację.Rysunek 4. Terminal z serwerem
ngrok
działającym i przekierowującym.Aplikacja
ngrok
uruchamia na serwerze lokalnym interfejs internetowy. Możesz monitorować wszystkie działania, otwierając go w przeglądarce.Rysunek 5. Interfejs internetowy hostowany przez aplikację
ngrok
, który nie pokazuje żadnych żądań HTTP.Przetestuj swoją aplikację do obsługi czatu, wysyłając do niej wiadomość na czacie:
Otwórz Google Chat.
Kliknij Nowy czat
.W oknie wpisz nazwę aplikacji Google Chat.
W wynikach wyszukiwania znajdź aplikację do obsługi czatu i kliknij Dodaj > Google Chat.
W pokoju czatu wpisz
Hey!
i naciśnijenter
. Aplikacja Google Chat nie odpowiada, ponieważ jest w trakcie debugowania.
W
Visual Studio Code
w środowisku lokalnym możesz zobaczyć, że wykonanie zostało wstrzymane w ustawionym punkcie przerwania.Rysunek 6. Wykonanie jest wstrzymywane w ustawionym punkcie przerwania.
Gdy wznowisz wykonywanie kodu z debugera aplikacji
Visual Studio Code
, zanim upłynie limit czasu Google Chat, aplikacja Google Chat prześle w wiadomości Twoją nazwę i zdjęcie awatara.Logi żądań i odpowiedzi HTTP możesz sprawdzać w interfejsie internetowym hostowanym 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 ponownie wczytuje aplikację ze zaktualizowanym kodem źródłowym i pozosta w trybie debugowania.Rysunek 8. Aplikacja działa 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 hostowanym przez aplikacjęngrok
w środowisku lokalnym i kliknąćReplay
. Tak jak ostatnio, aplikacja Google Chat nie odpowiada, ponieważ jest obecnie debugowana.Po wznowieniu działania z debugera
Visual Studio Code
zobaczysz w interfejsie internetowym udostępnianym przez aplikacjęngrok
w środowisku lokalnym, że aplikacja generuje odpowiedź ze zaktualizowaną wersją komunikatu.
Java
Uzyskiwanie nowych danych logowania użytkownika do wykorzystania 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 aplikacji.Sklonuj 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 tak, aby aplikacja
HelloChat
była uruchamiana lokalnie na porcie9000
. W tym celu dodaj wtyczkęfunction-maven-plugin
do kompilacji Cloud Functions Framework 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 teraz uruchomić go 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 będzie dołączać do aplikacji uruchomionej wcześniej przez port8000
:{ "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 żądań HTTP w pliku
HelloChat.java
, i rozpocznij dołączanie i debugowanie za pomocą konfiguracjiRemote Debug Watch
dodanej wcześniej. Aplikacja działa teraz i nasłuchuje żądań HTTP na porcie9000
.Rys. 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 portu używanego przez aplikację.Rysunek 4. Terminal z serwerem
ngrok
działającym i przekierowującym.Aplikacja
ngrok
uruchamia na serwerze lokalnym interfejs internetowy. Możesz monitorować wszystkie działania, otwierając go w przeglądarce.Rysunek 5. Interfejs internetowy hostowany przez aplikację
ngrok
, który nie pokazuje żadnych żądań HTTP.Przetestuj swoją aplikację do obsługi czatu, wysyłając do niej wiadomość na czacie:
Otwórz Google Chat.
Kliknij Nowy czat
.W oknie wpisz nazwę aplikacji Google Chat.
W wynikach wyszukiwania znajdź aplikację do obsługi czatu i kliknij Dodaj > Google Chat.
W pokoju czatu wpisz
Hey!
i naciśnijenter
. Aplikacja Google Chat nie odpowiada, ponieważ jest w trakcie debugowania.
W
Visual Studio Code
w środowisku lokalnym możesz zobaczyć, że wykonanie zostało wstrzymane w ustawionym punkcie przerwania.Rysunek 6. Wykonanie jest wstrzymywane w ustawionym punkcie przerwania.
Gdy wznowisz wykonywanie kodu z debugera aplikacji
Visual Studio Code
, zanim upłynie limit czasu Google Chat, aplikacja Google Chat prześle w wiadomości Twoją nazwę i zdjęcie awatara.Logi żądań i odpowiedzi HTTP możesz sprawdzać w interfejsie internetowym hostowanym 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
wierszemHello
w tekście55
w plikuHelloChat.java
, uruchom ponownie procesmvnDebug
i uruchom ponownieRemote Debug Watch
, aby ponownie podłączyć i uruchomić debugowanie.Hey
Tym razem zamiast wysyłać w pokoju drugą wiadomość (
Hey!
), możesz wybrać ostatnie żądanie HTTP zarejestrowane w interfejsie internetowym hostowanym przez aplikacjęngrok
w środowisku lokalnym i kliknąćReplay
. Tak jak ostatnio, aplikacja Google Chat nie odpowiada, ponieważ jest w trakcie debugowania.Po wznowieniu działania z debugera
Visual Studio Code
zobaczysz w interfejsie internetowym udostępnianym przez aplikacjęngrok
w środowisku lokalnym, że aplikacja generuje odpowiedź ze zaktualizowaną wersją komunikatu.
Debuguj ze środowiska zdalnego
W tej sekcji pracujesz z aplikacją do obsługi czatu, która działa w środowisku zdalnym.
Rysunek 9. Debuguj ze środowiska zdalnego.
Wymagania wstępne
- Pokój czatu z aplikacją Google Chat. Możesz skorzystać z sekcji Testowanie aplikacji do obsługi czatu w krótkim przewodniku i wyszukać swoją aplikację, aby ją uruchomić.
- Twoja aplikacja uruchomiona w środowisku zdalnym z włączonym debugerem na danym porcie jest w instrukcjach tego przewodnika oznaczona jako
REMOTE_DEBUG_PORT
. - Środowisko lokalne może
ssh
do środowiska zdalnego. - Skonfigurowane w środowisku lokalnym IDE, które można debugować. Używamy
Visual Studio Code
IDE i jego domyślnych funkcji debugowania w tym przewodniku w celach poglądowych.
Połącz środowiska lokalne i zdalne
W środowisku lokalnym, w którym 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 poziomu 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
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 żądań HTTP, i rozpocznij uruchamianie i debugowanie za pomocą dodanej wcześniej konfiguracji
Debug Remote
.
W pokoju czatu w aplikacji do obsługi czatu wpisz, co 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 wysyłać zapytania do nich.
- Dowiedz się, jak naprawić błędy w 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 karty, np. komunikaty na karcie, okna lub podgląd linków, które nie renderują się lub nie działają zgodnie z oczekiwaniami.