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

Debugowanie dodatków do Google Workspace

Jeśli jesteś deweloperem dodatków do Google Workspace, być może musisz debugować kod, aby przetestować zmiany lub rozwiązać złożone problemy. Debugowanie dodatków do Google Workspace można przeprowadzić na wiele różnych sposobów w zależności od architektury aplikacji, jej funkcji, sposobu wdrażania aplikacji i Twoich preferencji.

Z tego artykułu dowiesz się, jak debugować dodatek do Google Workspace 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 dodatkiem do Google Workspace, który działa w Twoim środowisku lokalnym.

Debuguj z lokalnego
środowiska programistycznego

Rysunek 1. Debuguj w lokalnym środowisku programistycznym.

Wymagania wstępne

Node.js

Najnowsze wersje node i npm zainstalowane w środowisku lokalnym.
Najnowsza wersja pakietu nodemon zainstalowana w środowisku lokalnym jest używana do automatycznego ponownego wczytywania:
```
npm install -g nodemon
```
Projekt Google Cloud. Możesz wykonać czynności opisane w sekcjach Wymagania wstępne i Konfigurowanie środowiska w krótkim wprowadzeniu.
Kod dodatku do Google Workspace do debugowania w środowisku lokalnym. W celach ilustracyjnych użyjemy funkcji linku do podglądu z przykładowego kodu 3p-resources z repozytorium GitHub googleworkspace/add-ons-samples w tym przewodniku.
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.
konto ngrok,
Najnowsza wersja pakietu gcloud zainstalowana i zainicjowana w środowisku lokalnym.

Python

Najnowsza wersja aplikacji python3 zainstalowana w środowisku lokalnym.
Najnowsza wersja pip i virtualenv zainstalowana w środowisku lokalnym służy do zarządzania pakietami Pythona i środowiskami wirtualnymi odpowiednio do zarządzania pakietami Pythona.
Projekt Google Cloud. Możesz wykonać czynności opisane w sekcjach Wymagania wstępne i Konfigurowanie środowiska w krótkim wprowadzeniu.
Kod dodatku do Google Workspace do debugowania w środowisku lokalnym. W celach ilustracyjnych użyjemy funkcji linku do podglądu z przykładowego kodu 3p-resources z repozytorium GitHub googleworkspace/add-ons-samples w tym przewodniku.
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.
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.
Projekt Google Cloud. Możesz wykonać czynności opisane w sekcjach Wymagania wstępne i Konfigurowanie środowiska w krótkim wprowadzeniu.
Kod dodatku do Google Workspace do debugowania w środowisku lokalnym. W celach ilustracyjnych użyjemy funkcji linku do podglądu z przykładowego kodu 3p-resources z repozytorium GitHub googleworkspace/add-ons-samples w tym przewodniku.
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.
konto ngrok,
Najnowsza wersja pakietu gcloud zainstalowana i zainicjowana w środowisku lokalnym.

Udostępnij usługę lokalnego hosta jako publicznie

Aby dodatek Google Workspace mógł 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 jako NGROK_STATIC_DOMAIN.

Tworzenie i instalowanie wdrożenia dodatku

Skonfiguruj dodatek do Google Workspace tak, aby wysyłał wszystkie żądania HTTP do Twojej domeny statycznej. Plik wdrożenia powinien wyglądać mniej więcej tak:

{
  "oauthScopes": [
    "https://www.googleapis.com/auth/workspace.linkpreview",
    "https://www.googleapis.com/auth/workspace.linkcreate"
  ],
  "addOns": {
    "common": {
      "name": "Manage support cases",
      "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png",
      "layoutProperties": {
        "primaryColor": "#dd4b39"
      }
    },
    "docs": {
      "linkPreviewTriggers": [
        {
          "runFunction": "NGROK_STATIC_DOMAIN",
          "patterns": [
            {
              "hostPattern": "example.com",
              "pathPrefix": "support/cases"
            },
            {
              "hostPattern": "*.example.com",
              "pathPrefix": "cases"
            },
            {
              "hostPattern": "cases.example.com"
            }
          ],
          "labelText": "Support case",
          "localizedLabelText": {
            "es": "Caso de soporte"
          },
          "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png"
        }
      ],
      "createActionTriggers": [
        {
          "id": "createCase",
          "labelText": "Create support case",
          "localizedLabelText": {
            "es": "Crear caso de soporte"
          },
          "runFunction": "$URL2",
          "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png"
        }
      ]
    }
  }
}

Zastąp NGROK_STATIC_DOMAIN domeną statyczną na koncie ngrok.

