對 Google Chat 應用程式進行偵錯

Google Chat 應用程式開發人員可能需要對程式碼偵錯，以便測試變更或排解複雜問題。偵錯即時通訊應用程式的方法有很多種，視應用程式的架構、功能、應用程式的部署方式和偏好設定而定。

本頁說明如何使用 ngrok 對 HTTP Chat 應用程式偵錯。ngrok 是一個整合式輸入平台，可用來測試本機開發環境。在本指南中，您將在本機環境中測試程式碼變更，並排解遠端環境中的問題。

從本機開發環境偵錯

在本節中，您會與在本機環境中執行的 Chat 應用程式互動。

從本機開發環境偵錯

圖 1 在本機開發環境中偵錯。

研討會

Node.js

Python

Java

必要條件

Node.js

  • 在本機環境中安裝的最新版 node 和 npm。

  • 在本機環境中安裝最新版本的 nodemon。此版本可用於自動重新載入：

    npm install -g nodemon

  • 設定用來傳送訊息的 HTTP Chat 應用程式。您可以按照快速入門指南的事前準備、設定環境，以及將應用程式發布至 Google Chat 部分進行操作。唯一的差別在於，您必須將「App name」(應用程式名稱) 設為 Debug App，並將「App URL」(應用程式網址) 設為 http://example.com 這類的任何項目。

  • 在本機環境中設定可進行偵錯的 IDE。為了方便說明，我們使用本指南中的 Visual Studio Code IDE 和預設的偵錯功能。

  • 已在本機環境中安裝 Git。

  • ngrok 帳戶。

Python

  • 在本機環境中安裝最新版本的 python3。
  • 本機環境中安裝的最新版 pip 和 virtualenv 會分別用於管理 Python 套件和虛擬環境。
  • 設定用來傳送訊息的 HTTP Chat 應用程式。您可以按照快速入門指南的事前準備、設定環境，以及將應用程式發布至 Google Chat 部分進行操作。唯一的差別在於，您必須將「App name」(應用程式名稱) 設為 Debug App，並將「App URL」(應用程式網址) 設為 http://example.com 這類的任何項目。
  • 在本機環境中設定可進行偵錯的 IDE。為了方便說明，我們使用本指南中的 Visual Studio Code IDE 和預設的偵錯功能。
  • 已在本機環境中安裝 Git。
  • ngrok 帳戶。
  • 在本機環境中安裝並初始化的最新版 gcloud。

Java

  • 在本機環境中安裝的 Java SE 11's JDK 最新穩定版本。
  • 在本機環境中安裝的最新版 Apache Maven，可用於管理 Java 專案。
  • 設定用來傳送訊息的 HTTP Chat 應用程式。您可以按照快速入門指南的事前準備、設定環境，以及將應用程式發布至 Google Chat 部分進行操作。唯一的差別在於，您必須將「App name」(應用程式名稱) 設為 Debug App，並將「App URL」(應用程式網址) 設為 http://example.com 這類的任何項目。
  • 在本機環境中設定可進行偵錯的 IDE。為了方便說明，我們使用本指南中的 Visual Studio Code IDE 和預設的偵錯功能。
  • 已在本機環境中安裝 Git。
  • ngrok 帳戶。
  • 在本機環境中安裝並初始化的最新版 gcloud。

公開 localhost 服務

您必須將本機環境連線至網際網路，Chat 應用程式才能存取該環境。ngrok 應用程式可用來將對公開網址的 HTTP 要求重新導向至本機環境。

  1. 使用本機環境的瀏覽器登入 ngrok 帳戶。
  2. 安裝應用程式並在本機環境中設定 authtoken。
  3. 在 ngrok 帳戶中建立靜態網域，本指南的操作說明會稱為 NGROK_STATIC_DOMAIN。

設定 Chat 應用程式

設定 Chat 應用程式，將其所有 HTTP 要求傳送至靜態網域。

  1. 在 Google Cloud 控制台中開啟 Google Chat API 頁面：

    前往「Google Chat API」頁面

  2. 按一下 [設定] 分頁標籤。

  3. 依序前往「Interactive features」 >「Connection settings」，然後將文字欄位「App Url」的值設為：

    https://NGROK_STATIC_DOMAIN

    將 NGROK_STATIC_DOMAIN 替換為 ngrok 帳戶中的靜態網域。

  4. 點按「儲存」。

Chat 應用程式會將所有 HTTP 要求傳送至靜態網域

圖 2. Chat 應用程式會將所有 HTTP 要求傳送至靜態網域。ngrok 公用服務是即時通訊應用程式與在本機執行應用程式程式碼之間的橋樑。

測試 Chat 應用程式

