调试 Google Chat 应用

作为 Google Chat 应用开发者，您可能需要调试代码，以测试更改效果或排查复杂的问题。调试 Chat 应用可以通过多种不同的方式完成，具体取决于您应用的架构、用途、部署方式以及您自己的偏好。

本页介绍了如何使用 ngrok 调试 HTTP Chat 应用。ngrok 是一个统一的 Ingress 平台，可用于测试本地开发环境。在本指南中，您将在本地环境中测试代码更改，并排查远程环境中的问题。

**注意**： 如果您的 Chat 应用是使用 Google Apps 脚本构建的，请改用以下内容：

• 测试 部署
• 使用 调试器和断点

通过本地开发环境进行调试

在本部分中，您将与在本地环境中执行的 Chat 应用互动。

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

研讨会

Node.js

Python

Java

前提条件

Node.js

• 在本地环境中安装了最新版本的 node 和 npm installed 。

• 在本地 环境中nodemon 安装了最新版本的 ，它用于自动重新加载：

  npm install -g nodemon

• 已配置为即时通讯的 HTTP Chat 应用。您可以按照 快速入门指南中的 前提条件、 设置 环境和 将应用发布到 Google Chat部分进行操作。唯一的区别是，您需要将应用名称 设置为 Debug App，并将 HTTP 端点网址 设置为任意网址，例如 http://example.com。

• 在本地环境中设置了可以调试的 IDE。在本指南中，我们使用 Visual Studio Code IDE及其默认 调试功能进行说明。

• Git 安装了 在本地环境中。

• 一个 ngrok 账号。

Python

• 在本地环境中安装了最新版本的 python3 installed 。
• 在您的 本地环境中安装了最新版本的 pip 和 virtualenv，它们分别用于管理 Python 软件包和虚拟 环境。
• 已配置为即时通讯的 HTTP Chat 应用。您可以按照 快速入门指南中的 前提条件、 设置 环境和 将应用发布到 Google Chat部分进行操作。唯一的区别是，您需要将应用名称 设置为 Debug App，并将 HTTP 端点网址 设置为任意网址，例如 http://example.com。
• 在本地环境中设置了可以调试的 IDE。在本指南中，我们使用 Visual Studio Code IDE及其默认 调试功能进行说明。
• Git 安装了 在本地环境中。
• 一个 ngrok 账号。
• 在本地环境中安装并初始化了最新版本的 gcloud gcloud 。

Java

• 在本地环境中安装了 Java SE 11's JDK 的最新稳定版本。
• 在本地环境中安装了最新版本的 Apache Maven ， 它用于管理 Java 项目。
• 已配置为即时通讯的 HTTP Chat 应用。您可以按照 快速入门指南中的 前提条件、 设置 环境和 将应用发布到 Google Chat部分进行操作。唯一的区别是，您需要将应用名称 设置为 Debug App，并将 HTTP 端点网址 设置为任意网址，例如 http://example.com。
• 在本地环境中设置了可以调试的 IDE。在本指南中，我们使用 Visual Studio Code IDE及其默认 调试功能进行说明。
• Git 安装了 在本地环境中。
• 一个 ngrok 账号。
• 在本地环境中安装并初始化了最新版本的 gcloud gcloud 。

公开提供 localhost 服务

您需要将本地环境连接到互联网，以便 Chat 应用可以访问它。ngrok 应用用于将对公共网址发出的 HTTP 请求重定向到您的本地环境。

1. 在本地环境的浏览器中，登录您的 ngrok 账号。
2. 安装该应用并在本地环境中设置 authtoken。
3. 在 ngrok 账号中创建一个静态网域，在本指南的说明中，该网域称为 NGROK_STATIC_DOMAIN 。

配置 Chat 应用

配置 Chat 应用，以将其所有 HTTP 请求发送到您的静态网域。

1. 在 Google API 控制台中，打开 Google Chat API 页面：

   前往 Google Chat API 页面

2. 点击配置 标签页。

3. 依次前往互动功能 > 连接设置 ，并将文本字段 HTTP 端点网址 的值设置为：

   https://NGROK_STATIC_DOMAIN
   

   将 NGROK_STATIC_DOMAIN 替换为 ngrok 账号中的静态网域。

