對 Google Chat 應用程式進行偵錯

Google Chat 應用程式開發人員可能需要對程式碼進行偵錯 測試變更或解決複雜問題對 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://example.com 這類任何網址。

• 在本機環境中設定且可進行偵錯的 IDE。我們會使用 Visual Studio Code IDE 及其預設值 中的偵錯功能 本指南。

• Git 已安裝 本機環境。

• ngrok 帳戶。

Python

• 最新版 python3 已安裝 本機環境。
• 最新版本的 pip 和 virtualenv 用於管理 Python 套件和虛擬環境 環境。
• 這裡設定的 HTTP Chat 應用程式 傳送訊息您可以按照這些 必要條件 設定 環境 並將應用程式發布到 Google 即時通訊 快速入門指南。只有 不同之處在於您需要將「應用程式名稱」設為 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 即時通訊 快速入門指南。只有 不同之處在於您需要將「應用程式名稱」設為 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. 前往「互動功能」>，然後設定適當的值 「App Url」欄位執行以下動作：

   https://NGROK_STATIC_DOMAIN
   

   將 NGROK_STATIC_DOMAIN 替換為以下位置的靜態網域： 您的 ngrok 帳戶。

4. 按一下 [儲存]。

圖 2. Chat 應用程式會傳送所有 HTTP 要求 並變更為靜態網域ngrok 公共服務在 即時通訊應用程式和執行的應用程式程式碼 本機儲存空間

測試 Chat 應用程式

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

注意： Chat 應用程式會透過 Cloud Functions 執行 「架構」 Python、Java 以及 Express 的範例 Node.js 範例中的架構。

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. 建立名為 Debug Watch 的啟動作業並設定觸發條件 debug-watch 指令碼，方法是在.vscode/launch.json 從根目錄進行：

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "node",
              "request": "launch",
              "name": "Debug Watch",
              "cwd": "${workspaceRoot}",
              "runtimeExecutable": "npm",
              "runtimeArgs": ["run-script", "debug-watch"]
          }]
      }
      

   5. 加入中斷點，在 index.js 檔案，然後開始執行 偵錯 已新增 Debug Watch 項設定。應用程式現已 通訊埠 9000 來執行及監聽 HTTP 要求。

      

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

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

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

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

   

   圖 4. 執行並重新導向 ngrok 伺服器的終端機。

4. ngrok 也會在您的 localhost 上啟動網頁介面 應用程式，只要在瀏覽器中開啟應用程式，就能監控所有活動。

   

   圖 5. 由 ngrok 應用程式代管的網頁介面 但沒有 HTTP 要求

5. 傳送直接傳送的 Chat 應用程式，藉此測試 Chat 應用程式 訊息：

   • 開啟 Google Chat。

     前往 Google Chat

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

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

   • 在搜尋結果中找出 Chat 應用程式。 按一下「新增」圖示 >。 即時通訊。

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

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

   

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

7. 透過 Visual Studio Code 的偵錯工具繼續執行時 避免 Google Chat 逾時 Chat 應用程式 回覆 Your message : Hello。

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

   

   圖 7. 由 ngrok 應用程式。

9. 如要變更應用程式行為，請將 Your message 替換成 Here was your message 內嵌 35 的 index.json。儲存設定 這個檔案，nodemon 會使用 更新後的原始碼，Visual Studio Code 則會維持在偵錯模式。

   

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

10. 這次，你不必在聊天室中傳送第二則訊息「Hello」， 這個外掛程式能選取系統記錄到的最後一個 HTTP 要求 本機環境的 ngrok 應用程式，然後按一下 Replay。 與上次相同，Chat 應用程式沒有回覆 因為我們正在主動偵錯

11. 透過 Visual Studio Code 的偵錯工具繼續執行時 您可以從 ngrok 應用程式託管的網頁介面查看 應用程式產生回應的本機環境 「Here was your message : Hello」訊息的更新版本。

Python

