Отладка приложений Google Chat

Как разработчику приложений Google Chat вам может потребоваться отладка кода для проверки изменений или устранения сложных проблем. Отладку приложений чата можно выполнять разными способами в зависимости от архитектуры вашего приложения, его функций, способа его развертывания и ваших предпочтений.

На этой странице объясняется, как отладить приложение HTTP Chat с помощью ngrok — единой входящей платформы, которую можно использовать для тестирования локальных сред разработки. В этом руководстве вы тестируете изменения кода в локальной среде и устраняете проблемы в удаленной среде.

Отладка из локальной среды разработки

В этом разделе вы взаимодействуете с приложением чата, которое выполняется в вашей локальной среде.

Отладка из локальной разработки среда

Рисунок 1. Отладка в локальной среде разработки.

Мастерская

Node.js

Питон

Ява

Предварительные условия

Node.js

Питон

Ява

Сделайте службу localhost общедоступной.

Вам необходимо подключить локальную среду к Интернету, чтобы приложение Chat могло получить к ней доступ. Приложение ngrok используется для перенаправления HTTP-запросов, сделанных на общедоступный URL-адрес, в вашу локальную среду.

  1. В браузере в вашей локальной среде войдите в свою учетную запись ngrok .
  2. Установите приложение и настройте токен authtoken в своей локальной среде.
  3. Создайте статический домен в своей учетной записи ngrok , в инструкциях этого руководства он обозначается как NGROK_STATIC_DOMAIN .

Настройте приложение чата

Настройте приложение Chat для отправки всех HTTP-запросов в ваш статический домен.

  1. В консоли Google Cloud откройте страницу Google Chat API:

    Перейдите на страницу API Google Chat.

  2. Откройте вкладку Конфигурация .

  3. Перейдите в раздел «Интерактивные функции» > «Настройки подключения» и установите значение URL-адреса конечной точки HTTP текстового поля:

    https://NGROK_STATIC_DOMAIN

    Замените NGROK_STATIC_DOMAIN на статический домен в вашей учетной записи ngrok .

  4. Нажмите Сохранить .

Приложение Chat отправляет все свои HTTP-запросы на статический домен

Рисунок 2. Приложение Chat отправляет все свои HTTP-запросы в статический домен. Публичная служба ngrok действует как мост между приложением Chat и кодом приложения, который выполняется локально.

Протестируйте приложение Чат

Вы можете локально развернуть, настроить, протестировать, отладить и автоматически перезагрузить приложение Chat.