您可以在本機部署、設定、測試、偵錯，以及自動重新載入 Chat 應用程式。

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 要求。

      應用程式正在執行並監聽通訊埠「9000」的 HTTP 要求

      圖 3. 應用程式正在執行並監聽通訊埠 9000 的 HTTP 要求。

  3. 在本機環境中啟動 ngrok 應用程式：

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

    將 NGROK_STATIC_DOMAIN 替換為 ngrok 帳戶中的靜態網域。所有要求現在都會重新導向至您的本機環境，以及應用程式使用的通訊埠。

    具有「ngrok」伺服器執行並重新導向的終端機

    圖 4. ngrok 伺服器的終端機正在運作並重新導向。

  4. ngrok 應用程式也會在本機主機上啟動網頁介面，只要在瀏覽器中開啟介面即可監控所有活動。

    由「ngrok」應用程式託管的網路介面，未顯示任何 HTTP 要求

    圖 5. ngrok 應用程式託管的網頁介面未顯示 HTTP 要求。

  5. 傳送即時訊息來測試 Chat 應用程式：

    • 開啟 Google Chat。

      前往 Google Chat

    • 按一下「發起即時通訊」圖示 。

    • 在對話方塊中輸入 Chat 應用程式名稱。

    • 在搜尋結果中找出您的 Chat 應用程式，然後依序點選「Add」>「Chat」。

    • 在即時訊息聊天室中輸入 Hello，然後按下 enter 鍵。Chat 應用程式正在主動偵錯，因此沒有回覆。

  6. 在本機環境的 Visual Studio Code 中，您可以看到執行作業已在設定的中斷點暫停。

    系統會在您設定的中斷點暫停執行程序

    圖 6. 系統會在設定的中斷點暫停執行程序。

  7. 您在 Google Chat 逾時前，從 Visual Studio Code 偵錯工具繼續執行時。Your message : Hello

  8. 您可以在本機環境中的 ngrok 應用程式託管的網頁介面上查看 HTTP 要求和回應記錄。

    來自「ngrok」應用程式託管的網頁介面的 HTTP 要求

    圖 7. 來自 ngrok 應用程式託管的網頁介面的 HTTP 要求。

  9. 如要變更應用程式行為，請將 Your message 替換為 index.json 的 Here was your message 內嵌 35。當您儲存檔案時，nodemon 會自動使用更新過的原始碼重新載入應用程式，而 Visual Studio Code 會保持偵錯模式。

    應用程式正在執行並監聽位於通訊埠「9000」並載入程式碼變更的 HTTP 要求

    圖 8. 應用程式正在執行並監聽來自通訊埠 9000 且載入程式碼變更的 HTTP 要求。

  10. 這次不需要在空間中傳送第二則訊息 Hello，您可以選取在本機環境中由 ngrok 應用程式託管的網頁介面記錄的 HTTP 要求，然後按一下 Replay。與上次相同，Chat 應用程式正在主動偵錯，因此不會回覆。

  11. 透過 Visual Studio Code 偵錯工具繼續執行時，您可以看到本機環境中的 ngrok 應用程式託管的網頁介面，而應用程式會產生含有更新後的訊息 Here was your message : Hello 回應。

Python

  1. 取得新的使用者憑證，以便用於應用程式預設憑證：

    gcloud config set project PROJECT_ID
gcloud auth application-default login

    將 PROJECT_ID 替換為應用程式 Cloud 專案的專案 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 的偵錯模式中，從通訊埠 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"
        ]
    }]
}

    5. 新增中斷點，在 main.py 檔案中暫停處理 HTTP 要求，然後透過先前新增的 Debug Watch 設定開始執行和偵錯。應用程式現在會執行並監聽通訊埠 9000 的 HTTP 要求。

      應用程式正在執行並監聽通訊埠「9000」的 HTTP 要求

      圖 3. 應用程式正在執行並監聽通訊埠 9000 的 HTTP 要求。

  4. 在本機環境中啟動 ngrok 應用程式：

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

    將 NGROK_STATIC_DOMAIN 替換為 ngrok 帳戶中的靜態網域。所有要求現在都會重新導向至您的本機環境，以及應用程式使用的通訊埠。

    具有「ngrok」伺服器執行並重新導向的終端機

    圖 4. ngrok 伺服器的終端機正在運作並重新導向。

  5. ngrok 應用程式也會在本機主機上啟動網頁介面，只要在瀏覽器中開啟介面即可監控所有活動。

    由「ngrok」應用程式託管的網路介面，未顯示任何 HTTP 要求

    圖 5. ngrok 應用程式託管的網頁介面未顯示 HTTP 要求。

  6. 傳送即時訊息來測試 Chat 應用程式：

    • 開啟 Google Chat。

      前往 Google Chat

    • 按一下「發起即時通訊」圖示 。

    • 在對話方塊中輸入 Chat 應用程式名稱。

    • 在搜尋結果中找出您的 Chat 應用程式，然後依序點選「Add」>「Chat」。

    • 在即時訊息聊天室中輸入 Hey!，然後按下 enter 鍵。Chat 應用程式正在主動偵錯，因此沒有回覆。

  7. 在本機環境的 Visual Studio Code 中，您可以看到執行作業已在設定的中斷點暫停。

    系統會在您設定的中斷點暫停執行程序

    圖 6. 系統會在設定的中斷點暫停執行程序。

  8. 如果您是在 Visual Studio Code 的偵錯工具中繼續執行執行作業，Google Chat 會在訊息中將即時通訊應用程式因您的名稱和顯示圖片逾時而逾時。

  9. 您可以在本機環境中的 ngrok 應用程式託管的網頁介面上查看 HTTP 要求和回應記錄。

    來自「ngrok」應用程式託管的網頁介面的 HTTP 要求

    圖 7. 來自 ngrok 應用程式託管的網頁介面的 HTTP 要求。

  10. 如要變更應用程式行為，請將 Hello 替換為 main.py 檔案的 Hey 內嵌 51。儲存檔案時，Visual Studio Code 會自動使用更新後的原始碼重新載入應用程式，並保持處於偵錯模式。

    應用程式正在執行並監聽位於通訊埠「9000」並載入程式碼變更的 HTTP 要求

    圖 8. 應用程式正在執行並監聽來自通訊埠 9000 且載入程式碼變更的 HTTP 要求。

  11. 這次不需要在空間中傳送第二則訊息 Hey!，您可以選取在本機環境中由 ngrok 應用程式託管的網頁介面記錄的 HTTP 要求，然後按一下 Replay。與上次相同，Chat 應用程式正在主動偵錯，因此不會回覆。

  12. 從 Visual Studio Code 偵錯工具繼續執行時，您可以看到本機環境中的 ngrok 應用程式託管的網頁介面，而應用程式會產生包含更新後的訊息版本回應。

