Ta strona została przetłumaczona przez Cloud Translation API.

Debugowanie aplikacji Google Chat

Jako deweloper aplikacji Google Chat możesz potrzebować debugowania kodu, aby przetestować zmiany lub rozwiązać złożone problemy. Debugowanie aplikacji czatu można przeprowadzać na wiele różnych sposobów w zależności od architektury aplikacji, jej funkcji, sposobu wdrożenia i Twoich preferencji.

Na tej stronie wyjaśniamy, jak debugować aplikację HTTP Chat za pomocą ngrok, czyli zintegrowanej platformy do wprowadzania danych, której można używać do testowania lokalnych środowisk programowania. W tym przewodniku przetestujesz zmiany kodu w lokalnym środowisku i rozwiążesz problemy w środowisku zdalnym.

Debugowanie w lokalnym środowisku programistycznym

W tej sekcji będziesz korzystać z aplikacji Google Chat, która działa w środowisku lokalnym.

Debugowanie w lokalnym środowisku programistycznym

Rysunek 1. Debugowanie w lokalnym środowisku programistycznym.

Warsztat

Node.js

Python

Java

Wymagania wstępne

Node.js

najnowsze wersje node i npm zainstalowane w środowisku lokalnym;
Najnowsza wersja aplikacji nodemon zainstalowana w Twoim środowisku lokalnym służy do automatycznego wczytywania:
```
npm install -g nodemon
```
Aplikacja HTTP Chat skonfigurowana do obsługi wiadomości. Możesz postępować zgodnie z sekcjami Warunki wstępne, Konfigurowanie środowiska i Publikowanie aplikacji w Google Chat w Przewodniku szybkiego startu. Jedyną różnicą jest to, że musisz ustawić Nazwa aplikacji na Debug App, a adres URL punktu końcowego HTTP na dowolną wartość, np. http://example.com.
IDE skonfigurowane w środowisku lokalnym, które umożliwia debugowanie. W tym przewodniku używamy środowiska Visual Studio CodeIDE i domyślnych funkcji debugowania.
Git zainstalowany w środowisku lokalnym.
Konto ngrok.

Python

najnowsza wersja python3 zainstalowana w Twoim środowisku lokalnym.
Najnowsza wersja narzędzi pip i virtualenv zainstalowanych w środowisku lokalnym, które służą odpowiednio do zarządzania pakietami Pythona i środowiskami wirtualnymi.
Aplikacja HTTP Chat skonfigurowana do obsługi wiadomości. Możesz postępować zgodnie z sekcjami Warunki wstępne, Konfigurowanie środowiska i Publikowanie aplikacji w Google Chat w Przewodniku szybkiego startu. Jedyną różnicą jest to, że musisz ustawić Nazwa aplikacji na Debug App, a adres URL punktu końcowego HTTP na dowolną wartość, np. http://example.com.
IDE skonfigurowane w środowisku lokalnym, które umożliwia debugowanie. W tym przewodniku używamy środowiska Visual Studio CodeIDE i domyślnych funkcji debugowania.
Git zainstalowany w środowisku lokalnym.
Konto ngrok.
Najnowsza wersja gcloud zainstalowana i zainicjowana w Twoim środowisku lokalnym.

Java

Najnowsza stabilna wersja Java SE 11's JDK zainstalowana w Twoim środowisku lokalnym.
najnowsza wersja Apache Maven zainstalowana w Twoim środowisku lokalnym, służy do zarządzania projektami w języku Java;
Aplikacja HTTP Chat skonfigurowana do obsługi wiadomości. Możesz postępować zgodnie z sekcjami Warunki wstępne, Konfigurowanie środowiska i Publikowanie aplikacji w Google Chat w Przewodniku szybkiego startu. Jedyną różnicą jest to, że musisz ustawić Nazwa aplikacji na Debug App, a adres URL punktu końcowego HTTP na dowolną wartość, np. http://example.com.
IDE skonfigurowane w środowisku lokalnym, które umożliwia debugowanie. W tym przewodniku używamy środowiska Visual Studio CodeIDE i domyślnych funkcji debugowania.
Git zainstalowany w środowisku lokalnym.
Konto ngrok.
Najnowsza wersja gcloud zainstalowana i zainicjowana w Twoim środowisku lokalnym.

Udostępnianie usługi localhost publicznie

