對 Google Chat 應用程式進行偵錯

身為 Google Chat 應用程式開發人員，您可能需要對程式碼偵錯，以測試變更內容或排解各種複雜問題。您可以根據應用程式的架構、應用程式功能、應用程式的部署方式和偏好設定，以多種方式為 Chat 擴充應用程式偵錯。

本頁面說明如何使用 ngrok 偵錯 HTTP Chat 應用程式。ngrok 是一個統一的輸入平台，可用於測試本機開發環境。本指南的內容涵蓋在本機環境測試程式碼變更，以及在遠端環境排解問題。

注意： 如果 Chat 應用程式是使用 Google Apps Script 建構，請改用以下指令碼：

• 測試部署作業
• 使用偵錯工具和中斷點

從本機開發環境進行偵錯

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

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

研討會

Node.js

Python

Java

必要條件

Node.js

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

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

  npm install -g nodemon

• 專為訊息設定的 HTTP Chat 應用程式您可以按照快速入門指南中的「前置條件」、「設定環境」和「將應用程式發布至 Google 即時通訊」部分的說明進行操作。唯一的差異是，您需要將應用程式名稱設為 Debug App，並將HTTP 端點網址設為 http://example.com 等任意值。

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

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

• ngrok 帳戶。

Python

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

Java

• 在本機環境中安裝的 Java SE 11's JDK 最新穩定版。
• 在本機環境中安裝的最新版 Apache Maven，用於管理 Java 專案。
• 已針對訊息功能進行設定的 HTTP Chat 應用程式。您可以按照前置條件、設定環境和將應用程式發布至 Google 聊天等快速入門指南中的章節操作。唯一的差別在於，您必須將「應用程式名稱」設為 Debug App，並將「HTTP 端點網址」設為任何項目 (例如 http://example.com)。
• 在本機環境中設定且可進行偵錯的 IDE。為方便說明，本指南會使用 Visual Studio Code IDE 及其預設的偵錯功能。
• Git 已在本機環境中安裝。
• ngrok 帳戶。
• 在您的本機環境中安裝並初始化最新版 gcloud。

公開本機服務

您需要將本機環境連上網際網路，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. 依序前往「互動功能」 >「連線設定」，然後將「HTTP 端點網址」文字欄位的值設為：

   https://NGROK_STATIC_DOMAIN
   

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

4. 按一下 [儲存]。

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

測試 Chat 應用程式

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

注意： Chat 應用程式會在 Python 和 Java 範例中使用 Cloud Functions 架構執行，並在 Node.js 範例中使用 Express 架構執行。

Node.js

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

   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 上啟動網頁介面，您可以在瀏覽器中開啟介面，以監控所有活動。

   

   圖 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 的偵錯工具繼續執行時，Chat 應用程式會回覆 Your message : Hello。

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

   

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

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

   

   圖 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", "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 上啟動網頁介面，您可以在瀏覽器中開啟介面，以監控所有活動。

   

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

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

   • 開啟 Google Chat。

     前往 Google Chat

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

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

   • 在搜尋結果中找出「Chat」應用程式，然後依序按一下「新增」。

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

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

   

   圖 6. 執行作業會在中斷點暫停。

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

9. 您可以在本機環境中，透過 ngrok 應用程式代管的網路介面查看 HTTP 要求和回應記錄。

   

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

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

    

    圖 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 專案，在本機上執行應用程式 App：9000

      ...
      <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 上啟動網頁介面，您可以在瀏覽器中開啟介面，以監控所有活動。

   

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

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

   • 開啟 Google Chat。

     前往 Google Chat

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

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

   • 在搜尋結果中找出「Chat」應用程式，然後依序按一下「新增」。

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

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

   

   圖 6. 執行作業會在中斷點暫停。

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

9. 您可以在本機環境中，透過 ngrok 應用程式代管的網路介面查看 HTTP 要求和回應記錄。

   

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

10. 如要變更應用程式行為，請在 App.java 檔案的內嵌 55 中，將 Hello 替換為 Hey，重新啟動 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 中偵錯。

相關主題

• 瞭解如何啟用和查詢錯誤記錄檔。
• 瞭解如何修正 Google Chat 應用程式錯誤，例如「應用程式未回應」、「Google Chat API 僅適用於 Google Workspace 使用者」或「使用者可從聊天室中排除」。
• 瞭解如何修正資訊卡錯誤，例如資訊卡訊息、對話方塊或連結預覽畫面無法顯示或無法正常運作。