對 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。

公開提供 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. 依序前往「互動功能」 >「連線設定」，然後將「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 應用程式也會在本機上啟動網路介面，您可以在瀏覽器中開啟該介面，監控所有活動。

   

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

5. 請傳送直接訊息來測試 Chat 應用程式：

   • 開啟 Google Chat。

     前往 Google Chat

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

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

   • 在搜尋結果中找出「Chat」應用程式，然後依序點選「新增」「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. 這次您不需要在聊天室中傳送第二則訊息 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 的偵錯模式中，從模組 functions-framework 上的埠 9000 觸發應用程式：

      {
          "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 應用程式也會在本機上啟動網路介面，您可以在瀏覽器中開啟該介面，監控所有活動。

   

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

6. 請傳送直接訊息來測試 Chat 應用程式：

   • 開啟 Google Chat。

     前往 Google Chat

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

   • 在對話方塊中輸入 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 應用程式也會在本機上啟動網路介面，您可以在瀏覽器中開啟該介面，監控所有活動。

   

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

6. 請傳送直接訊息來測試 Chat 應用程式：

   • 開啟 Google Chat。

     前往 Google Chat

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

   • 在對話方塊中輸入 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 使用者」或「使用者可從聊天室中排除」。
• 瞭解如何修正資訊卡錯誤，例如資訊卡訊息、對話方塊或連結預覽畫面無法正常顯示或運作。