Aby aplikacja Google Chat mogła uzyskać dostęp do środowiska lokalnego, musisz je połączyć z internetem. Aplikacja ngrok służy do przekierowywania żądań HTTP wysyłanych do publicznego adresu URL do środowiska lokalnego.

W przeglądarce w środowisku lokalnym zaloguj się na konto ngrok.
Zainstaluj aplikację i skonfiguruj authtoken w środowisku lokalnym.
Utwórz stałą domenę na koncie ngrok. W instrukcjach w tym przewodniku jest ona oznaczana jako NGROK_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:

Otwórz stronę Google Chat API
Kliknij kartę Configuration (Konfiguracja).
Kliknij Funkcje interaktywne > Ustawienia połączenia i ustaw wartość pola tekstowego URL punktu końcowego HTTP:
```
https://NGROK_STATIC_DOMAIN
```
Zastąp NGROK_STATIC_DOMAIN domeną statyczną na koncie ngrok.
Kliknij Zapisz.

Aplikacja do obsługi czatu wysyła wszystkie żądania HTTP do domeny statycznej.

Rysunek 2. Aplikacja Chat wysyła wszystkie żądania HTTP do domeny statycznej. Usługa publiczna ngrok działa jako łącznik między aplikacją Google Chat a kodem aplikacji, który jest wykonywany lokalnie.

Testowanie aplikacji Google Chat

Możesz lokalnie wdrażać, konfigurować, testować, debugować i automatycznie ponownie wczytywać aplikację Google Chat.

Node.js