4. 点击保存 。

图 2. Chat 应用将其所有 HTTP 请求发送到静态网域。ngrok 公共服务充当 Chat 应用与在本地执行的应用代码之间的桥梁。

测试 Chat 应用

您可以在本地部署、配置、测试、调试和自动重新加载 Chat 应用。

注意 ：在 Python 和 Java 的示例中，Chat 应用使用 Functions 框架执行；在 Node.js 的示例中，Chat 应用使用 Express 框架执行。

Node.js

1. 将 googleworkspace/google-chat-samples 代码库从 GitHub 克隆到本地环境，其中包含要执行的应用的代码：

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

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

   1. 在新窗口中，打开文件夹 google-chat-samples/node/basic-app。

   2. 通过在 package.json 文件中添加两个脚本，将应用配置为自动重新加载调试：

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

   3. 在根目录中，安装应用：

      npm install

   4. 通过在根目录中创建文件 .vscode/launch.json，创建并配置名为 Debug Watch 的启动，以触发脚本 debug-watch：

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "node",
              "request": "launch",
              "name": "Debug Watch",
              "cwd": "${workspaceRoot}",
              "runtimeExecutable": "npm",
              "runtimeArgs": ["run-script", "debug-watch"]
          }]
      }
      

   5. 添加一个断点，以暂停 index.js文件中的 HTTP 请求处理，并使用之前添加的 Debug Watch配置 开始运行和调试。应用现在正在运行，并监听端口 9000 上的 HTTP 请求。

      

      图 3. 应用正在运行，并监听端口 9000 上的 HTTP 请求。

3. 在本地环境中启动 ngrok 应用：

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   将 NGROK_STATIC_DOMAIN 替换为 ngrok 账号中的静态网域。现在，所有请求都会重定向到您的本地环境和应用使用的端口。

   

   图 4. 运行并重定向 ngrok 服务器的终端。

4. ngrok 应用也会在 localhost 上启动一个 Web 界面，您可以在浏览器中打开该界面来监控所有活动。

   

   图 5. ngrok 应用托管的 Web 界面，其中未显示任何 HTTP 请求。

5. 向 Chat 应用发送私信来测试该应用：

   • 打开 Google Chat。

     前往 Google Chat

   • 点击发起新聊天 。

   • 在对话框中，输入 Chat 应用的名称。

   • 在搜索结果中，找到您的 Chat 应用， 点击 添加 > Chat。

   • 在私信空间中，输入 Hello 并按 enter。您的 Chat 应用不会回复，因为它正在被积极调试。

6. 在本地环境中的 Visual Studio Code 中，您可以看到执行在设置的断点处暂停。

   

   图 6. 执行在设置的断点处暂停。

7. 当您从 Visual Studio Code 的调试器恢复执行时，在 Google Chat 超时之前，Chat 应用会回复 Your message : Hello。

8. 您可以在本地环境中 ngrok 应用托管的 Web 界面中查看 HTTP 请求和响应日志。

   

   图 7. ngrok 应用托管的 Web 界面中的 HTTP 请求。

9. 如需更改应用行为，请将 index.json 的第 35 行中的 Your message 替换为 Here was your message。保存文件后，nodemon 会使用更新后的源代码自动重新加载应用，并且 Visual Studio Code 仍处于调试模式。

   

   图 8. 应用正在运行，并监听端口 9000 上的 HTTP 请求，并且已加载代码更改。

10. 这次，您无需在空间中发送第二条消息 Hello，而是可以选择本地环境中 ngrok 应用托管的 Web 界面上记录的最后一个 HTTP 请求，然后点击 Replay。 与上次一样，您的 Chat 应用不会回复，因为它正在被积极调试。

11. 当您从 Visual Studio Code 的调试器恢复执行时，您可以在本地环境中 ngrok 应用托管的 Web 界面中看到，应用会生成包含更新后的消息版本 Here was your message : Hello 的响应。

Python

1. 获取新的用户凭据，以用于 应用默认 凭据：

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   将 PROJECT_ID 替换为应用的 云项目 的 项目 ID 。