Node.js

  1. Клонируйте репозиторий googleworkspace/google-chat-samples из GitHub в вашу локальную среду. Он содержит код приложения для выполнения:

    git clone https://github.com/googleworkspace/google-chat-samples.git

  2. В среде Visual Studio Code IDE, установленной в вашей локальной среде, выполните следующие действия:

    1. В новом окне откройте папку google-chat-samples/node/basic-app .

    2. Настройте приложение для автоматической перезагрузки отладки, добавив два скрипта в файл package.json :

      {
    ...
    "scripts": {
        ...
        "debug": "node --inspect index.js",
        "debug-watch": "nodemon --watch ./ --exec npm run debug"
    }
    ...
}

    3. Из корневого каталога установите приложение:

      npm install

    4. Создайте и настройте запуск с именем 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"]
    }]
}

    5. Добавьте точку останова, которая приостанавливает обработку HTTP-запроса в файле index.js , и начните работу и отладку с добавленной ранее конфигурацией Debug Watch . Приложение теперь работает и прослушивает HTTP-запросы на порту 9000 .

      Приложение запущено и прослушивает HTTP-запросы на порт `9000`

      Рисунок 3. Приложение запущено и прослушивает HTTP-запросы на порту 9000 .

  3. Запустите приложение ngrok в своей локальной среде:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

    Замените NGROK_STATIC_DOMAIN на статический домен в вашей учетной записи ngrok . Все запросы теперь перенаправляются в вашу локальную среду и порт, используемый приложением.

    Терминал с запущенным сервером ngrok и перенаправление

    Рисунок 4. Терминал с запущенным и перенаправленным сервером ngrok .

  4. Веб-интерфейс также запускается на вашем локальном хосте с помощью приложения ngrok , вы можете отслеживать все действия, открыв его в браузере.

    Веб-интерфейс приложения ngrok не отображает HTTP. запросы

    Рисунок 5. Веб-интерфейс приложения ngrok , в котором нет HTTP-запросов.

  5. Проверьте свое приложение Chat, отправив ему прямое сообщение:

    • Откройте Google Чат.

      Перейти в чат Google

    • Нажмите новый чат» .

    • В диалоговом окне введите название вашего приложения чата.

    • В результатах поиска найдите свое приложение Chat, нажмите «Добавить» > «Чат» .

    • В области прямых сообщений введите Hello и нажмите enter . Ваше приложение чата не отвечает, поскольку оно активно отлаживается.

  6. В Visual Studio Code в вашей локальной среде вы можете видеть, что выполнение приостанавливается в установленной точке останова.

    Выполнение приостанавливается в точке останова, которая была набор

    Рисунок 6. Выполнение приостанавливается в установленной точке останова.

  7. Когда вы возобновляете выполнение Visual Studio Code из отладчика до истечения времени ожидания Google Chat, приложение Chat отвечает на Your message : Hello .

  8. Вы можете проверить журналы HTTP-запросов и ответов из веб-интерфейса, размещенного приложением ngrok в вашей локальной среде.

    HTTP-запрос из веб-интерфейса, размещенного на ngrok. приложение

    Рисунок 7. HTTP-запрос из веб-интерфейса приложения ngrok .

  9. Чтобы изменить поведение приложения, замените Your message на Here was your message встроенное в строку 35 файла index.json . Когда вы сохраняете файл, nodemon автоматически перезагружает приложение с обновленным исходным кодом, а Visual Studio Code остается в режиме отладки.

    Приложение запущено и прослушивает HTTP-запросы на порту. `9000` со сменой кода загружен

    Рисунок 8. Приложение запущено и прослушивает HTTP-запросы на порту 9000 с загруженным изменением кода.

  10. На этот раз вместо отправки второго сообщения Hello в пространстве вы можете выбрать последний HTTP-запрос, зарегистрированный в веб-интерфейсе, размещенном приложением ngrok в вашей локальной среде, и нажать Replay . Как и в прошлый раз, ваше приложение чата не отвечает, поскольку оно активно отлаживается.

  11. Когда вы возобновляете выполнение из отладчика Visual Studio Code вы можете видеть из веб-интерфейса, размещенного приложением ngrok в вашей локальной среде, что приложение генерирует ответ с обновленной версией сообщения. Here was your message : Hello .

Питон

  1. Получите новые учетные данные пользователя для использования в качестве учетных данных приложения по умолчанию :

    gcloud config set project PROJECT_ID
gcloud auth application-default login

    Замените PROJECT_ID идентификатором облачного проекта приложения.

  2. Клонируйте репозиторий googleworkspace/google-chat-samples из GitHub в свою локальную среду. Он содержит код приложения:

    git clone https://github.com/googleworkspace/google-chat-samples.git

  3. В среде Visual Studio Code IDE, установленной в вашей локальной среде, выполните следующие действия:

    1. В новом окне откройте папку google-chat-samples/python/avatar-app .

    2. Создайте новую виртуальную среду для env Python и активируйте ее: 

      virtualenv env