Sklonuj 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 środowisku Visual Studio Code IDE zainstalowanym w środowisku lokalnym:
1. W nowym oknie otwórz folder google-chat-samples/node/basic-app.
2. Skonfiguruj aplikację do debugowania automatycznego przeładowania, dodając 2 skrypty do pliku package.json:
```
{
    ...
    "scripts": {
        ...
        "debug": "node --inspect index.js",
        "debug-watch": "nodemon --watch ./ --exec npm run debug"
    }
    ...
}
```
3. Zainstaluj aplikację z katalogu głównego:
```
npm install
```
4. Utwórz i skonfiguruj uruchomienie o nazwie Debug Watch, które uruchamia skrypt debug-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"]
    }]
}
```
5. Dodaj punkt przerwania, który wstrzymuje przetwarzanie żądania HTTP w pliku index.js, i rozpocznij uruchamianie i debugowanie z dodaną wcześniej konfiguracją Debug Watch. Aplikacja działa i nasłuchuje żądań HTTP na porcie 9000.
  
  Rysunek 3. Aplikacja działa i nasłuchuje żądań HTTP na porcie 9000.
Uruchom aplikację ngrok w środowisku lokalnym:
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
Zastąp NGROK_STATIC_DOMAIN domeną statyczną na koncie ngrok. Wszystkie żądania są teraz przekierowywane do Twojego lokalnego środowiska i portu używanego przez aplikację.

Rysunek 4. Terminal z uruchomionym serwerem ngrok i przekierowaniem.
Aplikacja ngrok uruchamia też interfejs internetowy na Twoim komputerze lokalnym. Możesz monitorować wszystkie działania, otwierając go w przeglądarce.

Rysunek 5. Interfejs internetowy hostowany przez aplikację ngrok nie wyświetla żądań HTTP.
Przetestuj aplikację Czat, wysyłając do niej wiadomość:
- Otwórz Google Chat.
  
  Otwórz Google Chat
- Kliknij Nowy czat .
- W oknie wpisz nazwę aplikacji do czatu.
- W wynikach wyszukiwania znajdź aplikację Google Chat, kliknij Dodaj > Google Chat.
- W polu czatu wpisz Hello i naciśnij enter. Twoja aplikacja Google Chat nie odpowiada, ponieważ jest aktywnie debugowana.
W Visual Studio Code w środowisku lokalnym możesz zobaczyć, że wykonanie zostało wstrzymane w miejscu ustawionego punktu przerwania.

Rysunek 6. Wykonywanie jest wstrzymywane w ustawionym punkcie przerwania.
Gdy wznowisz wykonywanie kodu w debugerze Visual Studio Code przed przekroczeniem limitu czasu przez Google Chat, aplikacja Chat odpowie Your message : Hello.
Możesz sprawdzić dzienniki żądań i odpowiedzi HTTP w interfejsie internetowym aplikacji ngrok w swoim środowisku lokalnym.

Rysunek 7. Żądanie HTTP z interfejsu internetowego hostowanego przez aplikację ngrok.
Aby zmienić zachowanie aplikacji, zastąp Your message kodem Here was your message w elementach 35 w elementach index.json. Po zapisaniu pliku nodemon automatycznie ponownie wczyta aplikację z zaktualizowanym kodem źródłowym, a Visual Studio Code pozostanie w trybie debugowania.

Rysunek 8. Aplikacja działa i nasłuchuje żądań HTTP na porcie 9000 z załadowanym zmienionym kodem.
Tym razem zamiast wysyłać drugą wiadomość Hello w pokoju, możesz wybrać ostatnie żądanie HTTP zapisane w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym i kliknąć Replay. Podobnie jak poprzednio, aplikacja Chat nie odpowiada, ponieważ jest aktywnie debugowana.
Gdy wznowisz wykonywanie aplikacji Visual Studio Code za pomocą jej debugera, zobaczysz w interfejsie internetowym hostowanym przez aplikację ngrok w Twoim środowisku lokalnym, że aplikacja wygenerowała odpowiedź z aktualną wersją wiadomości Here was your message : Hello.

Python

Uzyskaj nowe dane logowania użytkownika, które będą używane do domyślnego uwierzytelniania aplikacji:
```
gcloud config set project PROJECT_ID
gcloud auth application-default login
```
Zastąp PROJECT_ID identyfikatorem projektu aplikacji w Google Cloud.
Sklonuj repozytorium googleworkspace/google-chat-samples z GitHub do środowiska lokalnego. Zawiera ono kod aplikacji:
```
git clone https://github.com/googleworkspace/google-chat-samples.git
```
W środowisku Visual Studio Code IDE zainstalowanym w środowisku lokalnym:
1. W nowym oknie otwórz folder google-chat-samples/python/avatar-app.
2. Utwórz nowe środowisko wirtualne dla Pythona env i aktywuj je:
```
virtualenv env
source env/bin/activate
```
3. Zainstaluj wszystkie zależności projektu za pomocą narzędzia pip w środowisku wirtualnym:
```
pip install -r requirements.txt
```
4. Utwórz plik .vscode/launch.json w katalogu głównym i skonfiguruj uruchomienie o nazwie Debug Watch, które uruchamia aplikację z modułu functions-framework na porcie 9000 w trybie debugowania w środowisku wirtualnym env:
```
{
    "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"
        ]
    }]
}
```
5. Dodaj punkt przerwania, który wstrzymuje przetwarzanie żądania HTTP w pliku main.py, i rozpocznij uruchamianie i debugowanie z dodaną wcześniej konfiguracją Debug Watch. Aplikacja działa i nasłuchuje żądań HTTP na porcie 9000.
  
  Rysunek 3. Aplikacja działa i nasłuchuje żądań HTTP na porcie 9000.
Uruchom aplikację ngrok w środowisku lokalnym:
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
Zastąp NGROK_STATIC_DOMAIN domeną statyczną na koncie ngrok. Wszystkie żądania są teraz przekierowywane do Twojego lokalnego środowiska i portu używanego przez aplikację.

Rysunek 4. Terminal z uruchomionym serwerem ngrok i przekierowaniem.
Aplikacja ngrok uruchamia też interfejs internetowy na Twoim komputerze lokalnym. Możesz monitorować wszystkie działania, otwierając go w przeglądarce.

Rysunek 5. Interfejs internetowy hostowany przez aplikację ngrok nie wyświetla żądań HTTP.
Przetestuj aplikację Czat, wysyłając do niej wiadomość:
- Otwórz Google Chat.
  
  Otwórz Google Chat
- Kliknij Nowy czat .
- W oknie wpisz nazwę aplikacji do czatu.
- W wynikach wyszukiwania znajdź aplikację Google Chat, kliknij Dodaj > Google Chat.
- W polu czatu wpisz Hey! i kliknij enter. Twoja aplikacja do czatu nie odpowiada, ponieważ jest aktywnie debugowana.
W Visual Studio Code w środowisku lokalnym możesz zobaczyć, że wykonanie zostało wstrzymane w miejscu ustawionego punktu przerwania.

Rysunek 6. Wykonywanie jest wstrzymywane w ustawionym punkcie przerwania.
Gdy wznowisz wykonywanie z debugera Visual Studio Code, zanim Google Chat przekroczy limit czasu, aplikacja Google Chat odpowie z Twoim imieniem i nazwiskiem oraz awatarem w wiadomości.
Możesz sprawdzić dzienniki żądań i odpowiedzi HTTP w interfejsie internetowym aplikacji ngrok w swoim środowisku lokalnym.

Rysunek 7. Żądanie HTTP z interfejsu internetowego hostowanego przez aplikację ngrok.
Aby zmienić zachowanie aplikacji, zastąp Hello wartością Hey w pliku 51 w pliku main.py. Po zapisaniu pliku Visual Studio Codeaplikacja automatycznie ponownie wczyta aplikację z zaktualizowanym kodem źródłowym i pozostanie w trybie debugowania.

Rysunek 8. Aplikacja działa i nasłuchuje żądań HTTP na porcie 9000 z załadowanym zmienionym kodem.
Tym razem zamiast wysyłać drugą wiadomość Hey! w pokoju możesz wybrać ostatnie żądanie HTTP zapisane w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym i kliknąć Replay. Podobnie jak poprzednio, Twoja aplikacja Chat nie odpowiada, ponieważ jest obecnie debugowana.
Gdy wznowisz wykonywanie kodu w debugerze aplikacji Visual Studio Code, w interfejsie internetowym hostowanym przez aplikację Visual Studio Code w Twoim środowisku lokalnym możesz zobaczyć, że aplikacja generuje odpowiedź z aktualną wersją wiadomości.ngrok

Java

Uzyskaj nowe dane logowania użytkownika, które będą używane do domyślnego uwierzytelniania aplikacji:
```
gcloud config set project PROJECT_ID
gcloud auth application-default login
```
Zastąp PROJECT_ID identyfikatorem projektu aplikacji w Google Cloud.
Sklonuj repozytorium googleworkspace/google-chat-samples z GitHub w środowisku lokalnym. Zawiera ono kod aplikacji:
```
git clone https://github.com/googleworkspace/google-chat-samples.git
```
W środowisku Visual Studio Code IDE zainstalowanym w środowisku lokalnym:
1. W nowym oknie otwórz folder google-chat-samples/java/avatar-app.
2. Skonfiguruj projekt Maven, aby lokalnie uruchamiać aplikację App na porcie 9000, dodając w pliku pom.xml wtyczkę kompilacji function-maven-plugin z Cloud Functions Framework:
```
...
<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>
...
```
3. Teraz możesz uruchomić aplikację lokalnie w trybie debugowania:
```
mvnDebug function:run
Preparing to execute Maven in debug mode
Listening for transport dt_socket at address: 8000
```
4. Utwórz plik .vscode/launch.json w katalogu głównym i skonfiguruj uruchomienie o nazwie Remote Debug Watch, które łączy się z aplikacją uruchomioną wcześniej za pomocą portu 8000:
```
{
    "version": "0.2.0",
    "configurations": [{
        "type": "java",
        "request": "attach",
        "name": "Remote Debug Watch",
        "projectName": "http-function",
        "hostName": "localhost",
        "port": 8000
    }]
}
```
5. Dodaj punkt przerwania, który wstrzymuje przetwarzanie żądania HTTP w pliku App.java, i rozpocznij dołączanie i debugowanie za pomocą wcześniej dodanej konfiguracji Remote Debug Watch. Aplikacja jest teraz uruchomiona i nasłuchuje żądań HTTP na porcie 9000.
  
  Rysunek 3. Aplikacja działa i nasłuchuje żądań HTTP na porcie 9000.
Uruchom aplikację ngrok w środowisku lokalnym:
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
Zastąp NGROK_STATIC_DOMAIN domeną statyczną na koncie ngrok. Wszystkie żądania są teraz przekierowywane do Twojego lokalnego środowiska i portu używanego przez aplikację.

Rysunek 4. Terminal z uruchomionym serwerem ngrok i przekierowaniem.
Aplikacja ngrok uruchamia też interfejs internetowy na Twoim komputerze lokalnym. Możesz monitorować wszystkie działania, otwierając go w przeglądarce.

Rysunek 5. Interfejs internetowy hostowany przez aplikację ngrok nie wyświetla żądań HTTP.
Przetestuj aplikację Czat, wysyłając do niej wiadomość:
- Otwórz Google Chat.
  
  Otwórz Google Chat
- Kliknij Nowy czat .
- W oknie wpisz nazwę aplikacji do czatu.
- W wynikach wyszukiwania znajdź aplikację Google Chat, kliknij Dodaj > Google Chat.
- W polu czatu wpisz Hey! i kliknij enter. Twoja aplikacja do czatu nie odpowiada, ponieważ jest aktywnie debugowana.
W Visual Studio Code w środowisku lokalnym możesz zobaczyć, że wykonanie zostało wstrzymane w miejscu ustawionego punktu przerwania.

Rysunek 6. Wykonywanie jest wstrzymywane w ustawionym punkcie przerwania.
Gdy wznowisz wykonywanie z debugera Visual Studio Code, zanim Google Chat przekroczy limit czasu, aplikacja Google Chat odpowie z Twoim imieniem i nazwiskiem oraz awatarem w wiadomości.
Możesz sprawdzić dzienniki żądań i odpowiedzi HTTP w interfejsie internetowym aplikacji ngrok w swoim środowisku lokalnym.

Rysunek 7. Żądanie HTTP z interfejsu internetowego hostowanego przez aplikację ngrok.
Aby zmienić zachowanie aplikacji, zastąp Hello wartością Hey w tagu inline55 pliku App.java, ponownie uruchom proces mvnDebug i ponownie uruchom Remote Debug Watch, aby ponownie dołączyć i wznowić debugowanie.
Tym razem zamiast wysyłać drugą wiadomość Hey! w pokoju, możesz wybrać ostatnie żądanie HTTP zapisane w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym i kliknąć Replay. Podobnie jak poprzednio, aplikacja Chat nie odpowiada, ponieważ jest aktywnie debugowana.
Gdy wznowisz wykonywanie kodu w debugerze aplikacji Visual Studio Code, w interfejsie internetowym hostowanym przez aplikację ngrok w Twoim środowisku lokalnym możesz zobaczyć, że aplikacja generuje odpowiedź z aktualną wersją wiadomości.

Debugowanie z dalnie obsługiwanego środowiska

W tej sekcji będziesz korzystać z aplikacji Google Chat, która działa w środowisku zdalnym.

Debugowanie z dalszego środowiska

Rysunek 9. Debugowanie z dalszego środowiska.

Wymagania wstępne

Pokój wiadomości bezpośrednich z aplikacją Google Chat. Aby go rozpocząć, otwórz sekcję Testowanie aplikacji Google Chat w Przewodniku szybkiego uruchamiania i wyszukaj aplikację Google Chat.
Aplikacja działająca w Twoim środowisku zdalnym z włączonym debugerem na danym porcie. W instrukcjach w tym przewodniku jest ona oznaczana jako REMOTE_DEBUG_PORT.
Środowisko lokalne może ssh do środowiska zdalnego.
IDE skonfigurowane w środowisku lokalnym, które umożliwia debugowanie. W tym przewodniku używamy Visual Studio CodeIDE i domyślnych funkcji debugowania.

Łączenie środowisk lokalnych i zdalnych

W środowisku lokalnym, z którego chcesz zainicjować połączenie klienta 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 Twoim środowisku lokalnym.
REMOTE_USERNAME: nazwa użytkownika w środowisku zdalnym.
REMOTE_ADDRESS: adres środowiska zdalnego.
REMOTE_DEBUG_PORT: port debugowania w zdalnym środowisku.

Port debugowania w Twoim środowisku lokalnym jest teraz połączony z portem debugowania w Twoim środowisku zdalnym.

Rozpocznij debugowanie

W zainstalowanym w środowisku lokalnym środowisku IDE Visual Studio Code 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 nazwie Debug Remote, które łączy się z portem 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 swoim środowisku lokalnym.

Dodaj w źródłowym kodzie aplikacji punkt przerwania, który wstrzymuje przetwarzanie żądania HTTP, i uruchom debugowanie z dodaną wcześniej konfiguracją Debug Remote.

W pokoju czatu w aplikacji Google Chat wpisz wszystko, co chcesz przetestować, i naciśnij enter. Twoja aplikacja do czatu nie odpowiada, ponieważ jest aktywnie debugowana w IDE Visual Studio Code.

Powiązane artykuły

Dowiedz się, jak włączyć i wysyłać zapytania do logów błędów.
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ą być wykluczeni z pokoju”.
Dowiedz się, jak naprawiać błędy kart, takie jak komunikaty na karcie, dialogi czy podgląd linków, które nie wyświetlają się lub nie działają zgodnie z oczekiwaniami.