此页面由 Cloud Translation API 翻译。

测试和调试 HTTP Google Workspace 插件

8еа39680ц8 5138ц2ц823 800е90953а 1685бдфб67

作为 Google Workspace 插件开发者，您可能需要调试代码测试更改或排查复杂问题。调试 Google Workspace 插件可以采用多种不同的方式完成操作，具体取决于应用的架构、应用的用途、应用的部署方式以及您的偏好设置。

本页介绍了如何使用以下代码调试 HTTP Google Workspace 插件： ngrok，这是一个统一的 Ingress 平台，可用于测试本地环境开发环境。在本指南中，您将在本地以及如何排查远程环境中的问题

从本地开发环境进行调试

在本部分中，您将与 Google Workspace 插件互动，在本地环境中执行

从本地开发调试
环境

图 1. 在本地开发环境中调试。

前提条件

Node.js

最新版本的 node 和 npm 已安装本地环境中的可用资源
在您的本地已安装最新版nodemon 它用于自动重新加载目的：
```
npm install -g nodemon
```
Google Cloud 项目。您可以按照以下部分前提条件和设置环境快速入门指南。
要在本地进行调试的 Google Workspace 插件的代码环境我们使用示例代码中的预览链接功能 GitHub 代码库中的 3p-resources googleworkspace/add-ons-samples 仅供参考。
在本地环境中设置且可调试的 IDE。我们使用 Visual Studio Code IDE 及其默认设置调试功能本指南仅作说明之用。
ngrok 账号。
“gcloud”的最新版本已安装并在您的代码中初始化本地环境

Python

“python3”的最新版本已安装本地环境中的可用资源
最新版本的pip和 virtualenv已安装到您的本地环境中，用于管理 Python 软件包和环境
Google Cloud 项目。您可以按照以下部分前提条件和设置环境快速入门指南。
要在本地进行调试的 Google Workspace 插件的代码环境我们使用示例代码中的预览链接功能 GitHub 代码库中的 3p-resources googleworkspace/add-ons-samples 仅供参考。
在本地环境中设置且可调试的 IDE。我们使用 Visual Studio Code IDE 及其默认设置调试功能本指南仅作说明之用。
ngrok 账号。
“gcloud”的最新版本已安装并在您的代码中初始化本地环境

Java

最新的稳定版 Java SE 11's JDK 在您的本地环境中安装环境
“Apache Maven”的最新版本已在您的本地环境中安装，用于管理 Java 项目。
Google Cloud 项目。您可以按照以下部分前提条件和设置环境快速入门指南。
要在本地进行调试的 Google Workspace 插件的代码环境我们使用示例代码中的预览链接功能 GitHub 代码库中的 3p-resources googleworkspace/add-ons-samples 仅供参考。
在本地环境中设置且可调试的 IDE。我们使用 Visual Studio Code IDE 及其默认设置调试功能本指南仅作说明之用。
ngrok 账号。
“gcloud”的最新版本已安装并在您的代码中初始化本地环境

公开提供本地主机服务

您需要将本地环境连接到互联网， Google Workspace 插件可以访问这些数据。使用 ngrok 应用将向公共网址发出的 HTTP 请求重定向到本地环境。

在本地环境的浏览器中，登录您的 ngrok 账号。
在本地运行应用并设置 authtoken 环境。
在您的 ngrok 账号，其引用名称为 NGROK_STATIC_DOMAIN 。

创建并安装插件部署

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

将 NGROK_STATIC_DOMAIN 替换为您的 ngrok 账号。

设置要使用的 Google Cloud 项目：
```
gcloud config set project PROJECT_ID
```
获取用于应用默认设置的新用户凭据凭据：
```
gcloud auth application-default login
```
将 PROJECT_ID 替换为项目 ID 应用的 Google Cloud 项目 ID。

创建部署：

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

将 DEPLOYMENT_FILE_PATH 替换为您的部署文件。

安装部署：

gcloud workspace-add-ons deployments install manageSupportCases

Google Workspace 插件会将其所有 HTTP 请求发送至
静态网域

图 2. Google Workspace 插件会发送其所有 HTTP 请求添加到静态网域ngrok 公共服务充当着 Google Workspace 插件以及执行。

测试 Google Workspace 插件

您可以在本地部署、测试、调试和自动重新加载您的 Google Workspace 插件。

Node.js