1. 取得新的使用者憑證以用於 Application Default 憑證：

   gcloud config set project PROJECT_ID
   gcloud auth application-default login
   

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

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/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 的啟動作業，觸發應用程式的作業 來自偵錯模式通訊埠 9000 的 functions-framework 模組 部署於虛擬環境 env：

      {
          "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 檔案，然後開始執行 偵錯 已新增 Debug Watch 項設定。應用程式現已 通訊埠 9000 來執行及監聽 HTTP 要求。

      

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

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

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

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

   

   圖 4. 執行並重新導向 ngrok 伺服器的終端機。

5. ngrok 也會在您的 localhost 上啟動網頁介面 應用程式，只要在瀏覽器中開啟應用程式，就能監控所有活動。

   

   圖 5. 由 ngrok 應用程式代管的網頁介面 但沒有 HTTP 要求

6. 傳送直接傳送的 Chat 應用程式，藉此測試 Chat 應用程式 訊息：

   • 開啟 Google Chat。

     前往 Google Chat

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

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

   • 在搜尋結果中找出 Chat 應用程式。 按一下「新增」圖示 >。 即時通訊。

   • 在即時訊息聊天室中輸入 Hey!，然後按下 enter 鍵。您的 即時通訊應用程式處於以下狀態，因此無法回覆 主動偵錯。

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

   

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

8. 透過 Visual Studio Code 的偵錯工具繼續執行時 避免 Google Chat 逾時 Chat 應用程式 回覆訊息時，會附上你的名稱和顯示圖片。

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

   

   圖 7. 由 ngrok 應用程式。

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

    

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

11. 這次，你不必在聊天室中傳送第二則訊息「Hey!」， 這個外掛程式能選取系統記錄到的最後一個 HTTP 要求 本機環境的 ngrok 應用程式，然後按一下 Replay。 與上次相同，Chat 應用程式沒有回覆 因為我們正在主動偵錯

12. 透過 Visual Studio Code 的偵錯工具繼續執行時 您可以從 ngrok 應用程式託管的網頁介面查看 應用程式產生回應的本機環境 更新後的訊息

Java

1. 取得新的使用者憑證以用於 Application Default 憑證：

   gcloud config set project PROJECT_ID
   gcloud auth application-default login
   

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

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. 設定 Maven 專案，以便執行應用程式 App 新增 Cloud Functions Framework 版本，以在本機通訊埠 9000 pom.xml 檔案中的 function-maven-plugin 外掛程式：

      ...
      <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 檔案，即可開始附加和 偵錯 已新增 Remote Debug Watch 項設定。申請 現在會在通訊埠 9000 上執行並監聽 HTTP 要求。

      

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

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

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

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

   

   圖 4. 執行並重新導向 ngrok 伺服器的終端機。

5. ngrok 也會在您的 localhost 上啟動網頁介面 應用程式，只要在瀏覽器中開啟應用程式，就能監控所有活動。

   

   圖 5. 由 ngrok 應用程式代管的網頁介面 但沒有 HTTP 要求

6. 傳送直接傳送的 Chat 應用程式，藉此測試 Chat 應用程式 訊息：

   • 開啟 Google Chat。

     前往 Google Chat

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

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

   • 在搜尋結果中找出 Chat 應用程式。 按一下「新增」圖示 >。 即時通訊。

   • 在即時訊息聊天室中輸入 Hey!，然後按下 enter 鍵。您的 即時通訊應用程式處於以下狀態，因此無法回覆 主動偵錯。

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

   

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

8. 透過 Visual Studio Code 的偵錯工具繼續執行時 避免 Google Chat 逾時 Chat 應用程式 回覆訊息時，會附上你的名稱和顯示圖片。

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

   

   圖 7. 由 ngrok 應用程式。

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

11. 這次，你不必在聊天室中傳送第二則訊息「Hey!」， 這個外掛程式能選取系統記錄到的最後一個 HTTP 要求 本機環境的 ngrok 應用程式，然後按一下 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 鍵。您的 即時通訊應用程式正在運作，因此沒有回覆 偵錯 在 Visual Studio Code IDE 中執行。

相關主題

• 瞭解如何啟用並 query 錯誤記錄。
• 瞭解如何修正 Google Chat 應用程式問題 錯誤，例如「應用程式無回應」、「Google Chat API」 僅適用於 Google Workspace 使用者」或「可以排除使用者 。」
• 瞭解如何修正卡片錯誤 (例如資訊卡訊息)。 或連結預覽未正常顯示或正常運作。