Тестирование и отладка HTTP-надстроек Google Workspace

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

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

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

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

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

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

Node.js

Питон

Ява

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

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

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

Создайте и установите развертывание надстройки.

  1. Настройте надстройку Google Workspace так, чтобы она отправляла все HTTP-запросы в ваш статический домен. Ваш файл развертывания должен выглядеть следующим образом:

    {
  "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"
        }
      ]
    },
    "httpOptions": {
      "granularOauthPermissionSupport": "OPT_IN"
    }
  }
}

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

  2. Настройте проект Google Cloud для использования:

    gcloud config set project PROJECT_ID

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

    gcloud auth application-default login

    Замените PROJECT_ID на идентификатор проекта Google Cloud приложения.

  4. Создайте развертывание:

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

    Замените DEPLOYMENT_FILE_PATH на путь к файлу развертывания.

  5. Установите развертывание:

    gcloud workspace-add-ons deployments install manageSupportCases
    Надстройка Google Workspace отправляет все свои HTTP-запросы на статический домен.
    Рисунок 2. Надстройка Google Workspace отправляет все свои HTTP-запросы в статический домен. Публичный сервис ngrok действует как мост между надстройкой Google Workspace и кодом приложения, который выполняется локально.

Протестируйте дополнение Google Workspace

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

Node.js

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

    1. В новом окне откройте папку add-ons-samples/node/3p-resources .

    2. Настройте приложение для локального запуска и автоматической перезагрузки отладки, добавив одну зависимость и два сценария в файл 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. Из корневого каталога установите приложение:

      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 .

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

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

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

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

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

  4. Протестируйте надстройку Google Workspace, просмотрев URL-адрес обращения в новом документе Google с помощью учетной записи тестера:

    • Создайте документ Google.

      Создать документ Google

    • Введите следующую ссылку и нажмите enter : 

      https://example.com/support/case/?name=Name1&description=Description1&priority=P1

    • Щелкните ссылку.

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

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

  6. Когда вы возобновляете выполнение из отладчика Visual Studio Code до истечения времени ожидания надстроек Google Workspace, надстройка Google Workspace отображает предварительный просмотр ссылки в Документе Google из кеша.

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

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

  8. Чтобы изменить поведение приложения, замените Case на Case: в строке 51 файла index.js . Когда вы сохраняете файл, nodemon автоматически перезагружает приложение с обновленным исходным кодом, а Visual Studio Code остается в режиме отладки.

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

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

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

Питон

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

    1. В новом окне откройте папку add-ons-samples/python/3p-resources/create_link_preview .

    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", "create_link_preview",
            "--port", "9000",
            "--debug"
        ]
    }]
}

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

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

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

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

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

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

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

  4. Протестируйте надстройку Google Workspace, просмотрев URL-адрес обращения в новом документе Google с помощью учетной записи тестера:

    • Создайте документ Google.

      Создать документ Google

    • Введите следующую ссылку и нажмите enter : 

      https://example.com/support/case/?name=Name1&description=Description1&priority=P1

    • Щелкните ссылку.

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

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

  6. Когда вы возобновляете выполнение из отладчика Visual Studio Code до истечения времени ожидания надстроек Google Workspace, надстройка Google Workspace отображает предварительный просмотр ссылки в Документе Google из кеша.

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

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

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

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

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

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

Ява

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

    1. В новом окне откройте папку add-ons-samples/java/3p-resources .

    2. Настройте проект Maven для локального запуска приложения CreateLinkPreview на порту 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>CreateLinkPreview</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-запроса, в файле CreateLinkPreview.java и начните подключение и отладку с помощью добавленной ранее конфигурации Remote Debug Watch . Теперь приложение работает и прослушивает HTTP-запросы на порту 9000 .

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

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

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

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

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

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

  4. Протестируйте надстройку Google Workspace, просмотрев URL-адрес обращения в новом документе Google с помощью учетной записи тестера:

    • Создайте документ Google.

      Создать документ Google

    • Введите следующую ссылку и нажмите enter : 

      https://example.com/support/case/?name=Name1&description=Description1&priority=P1

    • Щелкните ссылку.

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

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

  6. Когда вы возобновляете выполнение из отладчика Visual Studio Code до истечения времени ожидания надстроек Google Workspace, надстройка Google Workspace отображает предварительный просмотр ссылки в Документе Google из кеша.

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

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

  8. Чтобы изменить поведение приложения, замените Case на Case: в строке 78 файла CreateLinkPreview.java , перезапустите процесс mvnDebug и перезапустите Remote Debug Watch , чтобы повторно подключиться и перезапустить отладку .

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

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

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

