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.
Rysunek 1. Debuguj w lokalnym środowisku programistycznym.
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
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 GitHubgoogleworkspace/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
ivirtualenv
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 GitHubgoogleworkspace/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 GitHubgoogleworkspace/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 jakoNGROK_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 konciengrok
.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
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:- W nowym oknie otwórz folder
add-ons-samples/node/3p-resources
. 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" } ... }
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 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.
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
naCase:
w tekście51
windex.js
. Po zapisaniu plikunodemon
automatycznie ponownie wczytuje aplikację ze zaktualizowanym kodem źródłowym, aVisual 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:- W nowym oknie otwórz folder
add-ons-samples/python/3p-resources/create_link_preview
. 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", "create_link_preview", "--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 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.
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
naCase:
w tekście56
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 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:- W nowym oknie otwórz folder
add-ons-samples/java/3p-resources
. Skonfiguruj projekt Maven do lokalnego uruchamiania aplikacji
CreateLinkPreview
na porcie9000
. W tym celu dodaj wtyczkę kompilacji Cloud Functionss 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>CreateLinkPreview</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
CreateLinkPreview.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 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.
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
naCase:
w tekście78
w plikuCreateLinkPreview.java
, uruchom ponownie procesmvnDebug
i uruchom ponownieRemote 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.
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 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
.
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.