Ustaw projekt Google Cloud do użycia:
```
gcloud config set project PROJECT_ID
```
Uzyskiwanie nowych danych logowania użytkownika do wykorzystania na potrzeby domyślnych danych logowania aplikacji:
```
gcloud auth application-default login
```
Zastąp PROJECT_ID identyfikatorem projektu projektu Google Cloud aplikacji.

Utwórz wdrożenie:

gcloud workspace-add-ons deployments create manageSupportCases \
    --deployment-file=DEPLOYMENT_FILE_PATH

Zastąp DEPLOYMENT_FILE_PATH ścieżką pliku wdrożenia.

Zainstaluj wdrożenie:

gcloud workspace-add-ons deployments install manageSupportCases

Dodatek do Google Workspace wysyła wszystkie żądania HTTP do domeny statycznej

Rysunek 2. Dodatek do Google Workspace wysyła wszystkie żądania HTTP do domeny statycznej. Usługa publiczna ngrok działa jako most między dodatkiem do Google Workspace a kodem aplikacji uruchamianym lokalnie.

Testowanie dodatku do Google Workspace

Dodatek do Google Workspace możesz wdrażać lokalnie, testować, debugować i automatycznie wczytywać go ponownie.

Node.js

W IDE Visual Studio Code zainstalowanym w środowisku lokalnym wykonaj te czynności:
1. W nowym oknie otwórz folder add-ons-samples/node/3p-resources.
2. Skonfiguruj aplikację do lokalnego uruchamiania i automatycznego ponownego wczytywania danych, dodając 1 zależność i 2 skrypty do pliku package.json:
```
{
    ...
    "dependencies": {
      ...
      "@google-cloud/functions_framework": "^3.3.0"
    },
    "scripts": {
        ...
        "start": "npx functions-framework --target=createLinkPreview --port=9000",
        "debug-watch": "nodemon --watch ./ --exec npm start"
    }
    ...
}
```
3. Zainstaluj aplikację z katalogu głównego:
```
npm install
```
4. Utwórz i skonfiguruj uruchomienie o nazwie Debug Watch, które będzie uruchamiać skrypt debug-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"]
    }]
}
```
5. Dodaj punkt przerwania, który wstrzymuje przetwarzanie żądania HTTP w pliku index.js, i rozpocznij uruchamianie i debugowanie z użyciem konfiguracji Debug Watch dodanej wcześniej. 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 ś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 dodatek do Google Workspace, wyświetlając podgląd adresu URL zgłoszenia w nowym dokumencie Google, korzystając z konta testera:
- Utwórz nowy dokument Google.
  
  Tworzenie nowego dokumentu Google
- Wpisz ten link i naciśnij enter:
```
https://example.com/support/case/?name=Name1&description=Description1&priority=P1
```
- Kliknij link.
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.
Jeśli wznowisz wykonywanie kodu z debugera aplikacji Visual Studio Code, zanim limit czasu dodatków do Google Workspace zostanie przekroczony, dodatek do Google Workspace wyświetli podgląd linku z pamięci podręcznej w dokumencie Google.
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ń Case na Case: w tekście 51 w index.js. Po zapisaniu pliku nodemon automatycznie ponownie wczytuje aplikację ze zaktualizowanym kodem źródłowym, a Visual Studio Code pozostaje w trybie debugowania.

Rysunek 8. Aplikacja działa i nasłuchuje żądań HTTP na porcie 9000 z załadowaną zmianą kodu.
Tym razem zamiast klikać link i czekać kilka sekund w nowym dokumencie Google, możesz wybrać ostatnie żądanie HTTP zarejestrowane w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym i kliknąć Replay. Tak jak ostatnio, dodatek do Google Workspace nie odpowiada, ponieważ jest w trakcie debugowania.
Gdy wznowisz wykonywanie z poziomu debugera Visual Studio Code, w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym zobaczysz, że aplikacja generuje odpowiedź ze zaktualizowaną wersją karty podglądu.

Python

W IDE Visual Studio Code zainstalowanym w środowisku lokalnym wykonaj te czynności:
1. W nowym oknie otwórz folder add-ons-samples/python/3p-resources/create_link_preview.
2. Utwórz nowe środowisko wirtualne dla języka Python 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 będzie 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", "create_link_preview",
            "--port", "9000",
            "--debug"
        ]
    }]
}
```
5. Dodaj punkt przerwania, który wstrzymuje przetwarzanie żądania HTTP w pliku main.py, i rozpocznij uruchamianie i debugowanie z użyciem konfiguracji Debug Watch dodanej wcześniej. 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 ś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 dodatek do Google Workspace, wyświetlając podgląd adresu URL zgłoszenia w nowym dokumencie Google, korzystając z konta testera:
- Utwórz nowy dokument Google.
  
  Tworzenie nowego dokumentu Google