В этом разделе вы взаимодействуете с надстройкой Google Workspace, которая выполняется в удаленной среде.

Отладка из удаленной среды.
Рисунок 9. Отладка из удаленной среды.

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

  • Ваше дополнение Google Workspace развернуто и установлено.
  • Ваше приложение работает в удаленной среде с включенным отладчиком на определенном порту, и в инструкциях этого руководства оно обозначается как 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 .

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

,

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

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

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

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

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

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

Node.js

Питон

Ява

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

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

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

Создайте и установите развертывание надстройки.

  1. Настройте надстройку Google Workspace так, чтобы она отправляла все HTTP-запросы в ваш статический домен. Ваш файл развертывания должен выглядеть следующим образом:

    {
  "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"
        }
      ]
    },
    "httpOptions": {
      "granularOauthPermissionSupport": "OPT_IN"
    }
  }
}

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

  2. Настройте проект Google Cloud для использования:

    gcloud config set project PROJECT_ID

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

    gcloud auth application-default login

    Замените PROJECT_ID на идентификатор проекта Google Cloud приложения.

  4. Создайте развертывание:

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

    Замените DEPLOYMENT_FILE_PATH на путь к файлу развертывания.

  5. Установите развертывание:

    gcloud workspace-add-ons deployments install manageSupportCases
    Надстройка Google Workspace отправляет все свои HTTP-запросы на статический домен.
    Рисунок 2. Надстройка Google Workspace отправляет все свои HTTP-запросы в статический домен. Публичный сервис ngrok действует как мост между надстройкой Google Workspace и кодом приложения, который выполняется локально.

Протестируйте дополнение Google Workspace

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

Node.js

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

    1. В новом окне откройте папку add-ons-samples/node/3p-resources .

    2. Настройте приложение для локального запуска и автоматической перезагрузки отладки, добавив одну зависимость и два сценария в файл 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. Из корневого каталога установите приложение:

      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 .

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

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

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

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

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

  4. Протестируйте надстройку Google Workspace, просмотрев URL-адрес обращения в новом документе Google с помощью учетной записи тестера:

    • Создайте документ Google.

      Создать документ Google

    • Введите следующую ссылку и нажмите enter : 

      https://example.com/support/case/?name=Name1&description=Description1&priority=P1

    • Щелкните ссылку.

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

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

  6. Когда вы возобновляете выполнение из отладчика Visual Studio Code до истечения времени ожидания надстроек Google Workspace, надстройка Google Workspace отображает предварительный просмотр ссылки в Документе Google из кеша.

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

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

  8. Чтобы изменить поведение приложения, замените Case на Case: в строке 51 файла index.js . Когда вы сохраняете файл, nodemon автоматически перезагружает приложение с обновленным исходным кодом, а Visual Studio Code остается в режиме отладки.

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

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

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

Питон

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

    1. В новом окне откройте папку add-ons-samples/python/3p-resources/create_link_preview .

    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", "create_link_preview",
            "--port", "9000",
            "--debug"
        ]
    }]
}

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

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

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

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

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

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

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

  4. Протестируйте надстройку Google Workspace, просмотрев URL-адрес обращения в новом документе Google с помощью учетной записи тестера:

    • Создайте документ Google.

      Создать документ Google

    • Введите следующую ссылку и нажмите enter : 

      https://example.com/support/case/?name=Name1&description=Description1&priority=P1

    • Щелкните ссылку.

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

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

  6. Когда вы возобновляете выполнение из отладчика Visual Studio Code до истечения времени ожидания надстроек Google Workspace, надстройка Google Workspace отображает предварительный просмотр ссылки в Документе Google из кеша.

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

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

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

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

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

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