2. 将 googleworkspace/google-chat-samples 代码库从 GitHub 克隆到本地环境，其中包含应用代码：

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

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

   1. 在新窗口中，打开文件夹 google-chat-samples/python/avatar-app。

   2. 为 Python env 创建新的虚拟环境并将其激活：

      virtualenv env
      source env/bin/activate

   3. 在虚拟环境中使用 pip 安装所有项目依赖项：

      pip install -r requirements.txt

   4. 在根目录中创建文件 .vscode/launch.json，并配置名为 Debug Watch 的启动，以在虚拟环境 env 中以调试模式从模块 functions-framework 在端口 9000 上触发应用：

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "python",
              "request": "launch",
              "name": "Debug Watch",
              "python": "${workspaceFolder}/env/bin/python3",
              "module": "functions_framework",
              "args": [
                  "--target", "avatar_app",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      

   5. 添加一个断点，以暂停 main.py文件中的 HTTP 请求处理，并使用之前添加的 Debug Watch配置 开始运行和调试。应用现在正在运行，并监听端口 9000 上的 HTTP 请求。

      

      图 3. 应用正在运行，并监听端口 9000 上的 HTTP 请求。

4. 在本地环境中启动 ngrok 应用：

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   将 NGROK_STATIC_DOMAIN 替换为 ngrok 账号中的静态网域。现在，所有请求都会重定向到您的本地环境和应用使用的端口。

   

   图 4. 运行并重定向 ngrok 服务器的终端。

5. ngrok 应用也会在 localhost 上启动一个 Web 界面，您可以在浏览器中打开该界面来监控所有活动。

   

   图 5. ngrok 应用托管的 Web 界面，其中未显示任何 HTTP 请求。

6. 向 Chat 应用发送私信来测试该应用：

   • 打开 Google Chat。

     前往 Google Chat

   • 点击发起新聊天 。

   • 在对话框中，输入 Chat 应用的名称。

   • 在搜索结果中，找到您的 Chat 应用， 点击 添加 > Chat。

   • 在私信空间中，输入 Hey! 并按 enter。您的 Chat 应用不会回复，因为它正在被积极调试。

7. 在本地环境中的 Visual Studio Code 中，您可以看到执行在设置的断点处暂停。

   

   图 6. 执行在设置的断点处暂停。

8. 当您从 Visual Studio Code 的调试器恢复执行时，在 Google Chat 超时之前，Chat 应用会在消息中回复您的姓名和头像图片。

9. 您可以在本地环境中 ngrok 应用托管的 Web 界面中查看 HTTP 请求和响应日志。

   

   图 7. ngrok 应用托管的 Web 界面中的 HTTP 请求。

10. 如需更改应用行为，请将 main.py 文件的第 51 行中的 Hello 替换为 Hey。保存文件后，Visual Studio Code 会使用更新后的源代码自动重新加载应用，并且仍处于调试模式。

    

    图 8. 应用正在运行，并监听端口 9000 上的 HTTP 请求，并且已加载代码更改。

11. 这次，您无需在空间中发送第二条消息 Hey!，而是可以选择本地环境中 ngrok 应用托管的 Web 界面上记录的最后一个 HTTP 请求，然后点击 Replay。 与上次一样，您的 Chat 应用不会回复，因为它正在被积极调试。

12. 当您从 Visual Studio Code 的调试器恢复执行时，您可以在本地环境中 ngrok 应用托管的 Web 界面中看到，应用会生成包含更新后的消息版本的响应。

Java

1. 获取新的用户凭据，以用于 应用默认 凭据：

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   将 PROJECT_ID 替换为应用的 云项目 的 项目 ID 。

2. 将 googleworkspace/google-chat-samples 代码库从 GitHub 克隆到本地环境，其中包含应用代码：

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

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

   1. 在新窗口中，打开文件夹 google-chat-samples/java/avatar-app。

   2. 通过在 pom.xml 文件中添加 Google Cloud Functions 框架 build 插件 function-maven-plugin，将 Maven 项目配置为在本地端口 9000 上运行应用 App：

      ...
      <plugin>
          <groupId>com.google.cloud.functions</groupId>
          <artifactId>function-maven-plugin</artifactId>
          <version>0.11.0</version>
          <configuration>
              <functionTarget>App</functionTarget>
              <port>9000</port>
          </configuration>
      </plugin>
      ...
      

   3. 您现在可以在本地以调试模式启动它：

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

   4. 在根目录中创建文件 .vscode/launch.json，并配置名为 Remote Debug Watch 的启动，以附加到之前使用端口 8000 启动的应用：

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

   5. 添加一个断点，以暂停 App.java 文件中的 HTTP 请求处理，并 使用之前添加的 Remote Debug Watch 配置开始附加和 调试。应用现在正在运行，并监听端口 9000 上的 HTTP 请求。

      

      图 3. 应用正在运行，并监听端口 9000 上的 HTTP 请求。

4. 在本地环境中启动 ngrok 应用：

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   将 NGROK_STATIC_DOMAIN 替换为 ngrok 账号中的静态网域。现在，所有请求都会重定向到您的本地环境和应用使用的端口。

   

   图 4. 运行并重定向 ngrok 服务器的终端。

5. ngrok 应用也会在 localhost 上启动一个 Web 界面，您可以在浏览器中打开该界面来监控所有活动。

   

   图 5. ngrok 应用托管的 Web 界面，其中未显示任何 HTTP 请求。

6. 向 Chat 应用发送私信来测试该应用：

   • 打开 Google Chat。

     前往 Google Chat

   • 点击发起新聊天 。

   • 在对话框中，输入 Chat 应用的名称。

   • 在搜索结果中，找到您的 Chat 应用， 点击 添加 > Chat。

   • 在私信空间中，输入 Hey! 并按 enter。您的 Chat 应用不会回复，因为它正在被积极调试。

7. 在本地环境中的 Visual Studio Code 中，您可以看到执行在设置的断点处暂停。

   

   图 6. 执行在设置的断点处暂停。

8. 当您从 Visual Studio Code 的调试器恢复执行时，在 Google Chat 超时之前，Chat 应用会在消息中回复您的姓名和头像图片。

9. 您可以在本地环境中 ngrok 应用托管的 Web 界面中查看 HTTP 请求和响应日志。

   

   图 7. ngrok 应用托管的 Web 界面中的 HTTP 请求。

10. 如需更改应用行为，请将 Hello 替换为 Hey，将 App.java 文件的第 55 行中的 mvnDebug 进程重启，然后 重新启动 Remote Debug Watch 以重新附加并重启 调试。

11. 这次，您无需在空间中发送第二条消息 Hey!，而是可以选择本地环境中 ngrok 应用托管的 Web 界面上记录的最后一个 HTTP 请求，然后点击 Replay。 与上次一样，您的 Chat 应用不会回复，因为它正在被积极调试。

12. 当您从 Visual Studio Code 的调试器恢复执行时，您可以在本地环境中 ngrok 应用托管的 Web 界面中看到，应用会生成包含更新后的消息版本的响应。

通过远程环境进行调试

在本部分中，您将与在远程环境中执行的 Chat 应用互动。

图 9. 通过远程环境进行调试。

前提条件

• 与 Chat 应用的私信空间。您可以 按照 测试 Chat 应用部分 快速入门指南中的说明进行操作，并搜索您的 Chat 应用以启动一个。
• 您的应用在远程环境中运行，并在给定端口上启用了调试器。在本指南的说明中，该端口称为 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 中，执行以下操作：

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

   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 替换为本地环境中的调试端口。

3. 在应用的源代码中添加一个断点，以暂停 HTTP 请求 处理，并使用之前添加的Debug Remote配置开始运行和调试。

在与 Chat 应用的私信空间中，输入您要测试的任何内容，然后按 enter。您的 Chat 应用不会回复，因为它正在被积极 调试 在 Visual Studio Code IDE 中。

相关主题

• 了解如何启用和 查询错误日志。
• 了解如何修复 Google Chat 应用 错误，例如“应用无响应”“只有 Google Workspace 用户可以使用 Google Chat API ”或“用户可以从聊天室中排除 ”。
• 了解如何修复卡片错误，例如卡片消息、 对话框或链接预览未按预期呈现或运行。