Google Chat 應用程式開發人員可能需要對程式碼偵錯,才能測試變更或排解複雜問題。您可以根據應用程式的架構、應用程式功能、應用程式的部署方式和偏好設定,以多種方式為 Chat 擴充應用程式偵錯。
本頁說明如何使用 ngrok 為 HTTP Chat 應用程式偵錯。ngrok 是可用於測試本機開發環境的統合式輸入平台。在本指南中,您將在本機環境中測試程式碼變更,並排解遠端環境中的問題。
從本機開發環境偵錯
在本節中,您將與在本機環境中執行的 Chat 應用程式互動。
圖 1 在本機開發環境中偵錯。
研討會
Node.js
Python
Java
先備知識
Node.js
- 已在本機環境中安裝的最新版
node
和npm
。 在本機環境中安裝的最新版
nodemon
,用於自動重新載入:npm install -g nodemon
專為訊息設定的 HTTP Chat 應用程式您可以參考快速入門指南的「必要條件」、「設定環境」以及「將應用程式發布至 Google Chat」部分。唯一的差別在於,您必須將「應用程式名稱」設為
Debug App
,並將「應用程式網址」設為http://example.com
這類任何項目。在本機環境中設定且可進行偵錯的 IDE。為進行說明,我們會使用本指南中的
Visual Studio Code
IDE 和預設的偵錯功能。Git
已安裝在本機環境中。ngrok
帳戶。
Python
- 已在本機環境中安裝的最新版
python3
。 - 在本機環境中安裝的最新版
pip
和virtualenv
,兩者分別用於管理 Python 套件和虛擬環境。 - 專為訊息設定的 HTTP Chat 應用程式您可以參考快速入門指南的「必要條件」、「設定環境」以及「將應用程式發布至 Google Chat」部分。唯一的差別在於,您必須將「應用程式名稱」設為
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 Chat」部分。唯一的差別在於,您必須將「應用程式名稱」設為
Debug App
,並將「應用程式網址」設為http://example.com
這類任何項目。 - 在本機環境中設定且可進行偵錯的 IDE。為進行說明,我們會使用本指南中的
Visual Studio Code
IDE 和預設的偵錯功能。 Git
已安裝在本機環境中。ngrok
帳戶。- 在您的本機環境中安裝並初始化最新版
gcloud
。
公開 localhost 服務
您需要將本機環境連上網際網路,Chat 應用程式才能存取。ngrok
應用程式可用來將對公開網址發出的 HTTP 要求重新導向至您的本機環境。
- 使用本機環境的瀏覽器登入
ngrok
帳戶。 - 在本機環境中安裝應用程式並設定
authtoken
。 - 在
ngrok
帳戶中建立靜態網域。在本指南的操作說明中,網域稱為NGROK_STATIC_DOMAIN
。
設定 Chat 應用程式
設定 Chat 應用程式,將所有 HTTP 要求傳送至您的靜態網域。
在 Google Cloud 控制台中,開啟 Google Chat API 頁面:
點選「設定」分頁標籤。
依序前往「互動功能」 >「連線設定」,並將「應用程式網址」文字欄位的值設為:
https://NGROK_STATIC_DOMAIN
將
NGROK_STATIC_DOMAIN
替換為ngrok
帳戶中的靜態網域。按一下「儲存」。
圖 2. Chat 應用程式會將所有 HTTP 要求
傳送至靜態網域ngrok
公開服務可做為 Chat 應用程式與本機執行應用程式程式碼之間的橋樑。
測試 Chat 應用程式
您可在本機部署、設定、測試、偵錯及自動重新載入 Chat 應用程式。
Node.js
將
googleworkspace/google-chat-samples
存放區從 GitHub 複製到本機環境,當中包含要執行的應用程式程式碼: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
在根目錄中建立
.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"] }] }
在
index.js
檔案中新增中斷點以暫停處理 HTTP 要求,並透過先前新增的Debug Watch
設定開始執行及偵錯。應用程式現在可以在通訊埠9000
執行並監聽 HTTP 要求。圖 3. 應用程式正在執行,並監聽通訊埠
9000
的 HTTP 要求。
- 在新視窗中開啟資料夾
在本機環境中啟動
ngrok
應用程式:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
將
NGROK_STATIC_DOMAIN
替換為ngrok
帳戶中的靜態網域。現在所有要求都會重新導向至您的本機環境,以及應用程式使用的通訊埠。圖 4. 執行並重新導向
ngrok
伺服器的終端機。ngrok
應用程式也會在 localhost 上啟動網頁介面,您可以在瀏覽器中開啟介面,以監控所有活動。圖 5. 由
ngrok
應用程式代管的網頁介面,未顯示任何 HTTP 要求。傳送即時訊息來測試 Chat 應用程式:
開啟 Google Chat。
按一下「新對話」圖示
。在對話方塊中輸入 Chat 應用程式名稱。
在搜尋結果中找出您的 Chat 應用程式,然後依序點選「Add」>「Chat」。
在即時訊息聊天室中輸入
Hello
,然後按下enter
鍵。您的 Chat 應用程式正在進行偵錯,因此不會回覆。
在本機環境的
Visual Studio Code
中,可以看到執行作業在已設定的中斷點暫停。圖 6. 執行作業會在您設定的中斷點暫停。
在 Google Chat 逾時應用程式回覆
Your message : Hello
之前,透過偵錯工具繼續執行Visual Studio Code
時。您可從本機環境中
ngrok
應用程式託管的網頁介面查看 HTTP 要求和回應記錄。圖 7. 來自
ngrok
應用程式代管網頁介面的 HTTP 要求。如要變更應用程式行為,請將
Your message
替換為index.json
的Here was your message
內嵌35
。儲存檔案後,nodemon
會自動使用更新後的原始碼重新載入應用程式,Visual Studio Code
也會保持偵錯模式。圖 8. 應用程式正在執行並監聽通訊埠
9000
上的 HTTP 要求,並載入程式碼變更。此時,您可以在本機環境中選取
ngrok
應用程式代管網頁介面上記錄的最後一項 HTTP 要求,然後按一下Replay
,而不必在聊天室中傳送第二則訊息Hello
。與上次相同,Chat 應用程式正在主動偵錯,因此未回覆。從
Visual Studio Code
的偵錯工具繼續執行作業時,您可以從本機環境中的ngrok
應用程式代管網頁介面查看,而應用程式會產生含有Here was your message : Hello
更新後的訊息版本回應。
Python
取得新的使用者憑證,以便用於應用程式預設憑證:
gcloud config set project PROJECT_ID gcloud auth application-default login
將
PROJECT_ID
替換為應用程式 Cloud 專案的專案 ID。將含有應用程式程式碼的
googleworkspace/google-chat-samples
存放區從 GitHub 複製到本機環境: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
的啟動作業,在虛擬環境env
的偵錯模式下,透過通訊埠9000
從模組functions-framework
觸發應用程式:{ "version": "0.2.0", "configurations": [{ "type": "python", "request": "launch", "name": "Debug Watch", "python": "${workspaceFolder}/env/bin/python3", "module": "functions_framework", "args": [ "--target", "hello_chat", "--port", "9000", "--debug" ] }] }
在
main.py
檔案中新增中斷點以暫停處理 HTTP 要求,並透過先前新增的Debug Watch
設定開始執行及偵錯。應用程式現在可以在通訊埠9000
執行並監聽 HTTP 要求。圖 3. 應用程式正在執行,並監聽通訊埠
9000
的 HTTP 要求。
- 在新視窗中開啟資料夾
在本機環境中啟動
ngrok
應用程式:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
將
NGROK_STATIC_DOMAIN
替換為ngrok
帳戶中的靜態網域。現在所有要求都會重新導向至您的本機環境,以及應用程式使用的通訊埠。圖 4. 執行並重新導向
ngrok
伺服器的終端機。ngrok
應用程式也會在 localhost 上啟動網頁介面,您可以在瀏覽器中開啟介面,以監控所有活動。圖 5. 由
ngrok
應用程式代管的網頁介面,未顯示任何 HTTP 要求。傳送即時訊息來測試 Chat 應用程式:
開啟 Google Chat。
按一下「新對話」圖示
。在對話方塊中輸入 Chat 應用程式名稱。
在搜尋結果中找出您的 Chat 應用程式,然後依序點選「Add」>「Chat」。
在即時訊息聊天室中輸入
Hey!
,然後按下enter
鍵。您的 Chat 應用程式正在進行偵錯,因此不會回覆。
在本機環境的
Visual Studio Code
中,可以看到執行作業在已設定的中斷點暫停。圖 6. 執行作業會在您設定的中斷點暫停。
如果您在 Google Chat 從偵錯工具繼續執行
Visual Studio Code
之前,又在訊息中回覆您的名稱和顯示圖片,就會逾時該 Chat 應用程式。您可從本機環境中
ngrok
應用程式託管的網頁介面查看 HTTP 要求和回應記錄。圖 7. 來自
ngrok
應用程式代管網頁介面的 HTTP 要求。如要變更應用程式行為,請將
Hello
替換為main.py
檔案的Hey
內嵌51
。儲存檔案時,Visual Studio Code
會自動使用更新後的原始碼重新載入應用程式,並保持偵錯模式。圖 8. 應用程式正在執行並監聽通訊埠
9000
上的 HTTP 要求,並載入程式碼變更。此時,您可以在本機環境中選取
ngrok
應用程式代管網頁介面上記錄的最後一項 HTTP 要求,然後按一下Replay
,而不必在聊天室中傳送第二則訊息Hey!
。與上次相同,Chat 應用程式正在主動偵錯,因此沒有回覆。從
Visual Studio Code
的偵錯工具繼續執行作業時,您可以從本機環境中ngrok
應用程式代管的網頁介面查看應用程式,而應用程式會產生含有更新後的訊息版本的回應。
Java
取得新的使用者憑證,以便用於應用程式預設憑證:
gcloud config set project PROJECT_ID gcloud auth application-default login
將
PROJECT_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
。 在
pom.xml
檔案中新增 Cloud Functions Framework 建構外掛程式function-maven-plugin
,以設定 Maven 專案在本機通訊埠9000
上執行應用程式HelloChat
:... <plugin> <groupId>com.google.cloud.functions</groupId> <artifactId>function-maven-plugin</artifactId> <version>0.11.0</version> <configuration> <functionTarget>HelloChat</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 }] }
在
HelloChat.java
檔案中新增中斷點,可暫停處理 HTTP 要求,並透過先前新增的Remote Debug Watch
設定開始附加及偵錯。應用程式目前正在執行,並監聽通訊埠9000
的 HTTP 要求。圖 3:他的應用程式正在執行並監聽通訊埠
9000
的 HTTP 要求。
- 在新視窗中開啟資料夾
在本機環境中啟動
ngrok
應用程式:ngrok http --domain=NGROK_STATIC_DOMAIN 9000
將
NGROK_STATIC_DOMAIN
替換為ngrok
帳戶中的靜態網域。現在所有要求都會重新導向至您的本機環境,以及應用程式使用的通訊埠。圖 4. 執行並重新導向
ngrok
伺服器的終端機。ngrok
應用程式也會在 localhost 上啟動網頁介面,您可以在瀏覽器中開啟介面,以監控所有活動。圖 5. 由
ngrok
應用程式代管的網頁介面,未顯示任何 HTTP 要求。傳送即時訊息來測試 Chat 應用程式:
開啟 Google Chat。
按一下「新對話」圖示
。在對話方塊中輸入 Chat 應用程式名稱。
在搜尋結果中找出您的 Chat 應用程式,然後依序點選「Add」>「Chat」。
在即時訊息聊天室中輸入
Hey!
,然後按下enter
鍵。您的 Chat 應用程式正在進行偵錯,因此不會回覆。
在本機環境的
Visual Studio Code
中,可以看到執行作業在已設定的中斷點暫停。圖 6. 執行作業會在您設定的中斷點暫停。
如果您在 Google Chat 從偵錯工具繼續執行
Visual Studio Code
之前,又在訊息中回覆您的名稱和顯示圖片,就會逾時該 Chat 應用程式。您可從本機環境中
ngrok
應用程式託管的網頁介面查看 HTTP 要求和回應記錄。圖 7. 來自
ngrok
應用程式代管網頁介面的 HTTP 要求。如要變更應用程式行為,請將
Hello
替換為HelloChat.java
檔案的Hey
內嵌55
,然後重新啟動mvnDebug
程序,然後重新啟動Remote Debug Watch
,即可重新附加並重新啟動偵錯。此時,您可以在本機環境中選取
ngrok
應用程式代管網頁介面上記錄的最後一項 HTTP 要求,然後按一下Replay
,而不必在聊天室中傳送第二則訊息Hey!
。與上次相同,Chat 應用程式正在主動偵錯,因此未回覆。從
Visual Studio Code
的偵錯工具繼續執行作業時,您可以從本機環境中ngrok
應用程式代管的網頁介面查看應用程式,而應用程式會產生含有更新後的訊息版本的回應。
遠端環境偵錯
在本節中,您將與在遠端環境中執行的 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 執行下列操作:
- 在新視窗中開啟,開啟應用程式原始碼。
在根目錄中建立
.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 中偵錯。
相關主題
- 瞭解如何enable和查詢錯誤記錄。
- 瞭解如何修正 Google Chat 應用程式錯誤,例如「應用程式無回應」、「Google Chat API 僅適用於 Google Workspace 使用者」或「使用者無法從聊天室中排除」。
- 瞭解如何修正資訊卡錯誤,例如資訊卡訊息、對話方塊或連結預覽未正常顯示或正常運作。