- Wpisz ten link i naciśnij enter:
```
https://example.com/support/case/?name=Name1&description=Description1&priority=P1
```
- Kliknij link.
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.
Jeśli wznowisz wykonywanie kodu z debugera aplikacji Visual Studio Code, zanim limit czasu dodatków do Google Workspace zostanie przekroczony, dodatek do Google Workspace wyświetli podgląd linku z pamięci podręcznej w dokumencie Google.
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ń Case na Case: w tekście 56 w pliku main.py. Po zapisaniu pliku Visual 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 klikać link i czekać kilka sekund w nowym dokumencie Google, możesz wybrać ostatnie żądanie HTTP zarejestrowane w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym i kliknąć Replay. Tak jak ostatnio, dodatek do Google Workspace nie odpowiada, ponieważ jest w trakcie debugowania.
Gdy wznowisz wykonywanie z poziomu debugera Visual Studio Code, w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym zobaczysz, że aplikacja generuje odpowiedź ze zaktualizowaną wersją karty podglądu.

Java

W IDE Visual Studio Code zainstalowanym w środowisku lokalnym wykonaj te czynności:
1. W nowym oknie otwórz folder add-ons-samples/java/3p-resources.
2. Skonfiguruj projekt Maven do lokalnego uruchamiania aplikacji CreateLinkPreview na porcie 9000. W tym celu dodaj wtyczkę kompilacji Cloud Functionss Framework function-maven-plugin w pliku pom.xml:
```
...
<plugin>
    <groupId>com.google.cloud.functions</groupId>
    <artifactId>function-maven-plugin</artifactId>
    <version>0.11.0</version>
    <configuration>
        <functionTarget>CreateLinkPreview</functionTarget>
        <port>9000</port>
    </configuration>
</plugin>
...
```
3. 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
```
4. Utwórz plik .vscode/launch.json w katalogu głównym i skonfiguruj uruchomienie o nazwie Remote Debug Watch, które będzie dołączać do aplikacji uruchomionej wcześniej przez port 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 żądań HTTP w pliku CreateLinkPreview.java, i rozpocznij dołączanie i debugowanie za pomocą konfiguracji Remote Debug Watch dodanej wcześniej. Aplikacja działa teraz i nasłuchuje żądań HTTP na porcie 9000.
  
  Rys. 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 ś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 dodatek do Google Workspace, wyświetlając podgląd adresu URL zgłoszenia w nowym dokumencie Google, korzystając z konta testera:
- Utwórz nowy dokument Google.
  
  Tworzenie nowego dokumentu Google
- Wpisz ten link i naciśnij enter:
```
https://example.com/support/case/?name=Name1&description=Description1&priority=P1
```
- Kliknij link.
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.
Jeśli wznowisz wykonywanie kodu z debugera aplikacji Visual Studio Code, zanim limit czasu dodatków do Google Workspace zostanie przekroczony, dodatek do Google Workspace wyświetli podgląd linku z pamięci podręcznej w dokumencie Google.
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ń Case na Case: w tekście 78 w pliku CreateLinkPreview.java, uruchom ponownie proces mvnDebug i uruchom ponownie Remote Debug Watch, aby podłączyć i jeszcze raz rozpocząć debugowanie.
Tym razem zamiast klikać link i czekać kilka sekund w nowym dokumencie Google, możesz wybrać ostatnie żądanie HTTP zarejestrowane w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym i kliknąć Replay. Tak jak ostatnio, dodatek do Google Workspace nie odpowiada, ponieważ jest w trakcie debugowania.
Gdy wznowisz wykonywanie z poziomu debugera Visual Studio Code, w interfejsie internetowym hostowanym przez aplikację ngrok w środowisku lokalnym zobaczysz, że aplikacja generuje odpowiedź ze zaktualizowaną wersją karty podglądu.

Debuguj ze środowiska zdalnego

W tej sekcji będziesz korzystać z dodatku do Google Workspace, który działa w środowisku zdalnym.

Debuguj ze środowiska zdalnego

Rysunek 9. Debuguj ze środowiska zdalnego.

Wymagania wstępne

Dodatek do Google Workspace został wdrożony i zainstalowany.
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 nazwie Debug 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.

Interakcja z zainstalowanym dodatkiem do Google Workspace. Dodatek do Google Workspace nie odpowiada, ponieważ jest aktywnie debugowany w IDE Visual Studio Code.

Powiązane artykuły

Dowiedz się, jak wysyłać zapytania do dzienników błędów.