Как разработчику приложений Google Chat вам может потребоваться отладка кода для проверки изменений или устранения сложных проблем. Отладку приложений чата можно выполнять разными способами в зависимости от архитектуры вашего приложения, его функций, способа его развертывания и ваших предпочтений.
На этой странице объясняется, как отладить приложение HTTP Chat с помощью ngrok — единой входящей платформы, которую можно использовать для тестирования локальных сред разработки. В этом руководстве вы тестируете изменения кода в локальной среде и устраняете проблемы в удаленной среде.
Отладка из локальной среды разработки
В этом разделе вы взаимодействуете с приложением чата, которое выполняется в вашей локальной среде.
Рисунок 1. Отладка в локальной среде разработки.
Мастерская
Node.js
Питон
Ява
Предварительные условия
Node.js
- Последние версии
node
иnpm
, установленные в вашей локальной среде. Последняя версия
nodemon
, установленная в вашей локальной среде, используется для автоматической перезагрузки:npm install -g nodemon
Приложение HTTP Chat, настроенное для обмена сообщениями. Вы можете следовать разделам «Предварительные требования» , «Настройка среды» и «Публикация приложения в Google Chat» краткого руководства . Единственное отличие состоит в том, что вам необходимо установить имя приложения
Debug App
и URL-адрес приложения , напримерhttp://example.com
.IDE, установленная в вашей локальной среде и поддерживающая отладку. В этом руководстве в целях иллюстрации мы используем
Visual Studio Code
IDE и ее функции отладки по умолчанию.Git
установлен в вашей локальной среде.Аккаунт
ngrok
.
Питон
- Последняя версия
python3
, установленная в вашей локальной среде. - В вашей локальной среде установлены последние версии
pip
иvirtualenv
. Они используются для управления пакетами Python и виртуальными средами соответственно. - Приложение HTTP Chat, настроенное для обмена сообщениями. Вы можете следовать разделам «Предварительные требования» , «Настройка среды» и «Публикация приложения в Google Chat» краткого руководства . Единственное отличие состоит в том, что вам необходимо установить имя приложения
Debug App
и URL-адрес приложения , напримерhttp://example.com
. - IDE, установленная в вашей локальной среде и поддерживающая отладку. В этом руководстве в целях иллюстрации мы используем
Visual Studio Code
IDE и ее функции отладки по умолчанию. -
Git
установлен в вашей локальной среде. - Аккаунт
ngrok
. - Последняя версия
gcloud
установлена и инициализирована в вашей локальной среде.
Ява
- Последняя стабильная версия
Java SE 11's JDK
установленная в вашей локальной среде. - Последняя версия
Apache Maven
, установленная в вашей локальной среде, используется для управления проектами Java. - Приложение HTTP Chat, настроенное для обмена сообщениями. Вы можете следовать разделам «Предварительные требования» , «Настройка среды» и «Публикация приложения в Google Chat» краткого руководства . Единственное отличие состоит в том, что вам необходимо установить имя приложения
Debug App
и URL-адрес приложения , напримерhttp://example.com
. - IDE, установленная в вашей локальной среде и поддерживающая отладку. В этом руководстве в целях иллюстрации мы используем
Visual Studio Code
IDE и ее функции отладки по умолчанию. -
Git
установлен в вашей локальной среде. - Аккаунт
ngrok
. - Последняя версия
gcloud
установлена и инициализирована в вашей локальной среде.
Сделайте службу localhost общедоступной.
Вам необходимо подключить локальную среду к Интернету, чтобы приложение Chat могло получить к ней доступ. Приложение ngrok
используется для перенаправления HTTP-запросов, сделанных на общедоступный URL-адрес, в вашу локальную среду.
- В браузере в вашей локальной среде войдите в свою учетную запись
ngrok
. - Установите приложение и настройте
authtoken
в своей локальной среде. - Создайте статический домен в своей учетной записи
ngrok
, в инструкциях этого руководства он обозначается какNGROK_STATIC_DOMAIN
.
Настройте приложение чата
Настройте приложение Chat для отправки всех HTTP-запросов в ваш статический домен.
В консоли Google Cloud откройте страницу Google Chat API:
Откройте вкладку Конфигурация .
Перейдите в «Интерактивные функции» > «Настройки подключения» и установите значение текстового поля «URL-адрес приложения» :
https://NGROK_STATIC_DOMAIN
Замените
NGROK_STATIC_DOMAIN
на статический домен в вашей учетной записиngrok
.Нажмите Сохранить .
Рисунок 2. Приложение Chat отправляет все свои HTTP-запросы в статический домен. Публичная служба ngrok
действует как мост между приложением Chat и кодом приложения, который выполняется локально.
Протестируйте приложение Чат
Вы можете локально развернуть, настроить, протестировать, отладить и автоматически перезагрузить приложение Chat.
Node.js
Клонируйте репозиторий
googleworkspace/google-chat-samples
из GitHub в вашу локальную среду. Он содержит код приложения для выполнения:git clone https://github.com/googleworkspace/google-chat-samples.git
В среде
Visual Studio Code
IDE, установленной в вашей локальной среде, выполните следующие действия:- В новом окне откройте папку
google-chat-samples/node/basic-app
. Настройте приложение для автоматической перезагрузки отладки, добавив два скрипта в файл
package.json
:{ ... "scripts": { ... "debug": "node --inspect index.js", "debug-watch": "nodemon --watch ./ --exec npm run debug" } ... }
Из корневого каталога установите приложение:
npm install
Создайте и настройте запуск с именем
Debug Watch
, который запускаетdebug-watch
скрипта, создав файл.vscode/launch.json
в корневом каталоге:{ "version": "0.2.0", "configurations": [{ "type": "node", "request": "launch", "name": "Debug Watch", "cwd": "${workspaceRoot}", "runtimeExecutable": "npm", "runtimeArgs": ["run-script", "debug-watch"] }] }
Добавьте точку останова, которая приостанавливает обработку HTTP-запроса в файле
index.js
, и начните работу и отладку с добавленной ранее конфигурациейDebug Watch
. Приложение теперь работает и прослушивает HTTP-запросы на порту9000
.Рисунок 3. Приложение запущено и прослушивает HTTP-запросы на порту
9000
.
- В новом окне откройте папку
Запустите приложение
ngrok
в своей локальной среде:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
Замените
NGROK_STATIC_DOMAIN
статическим доменом в вашей учетной записиngrok
. Все запросы теперь перенаправляются в вашу локальную среду и порт, используемый приложением.Рисунок 4. Терминал с запущенным и перенаправленным сервером
ngrok
.Веб-интерфейс также запускается на вашем локальном хосте с помощью приложения
ngrok
, вы можете отслеживать все действия, открыв его в браузере.Рисунок 5. Веб-интерфейс приложения
ngrok
, в котором нет HTTP-запросов.Проверьте свое приложение Chat, отправив ему прямое сообщение:
Откройте Google Чат.
Нажмите «
новый чат» .В диалоговом окне введите название вашего приложения чата.
В результатах поиска найдите свое приложение Chat, нажмите «Добавить» > «Чат» .
В области прямых сообщений введите
Hello
и нажмитеenter
. Ваше приложение чата не отвечает, поскольку оно активно отлаживается.
В
Visual Studio Code
в вашей локальной среде вы можете видеть, что выполнение приостанавливается в установленной точке останова.Рисунок 6. Выполнение приостанавливается в установленной точке останова.
Когда вы возобновляете выполнение
Visual Studio Code
из отладчика до истечения времени ожидания Google Chat, приложение Chat отвечает наYour message : Hello
.Вы можете проверить журналы HTTP-запросов и ответов из веб-интерфейса, размещенного приложением
ngrok
в вашей локальной среде.Рисунок 7. HTTP-запрос из веб-интерфейса приложения
ngrok
.Чтобы изменить поведение приложения, замените
Your message
наHere was your message
встроенное в строку35
файлаindex.json
. Когда вы сохраняете файл,nodemon
автоматически перезагружает приложение с обновленным исходным кодом, аVisual Studio Code
остается в режиме отладки.Рисунок 8. Приложение запущено и прослушивает HTTP-запросы на порту
9000
с загруженным изменением кода.На этот раз вместо отправки второго сообщения
Hello
в пространстве вы можете выбрать последний HTTP-запрос, зарегистрированный в веб-интерфейсе, размещенном приложениемngrok
в вашей локальной среде, и нажатьReplay
. Как и в прошлый раз, ваше приложение чата не отвечает, поскольку оно активно отлаживается.Когда вы возобновляете выполнение из отладчика
Visual Studio Code
вы можете видеть из веб-интерфейса, размещенного приложениемngrok
в вашей локальной среде, что приложение генерирует ответ с обновленной версией сообщенияHere was your message : Hello
.
Питон
Получите новые учетные данные пользователя для использования в качестве учетных данных приложения по умолчанию :
gcloud config set project PROJECT_ID
gcloud auth application-default login
Замените
PROJECT_ID
идентификатором облачного проекта приложения.Клонируйте репозиторий
googleworkspace/google-chat-samples
из GitHub в свою локальную среду. Он содержит код приложения:git clone https://github.com/googleworkspace/google-chat-samples.git
В среде
Visual Studio Code
IDE, установленной в вашей локальной среде, выполните следующие действия:- В новом окне откройте папку
google-chat-samples/python/avatar-app
. Создайте новую виртуальную среду для
env
Python и активируйте ее:virtualenv env
source env/bin/activate
Установите все зависимости проекта с помощью
pip
в виртуальной среде:pip install -r requirements.txt
Создайте файл
.vscode/launch.json
в корневом каталоге и настройте запуск с именемDebug Watch
, который запускает приложение изfunctions-framework
модуля на порту9000
в режиме отладки в виртуальной среде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" ] }] }
Добавьте точку останова, которая приостанавливает обработку HTTP-запроса в файле
main.py
, и начните работу и отладку с добавленной ранее конфигурациейDebug Watch
. Приложение теперь работает и прослушивает HTTP-запросы на порту9000
.Рисунок 3. Приложение запущено и прослушивает HTTP-запросы на порту
9000
.
- В новом окне откройте папку
Запустите приложение
ngrok
в своей локальной среде:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
Замените
NGROK_STATIC_DOMAIN
статическим доменом в вашей учетной записиngrok
. Все запросы теперь перенаправляются в вашу локальную среду и порт, используемый приложением.Рисунок 4. Терминал с запущенным и перенаправленным сервером
ngrok
.Веб-интерфейс также запускается на вашем локальном хосте с помощью приложения
ngrok
, вы можете отслеживать все действия, открыв его в браузере.Рисунок 5. Веб-интерфейс приложения
ngrok
, в котором нет HTTP-запросов.Проверьте свое приложение Chat, отправив ему прямое сообщение:
Откройте Google Чат.
Нажмите «
новый чат» .В диалоговом окне введите название вашего приложения чата.
В результатах поиска найдите свое приложение Chat, нажмите «Добавить» > «Чат» .
В области прямого сообщения введите
Hey!
и нажмитеenter
. Ваше приложение чата не отвечает, поскольку оно активно отлаживается.
В
Visual Studio Code
в вашей локальной среде вы можете видеть, что выполнение приостанавливается в установленной точке останова.Рисунок 6. Выполнение приостанавливается в установленной точке останова.
Когда вы возобновляете выполнение
Visual Studio Code
из отладчика до истечения времени ожидания Google Chat, приложение Chat отвечает вашим именем и изображением аватара в сообщении.Вы можете проверить журналы HTTP-запросов и ответов из веб-интерфейса, размещенного приложением
ngrok
в вашей локальной среде.Рисунок 7. HTTP-запрос из веб-интерфейса приложения
ngrok
.Чтобы изменить поведение приложения, замените
Hello
наHey
в строке51
файлаmain.py
Когда вы сохраняете файл,Visual Studio Code
автоматически перезагружает приложение с обновленным исходным кодом и остается в режиме отладки.Рис. 8. Приложение запущено и прослушивает HTTP-запросы на порту
9000
с загруженным изменением кода.На этот раз вместо отправки второго сообщения
Hey!
в этом пространстве вы можете выбрать последний HTTP-запрос, зарегистрированный в веб-интерфейсе, размещенном приложениемngrok
в вашей локальной среде, и нажатьReplay
. Как и в прошлый раз, ваше приложение чата не отвечает, поскольку оно активно отлаживается.Когда вы возобновляете выполнение из отладчика
Visual Studio Code
вы можете видеть в веб-интерфейсе, размещенном приложениемngrok
в вашей локальной среде, что приложение генерирует ответ с обновленной версией сообщения.
Ява
Получите новые учетные данные пользователя для использования в качестве учетных данных приложения по умолчанию :
gcloud config set project PROJECT_ID
gcloud auth application-default login
Замените
PROJECT_ID
идентификатором облачного проекта приложения.Клонируйте репозиторий
googleworkspace/google-chat-samples
с GitHub в вашей локальной среде. Он содержит код приложения:git clone https://github.com/googleworkspace/google-chat-samples.git
В среде
Visual Studio Code
IDE, установленной в вашей локальной среде, выполните следующие действия:- В новом окне откройте папку
google-chat-samples/java/avatar-app
. Настройте проект Maven для локального запуска
App
на порту9000
, добавив плагин сборки Cloud Functions Frameworkfunction-maven-plugin
в файлpom.xml
:... <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> ...
Теперь вы можете запустить его локально в режиме отладки:
mvnDebug function:run Preparing to execute Maven in debug mode Listening for transport dt_socket at address: 8000
Создайте файл
.vscode/launch.json
в корневом каталоге и настройте запуск с именемRemote Debug Watch
, который подключается к приложению, ранее запущенному с портом8000
:{ "version": "0.2.0", "configurations": [{ "type": "java", "request": "attach", "name": "Remote Debug Watch", "projectName": "http-function", "hostName": "localhost", "port": 8000 }] }
Добавьте точку останова, которая приостанавливает обработку HTTP-запроса в файле
App.java
, и начните подключение и отладку с помощью добавленной ранее конфигурацииRemote Debug Watch
. Приложение теперь работает и прослушивает HTTP-запросы на порту9000
.Рисунок 3. Приложение запущено и прослушивает HTTP-запросы на порту
9000
.
- В новом окне откройте папку
Запустите приложение
ngrok
в своей локальной среде:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
Замените
NGROK_STATIC_DOMAIN
на статический домен в вашей учетной записиngrok
. Все запросы теперь перенаправляются в вашу локальную среду и порт, используемый приложением.Рисунок 4. Терминал с запущенным и перенаправленным сервером
ngrok
.Веб-интерфейс также запускается на вашем локальном хосте с помощью приложения
ngrok
, вы можете отслеживать все действия, открыв его в браузере.Рисунок 5. Веб-интерфейс приложения
ngrok
, в котором нет HTTP-запросов.Проверьте свое приложение Chat, отправив ему прямое сообщение:
Откройте Google Чат.
Нажмите «
новый чат» .В диалоговом окне введите название вашего приложения чата.
В результатах поиска найдите свое приложение Chat, нажмите «Добавить» > «Чат» .
В области прямого сообщения введите
Hey!
и нажмитеenter
. Ваше приложение чата не отвечает, поскольку оно активно отлаживается.
В
Visual Studio Code
в вашей локальной среде вы можете видеть, что выполнение приостанавливается в установленной точке останова.Рисунок 6. Выполнение приостанавливается в установленной точке останова.
Когда вы возобновляете выполнение
Visual Studio Code
из отладчика до истечения времени ожидания Google Chat, приложение Chat отвечает вашим именем и изображением аватара в сообщении.Вы можете проверить журналы HTTP-запросов и ответов из веб-интерфейса, размещенного приложением
ngrok
в вашей локальной среде.Рисунок 7. HTTP-запрос из веб-интерфейса приложения
ngrok
.Чтобы изменить поведение приложения, замените
Hello
наHey
в строке55
файлаApp.java
, перезапустите процессmvnDebug
и перезапуститеRemote Debug Watch
, чтобы повторно подключиться и перезапустить отладку .На этот раз вместо отправки второго сообщения
Hey!
в этом пространстве вы можете выбрать последний HTTP-запрос, зарегистрированный в веб-интерфейсе, размещенном приложениемngrok
в вашей локальной среде, и нажатьReplay
. Как и в прошлый раз, ваше приложение чата не отвечает, поскольку оно активно отлаживается.Когда вы возобновляете выполнение из отладчика
Visual Studio Code
вы можете видеть в веб-интерфейсе, размещенном приложениемngrok
в вашей локальной среде, что приложение генерирует ответ с обновленной версией сообщения.
Отладка из удаленной среды
В этом разделе вы взаимодействуете со своим приложением чата, которое выполняется в удаленной среде.
Рисунок 9. Отладка из удаленной среды.
Предварительные условия
- Место для прямых сообщений с вашим приложением Chat. Вы можете следовать разделу «Проверка приложения чата» в кратком руководстве и найти свое приложение чата, чтобы запустить его.
- Ваше приложение, работающее в удаленной среде с включенным отладчиком на определенном порту, в инструкциях этого руководства обозначается как
REMOTE_DEBUG_PORT
. - Ваша локальная среда может
ssh
к удаленной среде по протоколу SSH. - IDE, установленная в вашей локальной среде и поддерживающая отладку. В этом руководстве в целях иллюстрации мы используем
Visual Studio Code
IDE и ее функции отладки по умолчанию.
Подключите локальную и удаленную среду
В локальной среде, из которой вы хотите инициировать соединение клиента отладки, настройте SSH-туннель:
ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS
Замените следующее:
-
LOCAL_DEBUG_PORT
: порт отладки в вашей локальной среде. -
REMOTE_USERNAME
: имя пользователя в вашей удаленной среде. -
REMOTE_ADDRESS
: адрес вашей удаленной среды. -
REMOTE_DEBUG_PORT
: порт отладки в вашей удаленной среде.
Порт отладки в вашей локальной среде теперь связан с портом отладки в вашей удаленной среде.
Начать отладку
В среде Visual Studio Code
IDE, установленной в вашей локальной среде, выполните следующие действия:
- В новом окне откройте исходный код вашего приложения.
Создайте файл
.vscode/launch.json
в корневом каталоге и настройте запуск с именемDebug Remote
, который подключается к порту отладки в вашей локальной среде:Node.js
{ "version": "0.2.0", "configurations": [{ "type": "node", "request": "attach", "name": "Debug Remote", "address": "127.0.0.1", "port": LOCAL_DEBUG_PORT }] }
Питон
{ "version": "0.2.0", "configurations": [{ "type": "python", "request": "attach", "name": "Debug Remote", "connect": { "host": "127.0.0.1", "port": LOCAL_DEBUG_PORT } }] }
Ява
{ "version": "0.2.0", "configurations": [{ "type": "java", "request": "attach", "name": "Debug Remote", "hostName": "127.0.0.1", "port": LOCAL_DEBUG_PORT }] }
Замените
LOCAL_DEBUG_PORT
портом отладки в вашей локальной среде.Добавьте точку останова в исходный код вашего приложения, которая приостанавливает обработку HTTP-запроса, и начните выполнение и отладку с добавленной ранее конфигурацией
Debug Remote
.
В области прямых сообщений приложения Chat введите все, что хотите проверить, и нажмите enter
. Ваше приложение чата не отвечает, поскольку оно активно отлаживается в интегрированной среде разработки Visual Studio Code
.
Связанные темы
- Узнайте, как включить и запросить журналы ошибок.
- Узнайте, как исправить ошибки приложения Google Chat, такие как «Приложение не отвечает», «API Google Chat доступен только пользователям Google Workspace» или «Пользователей можно исключить из групп».
- Узнайте, как исправить ошибки карточек , такие как сообщения карточек, диалоги или предварительный просмотр ссылок, которые не отображаются или не работают должным образом.