从安装在本地环境中的 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 的启动，该启动将触发通过在命令行中创建“.vscode/launch.json”文件来编写 debug-watch 脚本根目录：
```
{
    "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 配置。现在，该应用正在运行并监听端口 9000 上的 HTTP 请求。
  
  图 3. 应用正在运行并监听 HTTP 请求在端口 9000 上运行。
在本地环境中启动 ngrok 应用：
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
将 NGROK_STATIC_DOMAIN 替换为您的 ngrok 账号。现在，所有请求都会重定向到您的本地环境和应用使用的端口

图 4. ngrok 服务器正在运行和重定向的终端。
ngrok 还会在您的本地主机上启动网页界面则您可以在浏览器中打开它来监控所有活动。

图 5. 由 ngrok 应用托管的网页界面显示没有 HTTP 请求
请在新的 Google Workspace 插件中预览支持请求网址，使用测试人员账号的 Google 文档：
- 创建新的 Google 文档。
  
  创建新的 Google 文档
- 输入以下链接，然后按 enter：
```
https://example.com/support/case/?name=Name1&description=Description1&priority=P1
```
- 点击该链接。
在本地环境的 Visual Studio Code 中，您可以看到执行会在设置的断点处暂停。

图 6. 执行会在设置的断点处暂停。
从 Visual Studio Code 的调试程序继续执行时在 Google Workspace 插件过期前在 Google 文档中显示缓存中的链接预览。
您可以通过网页界面查看 HTTP 请求和响应日志由 ngrok 应用托管。

图 7. 来自由 ngrok 应用。
如需更改应用行为，请将 Case 替换为内嵌 Case: index.js的 51。当您保存文件时，nodemon 使用更新后的源代码重新加载应用，并且 Visual Studio Code 保持调试模式。

图 8. 应用正在运行并监听 HTTP 请求在端口 9000 上加载（已加载代码更改）。
这次，您不必点击链接，等待几秒，新的 Google 文档，您可以选择记录在网络上的最后一个 HTTP 请求由本地环境中由 ngrok 应用托管的接口然后点击 Replay。和上次一样，你的 Google Workspace 插件没有回复，因为正在积极调试。
从 Visual Studio Code 的调试程序继续执行时在由 ngrok 应用托管的网页界面中，供应用生成响应的本地环境更新后的预览卡片

Python

从安装在本地环境中的 Visual Studio Code IDE，执行以下操作：
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，并配置一项名为 Debug Watch 的启动，以触发应用在调试模式下从端口 9000 上的模块 functions-framework 中在虚拟环境 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 配置。现在，该应用正在运行并监听端口 9000 上的 HTTP 请求。
  
  图 3. 应用正在运行并监听 HTTP 请求在端口 9000 上运行。
在本地环境中启动 ngrok 应用：
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
将 NGROK_STATIC_DOMAIN 替换为您的 ngrok 账号。现在，所有请求都会重定向到您的本地环境和应用使用的端口

图 4. ngrok 服务器正在运行和重定向的终端。
ngrok 还会在您的本地主机上启动网页界面则您可以在浏览器中打开它来监控所有活动。

图 5. 由 ngrok 应用托管的网页界面显示没有 HTTP 请求
请在新的 Google Workspace 插件中预览支持请求网址，使用测试人员账号的 Google 文档：
- 创建新的 Google 文档。
  
  创建新的 Google 文档
- 输入以下链接，然后按 enter：
```
https://example.com/support/case/?name=Name1&description=Description1&priority=P1
```
- 点击该链接。
在本地环境的 Visual Studio Code 中，您可以看到执行会在设置的断点处暂停。

图 6. 执行会在设置的断点处暂停。
从 Visual Studio Code 的调试程序继续执行时在 Google Workspace 插件过期前在 Google 文档中显示缓存中的链接预览。
您可以通过网页界面查看 HTTP 请求和响应日志由 ngrok 应用托管。

图 7. 来自由 ngrok 应用。
如需更改应用行为，请将 Case 替换为内嵌 Case: main.py 文件的 56。保存文件时，Visual Studio Code 使用更新后的源代码自动重新加载应用，并保持调试模式

图 8. 应用正在运行并监听 HTTP 请求在端口 9000 上加载（已加载代码更改）。
这次，您不必点击链接，等待几秒，新的 Google 文档，您可以选择记录在网络上的最后一个 HTTP 请求由本地环境中由 ngrok 应用托管的接口然后点击 Replay。和上次一样，你的 Google Workspace 插件没有回复，因为正在积极调试。
从 Visual Studio Code 的调试程序继续执行时在由 ngrok 应用托管的网页界面中，供应用生成响应的本地环境更新后的预览卡片

Java

从安装在本地环境中的 Visual Studio Code IDE，执行以下操作：
1. 在新窗口中打开该文件夹 add-ons-samples/java/3p-resources。
2. 配置 Maven 项目以运行应用通过添加 Cloud NAT 对端口 9000 执行 CreateLinkPreview 使用 Cloud Functions 框架构建插件 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 配置。该应用现在正在运行并监听端口 9000 上的 HTTP 请求。
  
  图 3. 应用正在运行并监听 HTTP 在端口 9000 上发送请求。
在本地环境中启动 ngrok 应用：
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
将 NGROK_STATIC_DOMAIN 替换为您的 ngrok 账号。现在，所有请求都会重定向到您的本地环境和应用使用的端口

图 4. ngrok 服务器正在运行和重定向的终端。
ngrok 还会在您的本地主机上启动网页界面则您可以在浏览器中打开它来监控所有活动。

图 5. 由 ngrok 应用托管的网页界面显示没有 HTTP 请求
请在新的 Google Workspace 插件中预览支持请求网址，使用测试人员账号的 Google 文档：
- 创建新的 Google 文档。
  
  创建新的 Google 文档
- 输入以下链接，然后按 enter：
```
https://example.com/support/case/?name=Name1&description=Description1&priority=P1
```
- 点击该链接。
在本地环境的 Visual Studio Code 中，您可以看到执行会在设置的断点处暂停。

图 6. 执行会在设置的断点处暂停。
从 Visual Studio Code 的调试程序继续执行时在 Google Workspace 插件过期前在 Google 文档中显示缓存中的链接预览。
您可以通过网页界面查看 HTTP 请求和响应日志由 ngrok 应用托管。

图 7. 来自由 ngrok 应用。
如需更改应用行为，请将 Case 替换为内嵌 Case: CreateLinkPreview.java 文件的 78，请重启 mvnDebug 然后重新启动 Remote Debug Watch 以重新连接并重启调试。
这次，您不必点击链接，等待几秒，新的 Google 文档，您可以选择记录在网络上的最后一个 HTTP 请求由本地环境中由 ngrok 应用托管的接口然后点击 Replay。和上次一样，你的 Google Workspace 插件没有回复，因为正在积极调试。
从 Visual Studio Code 的调试程序继续执行时在由 ngrok 应用托管的网页界面中，供应用生成响应的本地环境更新后的预览卡片

从远程环境调试

在本部分中，您将与 Google Workspace 插件互动，在远程环境中执行

使用遥控器调试
环境

图 9. 从远程环境调试。

前提条件

您的 Google Workspace 插件已部署和安装。
在带有调试程序的远程环境中运行的应用已在给定端口上启用，则引用为 REMOTE_DEBUG_PORT。
本地环境可以 ssh 到远程环境。
在本地环境中设置且可调试的 IDE。我们使用 Visual Studio Code IDE 及其默认设置调试仅供参考。

连接本地和远程环境

在要启动调试客户端的本地环境中设置 SSH 隧道：

ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS

替换以下内容：

LOCAL_DEBUG_PORT：本地中的调试端口环境
REMOTE_USERNAME：您的远程环境中的用户名。
REMOTE_ADDRESS：远程环境的地址。
REMOTE_DEBUG_PORT：遥控器中的调试端口环境

本地环境中的调试端口现已链接到远程环境

开始调试

从安装在本地环境中的 Visual Studio Code IDE，执行以下操作：以下：

在新窗口中，打开应用的源代码。

在根目录中创建文件 .vscode/launch.json，并配置启动名为 Debug Remote 并连接到您本地系统中的调试端口的环境：

Node.js

{
    "version": "0.2.0",
    "configurations": [{
        "type": "node",
        "request": "attach",
        "name": "Debug Remote",
        "address": "127.0.0.1",
        "port": LOCAL_DEBUG_PORT
    }]
}

Python

{
    "version": "0.2.0",
    "configurations": [{
        "type": "python",
        "request": "attach",
        "name": "Debug Remote",
        "connect": {
            "host": "127.0.0.1",
            "port": LOCAL_DEBUG_PORT
        }
    }]
}

Java

{
    "version": "0.2.0",
    "configurations": [{
        "type": "java",
        "request": "attach",
        "name": "Debug Remote",
        "hostName": "127.0.0.1",
        "port": LOCAL_DEBUG_PORT
    }]
}

将 LOCAL_DEBUG_PORT 替换为您的本地环境

在应用的源代码中添加用于暂停 HTTP 请求的断点处理，开始运行调试 Debug Remote 配置。

与已安装的 Google Workspace 插件互动。您的 Google Workspace 插件不会回复，因为插件仍在运行已调试（位于 Visual Studio Code IDE 中）。

测试和调试 HTTP Google Workspace 插件

从本地开发环境进行调试

前提条件

Node.js

Python

Java

公开提供本地主机服务

创建并安装插件部署

测试 Google Workspace 插件

Node.js

Python

Java

从远程环境调试

前提条件

连接本地和远程环境

开始调试

Node.js

Python

Java

相关主题