Java

  1. 取得新的使用者憑證，以便用於應用程式預設憑證：

    gcloud config set project PROJECT_ID
gcloud auth application-default login

    將 PROJECT_ID 替換為應用程式 Cloud 專案的專案 ID。

  2. 從本機環境中的 GitHub 複製 googleworkspace/google-chat-samples 存放區，其中包含應用程式程式碼：

    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 檔案中新增 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>
...

    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. 新增中斷點，在 HelloChat.java 檔案中暫停處理 HTTP 要求，然後透過先前新增的 Remote Debug Watch 設定開始附加和偵錯。應用程式現在會執行並監聽通訊埠 9000 的 HTTP 要求。

      應用程式正在執行並監聽通訊埠「9000」的 HTTP 要求

      圖 3：他的應用程式正在執行並監聽通訊埠 9000 上的 HTTP 要求。

  4. 在本機環境中啟動 ngrok 應用程式：

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

    將 NGROK_STATIC_DOMAIN 替換為 ngrok 帳戶中的靜態網域。所有要求現在都會重新導向至您的本機環境，以及應用程式使用的通訊埠。

    具有「ngrok」伺服器執行並重新導向的終端機

    圖 4. ngrok 伺服器的終端機正在運作並重新導向。

  5. ngrok 應用程式也會在本機主機上啟動網頁介面，只要在瀏覽器中開啟介面即可監控所有活動。

    由「ngrok」應用程式託管的網路介面，未顯示任何 HTTP 要求

    圖 5. ngrok 應用程式託管的網頁介面未顯示 HTTP 要求。

  6. 傳送即時訊息來測試 Chat 應用程式：

    • 開啟 Google Chat。

      前往 Google Chat

    • 按一下「發起即時通訊」圖示 。

    • 在對話方塊中輸入 Chat 應用程式名稱。

    • 在搜尋結果中找出您的 Chat 應用程式，然後依序點選「Add」>「Chat」。

    • 在即時訊息聊天室中輸入 Hey!，然後按下 enter 鍵。Chat 應用程式正在主動偵錯，因此沒有回覆。

  7. 在本機環境的 Visual Studio Code 中，您可以看到執行作業已在設定的中斷點暫停。

    系統會在您設定的中斷點暫停執行程序

    圖 6. 系統會在設定的中斷點暫停執行程序。

  8. 如果您是在 Visual Studio Code 的偵錯工具中繼續執行執行作業，Google Chat 會在訊息中將即時通訊應用程式因您的名稱和顯示圖片逾時而逾時。

  9. 您可以在本機環境中的 ngrok 應用程式託管的網頁介面上查看 HTTP 要求和回應記錄。

    來自「ngrok」應用程式託管的網頁介面的 HTTP 要求

    圖 7. 來自 ngrok 應用程式託管的網頁介面的 HTTP 要求。

  10. 如要變更應用程式行為，請將 HelloChat.java 檔案的 Hey 內嵌 55 取代 Hello，然後重新啟動 mvnDebug 程序，然後重新啟動 Remote Debug Watch 以重新附加並重新啟動偵錯。

  11. 這次不需要在空間中傳送第二則訊息 Hey!，您可以選取在本機環境中由 ngrok 應用程式託管的網頁介面記錄的 HTTP 要求，然後按一下 Replay。與上次相同，Chat 應用程式正在主動偵錯，因此不會回覆。

  12. 從 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，執行下列操作：

  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 中主動偵錯，因此沒有回覆。