作为 Google Chat 应用开发者,您可能需要调试代码 测试更改或排查复杂问题。调试 Chat 扩展应用 可以采用多种不同的方式完成操作,具体取决于应用的架构、 应用的用途、应用的部署方式以及您的偏好设置。
本页介绍了如何使用以下代码调试 HTTP Chat 应用: ngrok,这是一个统一的 Ingress 平台,可用于测试本地环境 开发环境在本指南中,您将在本地 以及如何排查远程环境中的问题
从本地开发环境进行调试
在本部分中,您将与用于 在本地环境中执行
图 1. 在本地开发环境中调试。
研讨会
Node.js
Python
Java
前提条件
Node.js
- 最新版本的
node
和npm
已安装 本地环境中的可用资源 在您的本地已安装最新版
nodemon
它用于自动重新加载目的:npm install -g nodemon
一个针对以下服务进行配置的 HTTP Chat 应用: 消息。您可以按照以下部分 前提条件 设置 环境 以及将应用发布到 Google 以下人员的聊天: 快速入门指南。唯一 不同之处在于,您需要将 App name 设置为
Debug App
, 将应用网址设置为http://example.com
等任何内容。在本地环境中设置且可调试的 IDE。我们使用
Visual Studio Code
IDE 及其默认设置 调试功能 本指南仅作说明之用。Git
已安装 本地环境中的可用资源ngrok
账号。
Python
- “
python3
”的最新版本 已安装 本地环境中的可用资源 - 最新版本的
pip
和virtualenv
已安装到您的 本地环境中,用于管理 Python 软件包和 环境 - 一个针对以下服务进行配置的 HTTP Chat 应用:
消息。您可以按照以下部分
前提条件
设置
环境
以及将应用发布到 Google
以下人员的聊天:
快速入门指南。唯一
不同之处在于,您需要将 App name 设置为
Debug App
, 将应用网址设置为http://example.com
等任何内容。 - 在本地环境中设置且可调试的 IDE。我们使用
Visual Studio Code
IDE 及其默认设置 调试功能 本指南仅作说明之用。 Git
已安装 本地环境中的可用资源ngrok
账号。- “
gcloud
”的最新版本 已安装 并在您的代码中初始化 本地环境
Java
- 最新的稳定版
Java SE 11's JDK
在您的本地环境中安装 环境 - “
Apache Maven
”的最新版本 已在您的本地环境中安装, 用于管理 Java 项目。 - 一个针对以下服务进行配置的 HTTP Chat 应用:
消息。您可以按照以下部分
前提条件
设置
环境
以及将应用发布到 Google
以下人员的聊天:
快速入门指南。唯一
不同之处在于,您需要将 App name 设置为
Debug App
, 将应用网址设置为http://example.com
等任何内容。 - 在本地环境中设置且可调试的 IDE。我们使用
Visual Studio Code
IDE 及其默认设置 调试功能 本指南仅作说明之用。 Git
已安装 本地环境中的可用资源ngrok
账号。- “
gcloud
”的最新版本 已安装 并在您的代码中初始化 本地环境
公开提供本地主机服务
您需要将本地环境连接到互联网,
Chat 应用可以访问此内容。使用 ngrok
应用
将向公共网址发出的 HTTP 请求重定向到本地环境。
- 在本地环境的浏览器中,登录您的
ngrok
账号。 - 在本地运行应用并设置
authtoken
环境。 - 在您的
ngrok
账号,其引用名称为NGROK_STATIC_DOMAIN
。
配置 Chat 应用
将 Chat 应用配置为将其所有 HTTP 请求发送至 静态网域。
在 Google Cloud 控制台中,打开 Google Chat API 页面:
点击配置标签页。
转到互动功能 >连接设置并设置值 App Url 文本字段,以便:
https://NGROK_STATIC_DOMAIN
将
NGROK_STATIC_DOMAIN
替换为 您的ngrok
账号。点击保存。
图 2. Chat 应用发送其所有 HTTP 请求
添加到静态网域ngrok
公共服务充当着
Chat 应用和执行的应用代码
。
测试 Chat 应用
您可以在本地部署、配置、测试、调试和自动重新加载您的 Chat 应用。
Node.js
从 GitHub 克隆
googleworkspace/google-chat-samples
代码库 本地环境,它包含用于 执行:git clone https://github.com/googleworkspace/google-chat-samples.git
从安装在本地环境中的
Visual Studio Code
IDE, 执行以下操作:- 在新窗口中打开该文件夹
google-chat-samples/node/basic-app
。 通过添加以下两个代码,将应用配置为自动重新加载调试
package.json
文件中的脚本:{ ... "scripts": { ... "debug": "node --inspect index.js", "debug-watch": "nodemon --watch ./ --exec npm run debug" } ... }
从根目录中安装应用:
npm install
创建并配置名为
Debug Watch
的启动,该启动将触发 通过在命令行中创建“.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"] }] }
添加一个断点,用于暂停 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 请求直接发送您的 Chat 应用来测试该应用 消息:
打开 Google Chat。
点击发起新对话
。在对话框中,输入您的 Chat 应用。
在搜索结果中,找到您的 Chat 应用。 点击添加 > 聊天。
在私信聊天室中,输入“
Hello
”,然后按enter
。您的 Chat 应用未回复,因为正在访问 已主动调试。
在本地环境的
Visual Studio Code
中,您可以看到 执行会在设置的断点处暂停。图 6. 执行会在设置的断点处暂停。
从
Visual Studio Code
的调试程序继续执行时 以免 Google Chat 让 Chat 应用超时 回复Your message : Hello
。您可以通过网页界面查看 HTTP 请求和响应日志 由
ngrok
应用托管。图 7. 来自由
ngrok
应用。如需更改应用行为,请将
Your message
替换为Here was your message
的内嵌35
(位于index.json
中)。保存后nodemon
会使用 已更新源代码,并且Visual Studio Code
保持调试模式。图 8. 应用正在运行并监听 HTTP 请求 在端口
9000
上加载(已加载代码更改)。这一次,您不用在聊天室中
Hello
发送第二封邮件, 可以选择记录在由 托管的网络界面上的最后一个 HTTP 请求 在本地环境中打开ngrok
应用,然后点击Replay
。 和上次一样,你的 Chat 应用不回复 因为它正在积极调试中。从
Visual Studio Code
的调试程序继续执行时 在由ngrok
应用托管的网页界面中, 供应用生成响应的本地环境 消息“Here was your message : Hello
”的更新版本。
Python
获取用于应用默认设置的新用户凭据 凭据:
gcloud config set project PROJECT_ID
gcloud auth application-default login
将
PROJECT_ID
替换为 项目 ID 应用的 Cloud 项目 ID。从 GitHub 克隆
googleworkspace/google-chat-samples
代码库 本地环境中,则该文件包含应用代码:git clone https://github.com/googleworkspace/google-chat-samples.git
从安装在本地环境中的
Visual Studio Code
IDE, 执行以下操作:- 在新窗口中打开该文件夹
google-chat-samples/python/avatar-app
。 为 Python
env
创建新的虚拟环境并将其激活:virtualenv env
source env/bin/activate
在虚拟环境中使用
pip
安装所有项目依赖项 环境:pip install -r requirements.txt
在根目录中创建文件
.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", "avatar_app", "--port", "9000", "--debug" ] }] }
添加一个断点,用于暂停 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 请求直接发送您的 Chat 应用来测试该应用 消息:
打开 Google Chat。
点击发起新对话
。在对话框中,输入您的 Chat 应用。
在搜索结果中,找到您的 Chat 应用。 点击添加 > 聊天。
在私信聊天室中,输入“
Hey!
”,然后按enter
。您的 Chat 应用未回复,因为正在访问 已主动调试。
在本地环境的
Visual Studio Code
中,您可以看到 执行会在设置的断点处暂停。图 6. 执行会在设置的断点处暂停。
从
Visual Studio Code
的调试程序继续执行时 以免 Google Chat 让 Chat 应用超时 并在消息中使用您的姓名和头像图片进行回复。您可以通过网页界面查看 HTTP 请求和响应日志 由
ngrok
应用托管。图 7. 来自由
ngrok
应用。如需更改应用行为,请将
Hello
替换为内嵌Hey
main.py
文件的51
。保存文件时,Visual Studio Code
使用更新后的源代码自动重新加载应用,并 保持调试模式图 8. 应用正在运行并监听 HTTP 请求 在端口
9000
上加载(已加载代码更改)。这一次,您不用在聊天室中
Hey!
发送第二封邮件, 可以选择记录在由 托管的网络界面上的最后一个 HTTP 请求 在本地环境中打开ngrok
应用,然后点击Replay
。 和上次一样,您的 Chat 应用不回复 因为它正在积极调试中。从
Visual Studio Code
的调试程序继续执行时 在由ngrok
应用托管的网页界面中, 供应用生成响应的本地环境 消息的更新版本。
Java
获取用于应用默认设置的新用户凭据 凭据:
gcloud config set project PROJECT_ID
gcloud auth application-default login
将
PROJECT_ID
替换为 项目 ID 应用的 Cloud 项目 ID。从 GitHub 克隆
googleworkspace/google-chat-samples
代码库 本地环境中,它包含应用代码:git clone https://github.com/googleworkspace/google-chat-samples.git
从安装在本地环境中的
Visual Studio Code
IDE, 执行以下操作:- 在新窗口中打开该文件夹
google-chat-samples/java/avatar-app
。 配置 Maven 项目以在其上运行
App
应用 通过添加 Cloud Functions 框架 build,在本地移植9000
pom.xml
文件中的插件function-maven-plugin
:... <plugin> <groupId>com.google.cloud.functions</groupId> <artifactId>function-maven-plugin</artifactId> <version>0.11.0</version> <configuration> <functionTarget>App</functionTarget> <port>9000</port> </configuration> </plugin> ...
现在,您可以在调试模式下在本地启动它:
mvnDebug function:run Preparing to execute Maven in debug mode Listening for transport dt_socket at address: 8000
在根目录中创建文件
.vscode/launch.json
,并 配置一个名为Remote Debug Watch
的启动,该启动会附加到 之前使用端口8000
启动的应用:{ "version": "0.2.0", "configurations": [{ "type": "java", "request": "attach", "name": "Remote Debug Watch", "projectName": "http-function", "hostName": "localhost", "port": 8000 }] }
添加一个断点,用于暂停 HTTP 请求处理,
App.java
文件,然后开始附加并 调试 之前添加了Remote Debug Watch
配置。该应用 现在正在运行并监听端口9000
上的 HTTP 请求。图 3. 应用正在运行并监听 HTTP 在端口
9000
上发送请求。
- 在新窗口中打开该文件夹
在本地环境中启动
ngrok
应用:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
将
NGROK_STATIC_DOMAIN
替换为 您的ngrok
账号。现在,所有请求都会重定向到您的本地 环境和应用使用的端口图 4.
ngrok
服务器正在运行和重定向的终端。ngrok
还会在您的本地主机上启动网页界面 则您可以在浏览器中打开它来监控所有活动。图 5. 由
ngrok
应用托管的网页界面 显示没有 HTTP 请求直接发送您的 Chat 应用来测试该应用 消息:
打开 Google Chat。
点击发起新对话
。在对话框中,输入您的 Chat 应用。
在搜索结果中,找到您的 Chat 应用。 点击添加 > 聊天。
在私信聊天室中,输入“
Hey!
”,然后按enter
。您的 Chat 应用未回复,因为正在访问 已主动调试。
在本地环境的
Visual Studio Code
中,您可以看到 执行会在设置的断点处暂停。图 6. 执行会在设置的断点处暂停。
从
Visual Studio Code
的调试程序继续执行时 以免 Google Chat 让 Chat 应用超时 并在消息中使用您的姓名和头像图片进行回复。您可以通过网页界面查看 HTTP 请求和响应日志 由
ngrok
应用托管。图 7. 来自由
ngrok
应用。如需更改应用行为,请将
Hello
替换为内嵌Hey
55
的App.java
文件,重启mvnDebug
进程,以及 重新启动Remote Debug Watch
以重新连接并重启 调试。这一次,您不用在聊天室中
Hey!
发送第二封邮件, 可以选择记录在由 托管的网络界面上的最后一个 HTTP 请求 在本地环境中打开ngrok
应用,然后点击Replay
。 和上次一样,你的 Chat 应用不回复 因为它正在积极调试中。从
Visual Studio Code
的调试程序继续执行时 在由ngrok
应用托管的网页界面中, 供应用生成响应的本地环境 消息的更新版本。
从远程环境调试
在本部分中,您将与用于 在远程环境中执行
图 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,执行以下操作:
以下:
- 在新窗口中,打开应用的源代码。
在根目录中创建文件
.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
配置。
在包含 Chat 应用的私信聊天室中,输入
然后按 enter
键,您的
Chat 应用不会回复,因为应用正在使用中
已调试
(位于 Visual Studio Code
IDE 中)。
相关主题
- 了解如何启用和 query 错误日志。
- 了解如何修正 Google Chat 应用 错误,如“应用无响应”“Google Chat API” 仅适用于 Google Workspace 用户”或“可以排除用户 from Spaces”。
- 了解如何修正卡片错误,例如卡片消息、 对话框或链接预览无法按预期呈现或运行。