Ява

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

    1. В новом окне откройте папку add-ons-samples/java/3p-resources .

    2. Настройте проект Maven для локального запуска приложения CreateLinkPreview на порту 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>CreateLinkPreview</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-запроса, в файле CreateLinkPreview.java и начните подключение и отладку с помощью добавленной ранее конфигурации Remote Debug Watch . Теперь приложение работает и прослушивает HTTP-запросы на порту 9000 .

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

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

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

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

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

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

  4. Протестируйте надстройку Google Workspace, просмотрев URL-адрес обращения в новом документе Google с помощью учетной записи тестера:

    • Создайте документ Google.

      Создать документ Google

    • Введите следующую ссылку и нажмите enter : 

      https://example.com/support/case/?name=Name1&description=Description1&priority=P1

    • Щелкните ссылку.

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

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

  6. Когда вы возобновите выполнение от Debugger Visual Studio Code прежде чем Google Workspace AddOns Out Out, надстройка Google Workspace отображает предварительный просмотр ссылки в Google Doc из кэша.

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

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

  8. Чтобы изменить поведение приложения, замените Case Case: в строке 78 файла CreateLinkPreview.java , перезапустите процесс mvnDebug и перезаписывая Remote Debug Watch и перезапустить отладку .

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

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

Отладка от удаленной среды

В этом разделе вы взаимодействуете с надстройкой Google Workspace, которое выполняется в удаленной среде.

Отладка от удаленной среды.
Рисунок 9. Отладка из удаленной среды.

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

  • Ваша надстройка Google Workspace развернуто и установлено.
  • Ваше приложение работает в вашей удаленной среде с отладчиком, включенным в данном порту, и оно упоминается как REMOTE_DEBUG_PORT в инструкциях этого руководства.
  • Ваша местная среда ssh в вашей удаленной среде.
  • IDE создан в вашей местной среде, которая может отлаживать. Мы используем IDE Visual Studio Code и его функции отладки по умолчанию в этом руководстве для иллюстрации.

Подключите свои локальные и удаленные среды

В вашей местной среде, откуда вы хотите инициировать подключение к клиенту отладки, настройте туннель SSH: 

ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS

Замените следующее:

  • LOCAL_DEBUG_PORT : порт отладки в вашей локальной среде.
  • REMOTE_USERNAME : имя пользователя в вашей отдаленной среде.
  • REMOTE_ADDRESS : адрес вашей удаленной среды.
  • REMOTE_DEBUG_PORT : порт отладки в вашей удаленной среде.

Порт отладки в вашей местной среде теперь связан с портом отладки в вашей удаленной среде.

Начните отладку

Из IDE Visual Studio Code , установленной в вашей локальной среде, сделайте следующее:

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

  2. Создайте файл .vscode/launch.json в каталоге ROOT и настройте запуск с именем 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 .

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

,

Как разработчик Add-Ad Add-On Google, вам может потребоваться отладить код для проверки изменений или устранения устранения сложных проблем. Отладка надстройки Google Workspace может быть выполнена по-разному в зависимости от архитектуры вашего приложения, того, что делает приложение, как развертывается ваше приложение, и ваши предпочтения.

На этой странице объясняется, как отладить http-google arderpace с использованием ngrok , которая представляет собой единую платформу Ingress, которую вы можете использовать для тестирования местных сред. В этом руководстве вы тестируете изменения кода в локальной среде и устранения неполадок в удаленной среде.

Отладка в местной среде развития

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

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

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

Node.js

Питон

Ява

Сделайте услуги Localhost доступной публично

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

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

