對 Google Chat 應用程式進行偵錯

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 要求重新導向至您的本機環境。

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

設定 Chat 應用程式

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

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

    前往 Google Chat API 頁面

  2. 點選「設定」分頁標籤。

  3. 依序前往「互動功能」 >「連線設定」，並將「應用程式網址」文字欄位的值設為：

    https://NGROK_STATIC_DOMAIN

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

  4. 按一下「儲存」。

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

圖 2. Chat 應用程式會將所有 HTTP 要求 傳送至靜態網域ngrok 公開服務可做為 Chat 應用程式與本機執行應用程式程式碼之間的橋樑。

測試 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 應用程式也會在 localhost 上啟動網頁介面，您可以在瀏覽器中開啟介面，以監控所有活動。

    由「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 逾時應用程式回覆 Your message : Hello 之前，透過偵錯工具繼續執行 Visual Studio Code 時。

  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. 此時，您可以在本機環境中選取 ngrok 應用程式代管網頁介面上記錄的最後一項 HTTP 要求，然後按一下 Replay，而不必在聊天室中傳送第二則訊息 Hello。與上次相同，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 應用程式也會在 localhost 上啟動網頁介面，您可以在瀏覽器中開啟介面，以監控所有活動。

    由「ngrok」應用程式代管的網頁介面，顯示沒有 HTTP 要求

    圖 5. 由 ngrok 應用程式代管的網頁介面，未顯示任何 HTTP 要求。

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

    • 開啟 Google Chat。

      前往 Google Chat

    • 按一下「新對話」圖示 。

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

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

    • 在即時訊息聊天室中輸入 Hey!，然後按下 enter 鍵。您的 Chat 應用程式正在進行偵錯，因此不會回覆。

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

    執行作業會在已設定的中斷點暫停

    圖 6. 執行作業會在您設定的中斷點暫停。

  8. 如果您在 Google Chat 從偵錯工具繼續執行 Visual Studio Code 之前，又在訊息中回覆您的名稱和顯示圖片，就會逾時該 Chat 應用程式。

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

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

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

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

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

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

  11. 此時，您可以在本機環境中選取 ngrok 應用程式代管網頁介面上記錄的最後一項 HTTP 要求，然後按一下 Replay，而不必在聊天室中傳送第二則訊息 Hey!。與上次相同，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 應用程式也會在 localhost 上啟動網頁介面，您可以在瀏覽器中開啟介面，以監控所有活動。

    由「ngrok」應用程式代管的網頁介面，顯示沒有 HTTP 要求

    圖 5. 由 ngrok 應用程式代管的網頁介面，未顯示任何 HTTP 要求。

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

    • 開啟 Google Chat。

      前往 Google Chat

    • 按一下「新對話」圖示 。

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

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

    • 在即時訊息聊天室中輸入 Hey!，然後按下 enter 鍵。您的 Chat 應用程式正在進行偵錯，因此不會回覆。

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

    執行作業會在已設定的中斷點暫停

    圖 6. 執行作業會在您設定的中斷點暫停。

  8. 如果您在 Google Chat 從偵錯工具繼續執行 Visual Studio Code 之前，又在訊息中回覆您的名稱和顯示圖片，就會逾時該 Chat 應用程式。

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

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

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

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

  11. 此時，您可以在本機環境中選取 ngrok 應用程式代管網頁介面上記錄的最後一項 HTTP 要求，然後按一下 Replay，而不必在聊天室中傳送第二則訊息 Hey!。與上次相同，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 中偵錯。