source env/bin/activate

    3. Установите все зависимости проекта с помощью pip в виртуальной среде: 

      pip install -r requirements.txt

    4. Создайте файл .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"
        ]
    }]
}

    5. Добавьте точку останова, которая приостанавливает обработку HTTP-запроса в файле main.py , и начните работу и отладку с добавленной ранее конфигурацией Debug Watch . Приложение теперь работает и прослушивает HTTP-запросы на порту 9000 .

      Приложение запущено и прослушивает HTTP-запросы на порт `9000`

      Рисунок 3. Приложение запущено и прослушивает HTTP-запросы на порту 9000 .

  4. Запустите приложение ngrok в своей локальной среде: 

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

    Замените NGROK_STATIC_DOMAIN на статический домен в вашей учетной записи ngrok . Все запросы теперь перенаправляются в вашу локальную среду и порт, используемый приложением.

    Терминал с запущенным сервером ngrok и перенаправление

    Рисунок 4. Терминал с запущенным и перенаправленным сервером ngrok .

  5. Веб-интерфейс также запускается на вашем локальном хосте с помощью приложения ngrok , вы можете отслеживать все действия, открыв его в браузере.

    Веб-интерфейс приложения ngrok не отображает HTTP. запросы

    Рисунок 5. Веб-интерфейс приложения ngrok , в котором нет HTTP-запросов.

  6. Проверьте свое приложение Chat, отправив ему прямое сообщение:

    • Откройте Google Чат.

      Перейти в чат Google

    • Нажмите новый чат» .

    • В диалоговом окне введите название вашего приложения чата.

    • В результатах поиска найдите свое приложение Chat, нажмите «Добавить» > «Чат» .

    • В области прямого сообщения введите Hey! и нажмите enter . Ваше приложение чата не отвечает, поскольку оно активно отлаживается.

  7. В Visual Studio Code в вашей локальной среде вы можете видеть, что выполнение приостанавливается в установленной точке останова.

    Выполнение приостанавливается в точке останова, которая была набор

    Рисунок 6. Выполнение приостанавливается в установленной точке останова.

  8. Когда вы возобновляете выполнение Visual Studio Code из отладчика до истечения времени ожидания Google Chat, приложение Chat отвечает вашим именем и изображением аватара в сообщении.

  9. Вы можете проверить журналы HTTP-запросов и ответов из веб-интерфейса, размещенного приложением ngrok в вашей локальной среде.

    HTTP-запрос из веб-интерфейса, размещенного на ngrok. приложение

    Рисунок 7. HTTP-запрос из веб-интерфейса приложения ngrok .

  10. Чтобы изменить поведение приложения, замените Hello на Hey в строке 51 файла main.py Когда вы сохраняете файл, Visual Studio Code автоматически перезагружает приложение с обновленным исходным кодом и остается в режиме отладки.

    Приложение запущено и прослушивает HTTP-запросы на порту. `9000` со сменой кода загружен

    Рисунок 8. Приложение запущено и прослушивает HTTP-запросы на порту 9000 с загруженным изменением кода.

  11. На этот раз вместо отправки второго сообщения Hey! в этом пространстве вы можете выбрать последний HTTP-запрос, зарегистрированный в веб-интерфейсе, размещенном приложением ngrok в вашей локальной среде, и нажать Replay . Как и в прошлый раз, ваше приложение чата не отвечает, поскольку оно активно отлаживается.

  12. Когда вы возобновляете выполнение из отладчика Visual Studio Code вы можете видеть в веб-интерфейсе, размещенном приложением ngrok в вашей локальной среде, что приложение генерирует ответ с обновленной версией сообщения.

Ява

  1. Получите новые учетные данные пользователя для использования в качестве учетных данных приложения по умолчанию : 

    gcloud config set project PROJECT_ID
gcloud auth application-default login

    Замените PROJECT_ID идентификатором облачного проекта приложения.

  2. Клонируйте репозиторий googleworkspace/google-chat-samples с GitHub в вашей локальной среде. Он содержит код приложения: 

    git clone https://github.com/googleworkspace/google-chat-samples.git

  3. В среде Visual Studio Code IDE, установленной в вашей локальной среде, выполните следующие действия:

    1. В новом окне откройте папку google-chat-samples/java/avatar-app .

    2. Настройте проект Maven для локального запуска App на порту 9000 , добавив плагин сборки Cloud Functions Framework function-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>