Создать и установить дополнительный развертывание

  1. Настройте надстройку Google Workspace, чтобы отправить все его HTTP-запросы в свой статический домен. Ваш файл развертывания должен выглядеть следующим образом:

    {
  "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"
        }
      ]
    },
    "httpOptions": {
      "granularOauthPermissionSupport": "OPT_IN"
    }
  }
}

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

  2. Установите Google Cloud Project для использования:

    gcloud config set project PROJECT_ID

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

    gcloud auth application-default login

    Замените PROJECT_ID на идентификатор проекта для Google Cloud Project приложения.

  4. Создайте развертывание:

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

    Замените DEPLOYMENT_FILE_PATH путем вашего файла развертывания.

  5. Установите развертывание:

    gcloud workspace-add-ons deployments install manageSupportCases
    Дополнение Google Workspace отправляет все свои HTTP-запросы статический домен.
    Рисунок 2. Дополнение Google Workspace отправляет все свои HTTP-запросы в статический домен. Общественная служба Ngrok` действует как мост между надстройкой Google Workspace и кодом приложения, который выполняется локально.

Проверьте дополнение Google Workspace

Вы можете локально развернуть, тестировать, отлаживать и автоматическую загрузку в Google Workspace.

Node.js

  1. Из IDE Visual Studio Code , установленной в вашей локальной среде, сделайте следующее:

    1. В новом окне откройте папку add-ons-samples/node/3p-resources .

    2. Настройте приложение для локального запуска и отладки автоматической нагрузки, добавив одну зависимость и два сценария в файле 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. В корневом каталоге установите приложение:

      npm install

    4. Создайте и настраивайте запуск с именем Debug Watch , что запускает сценарий debug-watch , создавая файл .vscode/launch.json в каталоге ROOT:

      {
    "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 .

  2. Запустите приложение ngrok в вашей местной среде: 

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

    Терминал с NGROK Server работает и перенаправляется.
    Рисунок 4. Терминал с ngrok Server работает и перенаправляется.

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

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

  4. Проверьте дополнение Google Workspace, предварительно просмотрев URL-адрес случая в новом документе Google с учетной записью Tester:

    • Создайте Google Doc.

      Создать документ Google

    • Введите следующую ссылку и нажмите enter : 

      https://example.com/support/case/?name=Name1&description=Description1&priority=P1

    • Щелкните ссылку.

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

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

  6. Когда вы возобновите выполнение от Debugger Visual Studio Code прежде чем Google Workspace AddOns Out Out, надстройка Google Workspace отображает предварительный просмотр ссылки в Google Doc из кэша.

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

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

  8. Чтобы изменить поведение приложения, замените Case Case: в строке 51 index.js . Когда вы сохраняете файл, nodemon автоматически перезагружает приложение с помощью обновленного исходного кода, а Visual Studio Code остается в режиме отладки.

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

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

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

Питон

  1. Из IDE Visual Studio Code , установленной в вашей локальной среде, сделайте следующее:

    1. В новом окне откройте папку add-ons-samples/python/3p-resources/create_link_preview .

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

      virtualenv env
source env/bin/activate

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

      pip install -r requirements.txt

    4. Создайте файл .vscode/launch.json в каталоге ROOT и настройте запуск с именем Debug Watch , что запускает приложение из модульных functions-framework в порту 9000 в режиме отладки в Env Virtual Environment 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. Добавьте точку останова, которая приостанавливает обработку HTTP -запроса в файле main.py , и начните запускать и отлаживать с помощью конфигурации Debug Watch , добавленной ранее. Приложение теперь работает и прослушивает HTTP -запросы на порту 9000 .

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

  2. Запустите приложение ngrok в вашей местной среде: 

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

    Терминал с NGROK Server работает и перенаправляется.
    Рисунок 4. Терминал с ngrok Server работает и перенаправляется.

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

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

  4. Проверьте дополнение Google Workspace, предварительно просмотрев URL-адрес случая в новом документе Google с учетной записью Tester:

    • Создайте Google Doc.

      Создать документ Google

    • Введите следующую ссылку и нажмите enter : 

      https://example.com/support/case/?name=Name1&description=Description1&priority=P1

    • Щелкните ссылку.

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

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

  6. Когда вы возобновите выполнение от Debugger Visual Studio Code прежде чем Google Workspace AddOns Out Out, надстройка Google Workspace отображает предварительный просмотр ссылки в Google Doc из кэша.

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

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

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

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

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

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

Ява

  1. Из IDE Visual Studio Code , установленной в вашей локальной среде, сделайте следующее:

    1. В новом окне откройте папку add-ons-samples/java/3p-resources .

    2. Настройте проект Maven для запуска приложения CreateLinkPreview на порте 9000 локально, добавив функции Cloud Function Framework Fuld function-maven-plugin в файл 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. Теперь вы можете запустить его локально в режиме отладки: 

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

    4. Создайте файл .vscode/launch.json в каталоге ROOT и настройте запуск с именем 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 -запроса в файле CreateLinkPreview.java , и начните прикреплять и отлаживать с помощью конфигурации Remote Debug Watch добавленной ранее. Приложение теперь работает и прослушивает HTTP -запросы на порту 9000 .

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

  2. Запустите приложение ngrok в вашей местной среде: 

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

    Терминал с NGROK Server работает и перенаправляется.
    Рисунок 4. Терминал с ngrok Server работает и перенаправляется.

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

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

  4. Проверьте дополнение Google Workspace, предварительно просмотрев URL-адрес случая в новом документе Google с учетной записью Tester:

    • Создайте Google Doc.

      Создать документ Google

    • Введите следующую ссылку и нажмите enter : 

      https://example.com/support/case/?name=Name1&description=Description1&priority=P1

    • Щелкните ссылку.

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

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

  6. Когда вы возобновите выполнение от Debugger Visual Studio Code прежде чем Google Workspace AddOns Out Out, надстройка Google Workspace отображает предварительный просмотр ссылки в Google Doc из кэша.

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

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

  8. Чтобы изменить поведение приложения, замените Case Case: в строке 78 файла CreateLinkPreview.java , перезапустите процесс mvnDebug и перезаписывая Remote Debug Watch и перезапустить отладку .

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

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

Отладка от удаленной среды

В этом разделе вы взаимодействуете с надстройкой Google Workspace, которое выполняется в удаленной среде.

Отладка от удаленной среды.
Рисунок 9. Отладка из удаленной среды.

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

  • Ваша надстройка Google Workspace развернуто и установлено.
  • Ваше приложение работает в вашей удаленной среде с отладчиком, включенным в данном порту, и оно упоминается как REMOTE_DEBUG_PORT в инструкциях этого руководства.
  • Ваша местная среда ssh в вашей удаленной среде.
  • IDE создан в вашей местной среде, которая может отлаживать. Мы используем IDE Visual Studio Code и его функции отладки по умолчанию в этом руководстве для иллюстрации.

Подключите свои локальные и удаленные среды

В вашей местной среде, откуда вы хотите инициировать подключение к клиенту отладки, настройте туннель SSH: 

ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS

Замените следующее:

  • LOCAL_DEBUG_PORT : порт отладки в вашей локальной среде.
  • REMOTE_USERNAME : имя пользователя в вашей отдаленной среде.
  • REMOTE_ADDRESS : адрес вашей удаленной среды.
  • REMOTE_DEBUG_PORT : порт отладки в вашей удаленной среде.

Порт отладки в вашей местной среде теперь связан с портом отладки в вашей удаленной среде.

Начните отладку

Из IDE Visual Studio Code , установленной в вашей локальной среде, сделайте следующее:

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

  2. Создайте файл .vscode/launch.json в каталоге ROOT и настройте запуск с именем 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 .

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

,

Как разработчик Add-Ad Add-On Google, вам может потребоваться отладить код для проверки изменений или устранения устранения сложных проблем. Отладка надстройки Google Workspace может быть выполнена по-разному в зависимости от архитектуры вашего приложения, того, что делает приложение, как развертывается ваше приложение, и ваши предпочтения.

На этой странице объясняется, как отладить http-google arderpace с использованием ngrok , которая представляет собой единую платформу Ingress, которую вы можете использовать для тестирования местных сред. В этом руководстве вы тестируете изменения кода в локальной среде и устранения неполадок в удаленной среде.

Отладка в местной среде развития

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

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

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

Node.js

Питон

Ява

Сделайте услуги Localhost доступной публично

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

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

Создать и установить дополнительный развертывание

  1. Настройте надстройку Google Workspace, чтобы отправить все его HTTP-запросы в свой статический домен. Ваш файл развертывания должен выглядеть следующим образом:

    {
  "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"
        }
      ]
    },
    "httpOptions": {
      "granularOauthPermissionSupport": "OPT_IN"
    }
  }
}

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

  2. Установите Google Cloud Project для использования:

    gcloud config set project PROJECT_ID

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

    gcloud auth application-default login

    Замените PROJECT_ID на идентификатор проекта для Google Cloud Project приложения.

  4. Создайте развертывание:

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

    Замените DEPLOYMENT_FILE_PATH путем вашего файла развертывания.

  5. Установите развертывание:

    gcloud workspace-add-ons deployments install manageSupportCases
    Дополнение Google Workspace отправляет все свои HTTP-запросы статический домен.
    Рисунок 2. Дополнение Google Workspace отправляет все свои HTTP-запросы в статический домен. Общественная служба Ngrok` действует как мост между надстройкой Google Workspace и кодом приложения, который выполняется локально.