...

    3. Теперь вы можете запустить его локально в режиме отладки: 

      mvnDebug function:run
Preparing to execute Maven in debug mode
Listening for transport dt_socket at address: 8000

    4. Создайте файл .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
    }]
}

    5. Добавьте точку останова, которая приостанавливает обработку HTTP-запроса в файле App.java , и начните подключение и отладку с помощью добавленной ранее конфигурации Remote Debug Watch . Приложение теперь работает и прослушивает HTTP-запросы на порту 9000 .

      Приложение запущено и прослушивает HTTP-запросы на порт `9000`

      Рисунок 3. Приложение запущено и прослушивает HTTP-запросы на порту 9000 .

  4. Запустите приложение ngrok в своей локальной среде: 

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

    Замените NGROK_STATIC_DOMAIN на статический домен в вашей учетной записи ngrok . Все запросы теперь перенаправляются в вашу локальную среду и порт, используемый приложением.

    Терминал с запущенным сервером ngrok и перенаправление

    Рисунок 4. Терминал с запущенным и перенаправленным сервером ngrok .

  5. Веб-интерфейс также запускается на вашем локальном хосте с помощью приложения ngrok , вы можете отслеживать все действия, открыв его в браузере.

    Веб-интерфейс приложения ngrok не отображает HTTP. запросы

    Рисунок 5. Веб-интерфейс приложения ngrok , в котором нет HTTP-запросов.

  6. Проверьте свое приложение Chat, отправив ему прямое сообщение:

    • Откройте Google Чат.

      Перейти в чат Google

    • Нажмите новый чат» .

    • В диалоговом окне введите название вашего приложения чата.

    • В результатах поиска найдите свое приложение Chat, нажмите «Добавить» > «Чат» .

    • В области прямого сообщения введите Hey! и нажмите enter . Ваше приложение чата не отвечает, поскольку оно активно отлаживается.

  7. В Visual Studio Code в вашей локальной среде вы можете видеть, что выполнение приостанавливается в установленной точке останова.

    Выполнение приостанавливается в точке останова, которая была набор

    Рисунок 6. Выполнение приостанавливается в установленной точке останова.

  8. Когда вы возобновляете выполнение Visual Studio Code из отладчика до истечения времени ожидания Google Chat, приложение Chat отвечает вашим именем и изображением аватара в сообщении.

  9. Вы можете проверить журналы HTTP-запросов и ответов из веб-интерфейса, размещенного приложением ngrok в вашей локальной среде.

    HTTP-запрос из веб-интерфейса, размещенного на ngrok. приложение

    Рисунок 7. HTTP-запрос из веб-интерфейса приложения ngrok .

  10. Чтобы изменить поведение приложения, замените Hello на Hey в строке 55 файла App.java , перезапустите процесс mvnDebug и перезапустите Remote Debug Watch , чтобы повторно подключиться и перезапустить отладку .

  11. На этот раз вместо отправки второго сообщения Hey! в этом пространстве вы можете выбрать последний HTTP-запрос, зарегистрированный в веб-интерфейсе, размещенном приложением ngrok в вашей локальной среде, и нажать Replay . Как и в прошлый раз, ваше приложение чата не отвечает, поскольку оно активно отлаживается.

  12. Когда вы возобновляете выполнение из отладчика 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, установленной в вашей локальной среде, выполните следующие действия:

  1. В новом окне откройте исходный код вашего приложения.

  2. Создайте файл .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 портом отладки в вашей локальной среде.

  3. Добавьте точку останова в исходный код вашего приложения, которая приостанавливает обработку HTTP-запроса, и начните выполнение и отладку с добавленной ранее конфигурацией Debug Remote .

В области прямых сообщений приложения Chat введите все, что хотите проверить, и нажмите enter . Ваше приложение чата не отвечает, поскольку оно активно отлаживается в интегрированной среде разработки Visual Studio Code .