Проверьте дополнение Google Workspace

Вы можете локально развернуть, тестировать, отлаживать и автоматическую загрузку в Google Workspace.

Node.js

  1. Из IDE Visual Studio Code , установленной в вашей локальной среде, сделайте следующее:

    1. В новом окне откройте папку add-ons-samples/node/3p-resources .

    2. Настройте приложение для локального запуска и отладки автоматической нагрузки, добавив одну зависимость и два сценария в файле 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. В корневом каталоге установите приложение:

      npm install

    4. Создайте и настраивайте запуск с именем Debug Watch , что запускает сценарий debug-watch , создавая файл .vscode/launch.json в каталоге ROOT:

      {
    "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 .

  2. Запустите приложение ngrok в вашей местной среде: 

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

    Терминал с NGROK Server работает и перенаправляется.
    Рисунок 4. Терминал с ngrok Server работает и перенаправляется.

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

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

  4. Проверьте дополнение Google Workspace, предварительно просмотрев URL-адрес случая в новом документе Google с учетной записью Tester:

    • Создайте Google Doc.

      Создать документ Google

    • Введите следующую ссылку и нажмите enter : 

      https://example.com/support/case/?name=Name1&description=Description1&priority=P1

    • Щелкните ссылку.

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

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

  6. Когда вы возобновите выполнение от Debugger Visual Studio Code прежде чем Google Workspace AddOns Out Out, надстройка Google Workspace отображает предварительный просмотр ссылки в Google Doc из кэша.

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

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

  8. Чтобы изменить поведение приложения, замените Case Case: в строке 51 index.js . Когда вы сохраняете файл, nodemon автоматически перезагружает приложение с помощью обновленного исходного кода, а Visual Studio Code остается в режиме отладки.

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

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

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

Питон

  1. Из IDE Visual Studio Code , установленной в вашей локальной среде, сделайте следующее:

    1. В новом окне откройте папку add-ons-samples/python/3p-resources/create_link_preview .

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

      virtualenv env
source env/bin/activate

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

      pip install -r requirements.txt

    4. Создайте файл .vscode/launch.json в каталоге ROOT и настройте запуск с именем Debug Watch , что запускает приложение из модульных functions-framework в порту 9000 в режиме отладки в Env Virtual Environment 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. Добавьте точку останова, которая приостанавливает обработку HTTP -запроса в файле main.py , и начните запускать и отлаживать с помощью конфигурации Debug Watch , добавленной ранее. Приложение теперь работает и прослушивает HTTP -запросы на порту 9000 .

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

  2. Запустите приложение ngrok в вашей местной среде: 

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

    Терминал с NGROK Server работает и перенаправляется.
    Рисунок 4. Терминал с ngrok Server работает и перенаправляется.

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

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

  4. Проверьте дополнение Google Workspace, предварительно просмотрев URL-адрес случая в новом документе Google с учетной записью Tester:

    • Создайте Google Doc.

      Создать документ Google

    • Введите следующую ссылку и нажмите enter : 

      https://example.com/support/case/?name=Name1&description=Description1&priority=P1

    • Щелкните ссылку.

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

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

  6. Когда вы возобновите выполнение от Debugger Visual Studio Code прежде чем Google Workspace AddOns Out Out, надстройка Google Workspace отображает предварительный просмотр ссылки в Google Doc из кэша.

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

    HTTP -запрос из веб -интерфейса, размещенного приложением NGROK.
    Figure 7. The HTTP request from the web interface hosted by the ngrok application.

  8. To change the application behavior, replace Case with Case: on line 56 of the main.py file. When you save the file, Visual Studio Code automatically reloads the application with the updated source code and remains in debug mode.

    The application is running and listening for HTTP requests on port 9000 with the code change loaded.
    Figure 8. The application is running and listening for HTTP requests on port 9000 with the code change loaded.

  9. This time, instead of clicking the link and waiting for a few seconds in a new Google Doc, you can select the last HTTP request logged on the web interface hosted by the ngrok application in your local environment and click Replay . Same as last time, your Google Workspace add-on doesn't reply because it's being actively debugged .

  10. When you resume the execution from the Visual Studio Code debugger, you can see from the web interface hosted by the ngrok application in your local environment that the application generates a response with the updated version of the preview card.

Ява

  1. From the Visual Studio Code IDE installed in your local environment, do the following:

    1. In a new window, open the folder add-ons-samples/java/3p-resources .

    2. Configure the Maven project to run the application CreateLinkPreview on port 9000 locally by adding the Cloud Functions Framework build plugin function-maven-plugin to the pom.xml file: 

      ...
<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. You can now launch it locally in debug mode: 

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

    4. Create the file .vscode/launch.json in the root directory and configure a launch named Remote Debug Watch that attaches to the application previously launched on port 8000 : 

      {
    "version": "0.2.0",
    "configurations": [{
        "type": "java",
        "request": "attach",
        "name": "Remote Debug Watch",
        "projectName": "http-function",
        "hostName": "localhost",
        "port": 8000
    }]
}

    5. Add a breakpoint that pauses the HTTP request processing in the CreateLinkPreview.java file, and start attaching and debugging with the Remote Debug Watch configuration added before. The application is now running and listening for HTTP requests on port 9000 .

      The application is running and listening for HTTP requests on port 9000.
      Figure 3. The application is running and listening for HTTP requests on port 9000 .

  2. Launch the ngrok application in your local environment: 

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

    Replace NGROK_STATIC_DOMAIN with the static domain in your ngrok account. All requests are now redirected to your local environment and the port used by the application.

    The terminal with ngrok server running and redirecting.
    Figure 4. The terminal with ngrok server running and redirecting.

  3. A web interface is also started on your localhost by the ngrok application, you can monitor all activities by opening it in a browser.

    The web interface hosted by the ngrok application showing no HTTP requests.
    Figure 5. The web interface hosted by the ngrok application showing no HTTP requests.

  4. Test your Google Workspace add-on by previewing a case URL in a new Google Doc with a tester account:

    • Create a Google Doc.

      Create a Google Doc

    • Type the following link and press enter : 

      https://example.com/support/case/?name=Name1&description=Description1&priority=P1

    • Щелкните ссылку.

  5. In the Visual Studio Code in your local environment, you can see that the execution is paused at the breakpoint that was set.

    The execution is paused at the breakpoint that was set.
    Figure 6. The execution is paused at the breakpoint that was set.

  6. When you resume the execution from the Visual Studio Code debugger before Google Workspace add-ons times out, the Google Workspace add-on displays the link preview in the Google Doc from the cache.

  7. You can check the HTTP request and response logs from the web interface hosted by the ngrok application in your local environment.

    The HTTP request from the web interface hosted by the ngrok application.
    Figure 7. The HTTP request from the web interface hosted by the ngrok application.

  8. To change the application behavior, replace Case with Case: on line 78 of the CreateLinkPreview.java file, restart the mvnDebug process, and relaunch Remote Debug Watch to reattach and restart debugging .

  9. This time, instead of clicking the link and waiting for a few seconds in a new Google Doc, you can select the last HTTP request logged on the web interface hosted by the ngrok application in your local environment and click Replay . Same as last time, your Google Workspace add-on doesn't reply because it's being actively debugged .

  10. When you resume the execution from the Visual Studio Code debugger, you can see from the web interface hosted by the ngrok application in your local environment that the application generates a response with the updated version of the preview card.

Debug from remote environment

In this section, you interact with your Google Workspace add-on that executes on a remote environment.

Debug from remote the environment.
Figure 9. Debug from the remote environment.

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

  • Your Google Workspace add-on is deployed and installed.
  • Your application is running in your remote environment with the debugger enabled on a given port, and it's referenced as REMOTE_DEBUG_PORT in the instructions of this guide.
  • Your local environment can ssh to your remote environment.
  • An IDE is set up in your local environment that can debug. We use the Visual Studio Code IDE and its default debugging features in this guide for illustration purposes.

Connect your local and remote environments

In your local environment from where you want to initiate a debug client connection, set up an SSH tunnel: 

ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS

Replace the following:

  • LOCAL_DEBUG_PORT : The debug port in your local environment.
  • REMOTE_USERNAME : The username in your remote environment.
  • REMOTE_ADDRESS : The address of your remote environment.
  • REMOTE_DEBUG_PORT : The debug port in your remote environment.

The debug port in your local environment is now linked to the debug port in your remote environment.

Начните отладку

From the Visual Studio Code IDE installed in your local environment, do the following:

  1. In a new window, open the source code of your app.

  2. Create the file .vscode/launch.json in the root directory and configure a launch named Debug Remote that attaches to the debug port in your local environment:

    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
    }]
}

    Replace LOCAL_DEBUG_PORT with the debug port in your local environment.

  3. Add a breakpoint in the source code of your app that pauses the HTTP request processing, and start running and debugging with the Debug Remote configuration added before.

    Interact with your installed Google Workspace add-on. Your Google Workspace add-on doesn't reply because it's being actively debugged in the Visual Studio Code IDE.