本頁面由 Cloud Translation API 翻譯而成。

對 Google Chat 應用程式進行偵錯

Google Chat 應用程式開發人員可能需要對程式碼進行偵錯測試變更或解決複雜問題對 Chat 擴充應用程式進行偵錯視應用程式的架構而定應用程式部署方式、應用程式的部署方式以及您的偏好設定。

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

從本機開發環境偵錯

在這個部分中，您將與符合下列條件的 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 要求重新導向至您的本機環境。

使用本機環境的瀏覽器登入 ngrok 帳戶。
在本機安裝應用程式並設定 authtoken 環境。
在以下項目中建立靜態網域： ngrok 帳戶，但識別為 NGROK_STATIC_DOMAIN 。

設定 Chat 應用程式

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

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

前往 Google Chat API 頁面
點選「設定」分頁標籤。
前往「互動功能」>，然後設定適當的值「App Url」欄位執行以下動作：
```
https://NGROK_STATIC_DOMAIN
```
將 NGROK_STATIC_DOMAIN 替換為以下位置的靜態網域：您的 ngrok 帳戶。
按一下 [儲存]。

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

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

測試 Chat 應用程式

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

Node.js

從 GitHub 複製 googleworkspace/google-chat-samples 存放區，其中包含應用程式的程式碼執行：
```
git clone https://github.com/googleworkspace/google-chat-samples.git
```
透過安裝在本機環境中的 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 發出的要求。
在本機環境中啟動 ngrok 應用程式：
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
將 NGROK_STATIC_DOMAIN 替換為以下位置的靜態網域：您的 ngrok 帳戶。現在所有要求都會重新導向至您的本機以及應用程式使用的通訊埠

圖 4. 執行並重新導向 ngrok 伺服器的終端機。
ngrok 也會在您的 localhost 上啟動網頁介面應用程式，只要在瀏覽器中開啟應用程式，就能監控所有活動。

圖 5. 由 ngrok 應用程式代管的網頁介面但沒有 HTTP 要求
傳送直接傳送的 Chat 應用程式，藉此測試 Chat 應用程式訊息：
- 開啟 Google Chat。
  
  前往 Google Chat
- 按一下「新對話」圖示。
- 請在對話方塊中輸入 Chat 應用程式。
- 在搜尋結果中找出 Chat 應用程式。按一下「新增」圖示 >。 即時通訊。
- 在即時訊息聊天室中輸入 Hello，然後按下 enter 鍵。您的 Chat 應用程式處於以下狀態，因此沒有回覆主動偵錯。
您可以在本機環境的 Visual Studio Code 中，看到執行作業就會在您設定的中斷點暫停。

圖 6. 執行作業會在您設定的中斷點暫停。
透過 Visual Studio Code 的偵錯工具繼續執行時避免 Google Chat 逾時 Chat 應用程式回覆 Your message : Hello。
您可以從網頁介面查看 HTTP 要求與回應記錄由本機環境中的 ngrok 應用程式代管。

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

圖 8. 應用程式正在執行並監聽 HTTP 要求程式碼變更已載入 9000 通訊埠。
這次，你不必在聊天室中傳送第二則訊息「Hello」，這個外掛程式能選取系統記錄到的最後一個 HTTP 要求本機環境的 ngrok 應用程式，然後按一下 Replay。與上次相同，Chat 應用程式沒有回覆因為我們正在主動偵錯
透過 Visual Studio Code 的偵錯工具繼續執行時您可以從 ngrok 應用程式託管的網頁介面查看應用程式產生回應的本機環境「Here was your message : Hello」訊息的更新版本。

Python

取得新的使用者憑證以用於 Application Default 憑證：
```
gcloud config set project PROJECT_ID
gcloud auth application-default login
```
將 PROJECT_ID 替換為專案 ID 應用程式的 Cloud 專案
從 GitHub 複製 googleworkspace/google-chat-samples 存放區在本機環境中執行，則含有應用程式程式碼：
```
git clone https://github.com/googleworkspace/google-chat-samples.git
```
透過安裝在本機環境中的 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", "hello_chat",
            "--port", "9000",
            "--debug"
        ]
    }]
}
```
5. 加入中斷點，在 main.py 檔案，然後開始執行偵錯已新增 Debug Watch 項設定。應用程式現已通訊埠 9000 來執行及監聽 HTTP 要求。
  
  圖 3. 應用程式正在執行並監聽 HTTP 向通訊埠 9000 發出的要求。
在本機環境中啟動 ngrok 應用程式：
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
將 NGROK_STATIC_DOMAIN 替換為以下位置的靜態網域：您的 ngrok 帳戶。現在所有要求都會重新導向至您的本機以及應用程式使用的通訊埠

圖 4. 執行並重新導向 ngrok 伺服器的終端機。
ngrok 也會在您的 localhost 上啟動網頁介面應用程式，只要在瀏覽器中開啟應用程式，就能監控所有活動。

圖 5. 由 ngrok 應用程式代管的網頁介面但沒有 HTTP 要求
傳送直接傳送的 Chat 應用程式，藉此測試 Chat 應用程式訊息：
- 開啟 Google Chat。
  
  前往 Google Chat
- 按一下「新對話」圖示。
- 請在對話方塊中輸入 Chat 應用程式。
- 在搜尋結果中找出 Chat 應用程式。按一下「新增」圖示 >。 即時通訊。
- 在即時訊息聊天室中輸入 Hey!，然後按下 enter 鍵。您的即時通訊應用程式處於以下狀態，因此無法回覆主動偵錯。
您可以在本機環境的 Visual Studio Code 中，看到執行作業就會在您設定的中斷點暫停。

圖 6. 執行作業會在您設定的中斷點暫停。
透過 Visual Studio Code 的偵錯工具繼續執行時避免 Google Chat 逾時 Chat 應用程式回覆訊息時，會附上你的名稱和顯示圖片。
您可以從網頁介面查看 HTTP 要求與回應記錄由本機環境中的 ngrok 應用程式代管。

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

圖 8. 應用程式正在執行並監聽 HTTP 要求程式碼變更已載入 9000 通訊埠。
這次，你不必在聊天室中傳送第二則訊息「Hey!」，這個外掛程式能選取系統記錄到的最後一個 HTTP 要求本機環境的 ngrok 應用程式，然後按一下 Replay。與上次相同，Chat 應用程式沒有回覆因為我們正在主動偵錯
透過 Visual Studio Code 的偵錯工具繼續執行時您可以從 ngrok 應用程式託管的網頁介面查看應用程式產生回應的本機環境更新後的訊息

Java

取得新的使用者憑證以用於 Application Default 憑證：
```
gcloud config set project PROJECT_ID
gcloud auth application-default login
```
將 PROJECT_ID 替換為專案 ID 應用程式的 Cloud 專案
從 GitHub 複製 googleworkspace/google-chat-samples 存放區在本機環境中，則含有應用程式程式碼：
```
git clone https://github.com/googleworkspace/google-chat-samples.git
```
透過安裝在本機環境中的 Visual Studio Code IDE。：
1. 在新視窗中開啟資料夾 google-chat-samples/java/avatar-app。
2. 設定 Maven 專案，以便執行應用程式 HelloChat 新增 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>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 檔案，即可開始附加和偵錯已新增 Remote Debug Watch 項設定。申請現在會在通訊埠 9000 上執行並監聽 HTTP 要求。
  
  圖 3：應用程式正在執行並監聽 HTTP 向通訊埠 9000 發出的要求。
在本機環境中啟動 ngrok 應用程式：
```
ngrok http --domain=NGROK_STATIC_DOMAIN 9000
```
將 NGROK_STATIC_DOMAIN 替換為以下位置的靜態網域：您的 ngrok 帳戶。現在所有要求都會重新導向至您的本機以及應用程式使用的通訊埠

圖 4. 執行並重新導向 ngrok 伺服器的終端機。
ngrok 也會在您的 localhost 上啟動網頁介面應用程式，只要在瀏覽器中開啟應用程式，就能監控所有活動。

圖 5. 由 ngrok 應用程式代管的網頁介面但沒有 HTTP 要求
傳送直接傳送的 Chat 應用程式，藉此測試 Chat 應用程式訊息：
- 開啟 Google Chat。
  
  前往 Google Chat
- 按一下「新對話」圖示。
- 請在對話方塊中輸入 Chat 應用程式。
- 在搜尋結果中找出 Chat 應用程式。按一下「新增」圖示 >。 即時通訊。
- 在即時訊息聊天室中輸入 Hey!，然後按下 enter 鍵。您的即時通訊應用程式處於以下狀態，因此無法回覆主動偵錯。
您可以在本機環境的 Visual Studio Code 中，看到執行作業就會在您設定的中斷點暫停。

圖 6. 執行作業會在您設定的中斷點暫停。
透過 Visual Studio Code 的偵錯工具繼續執行時避免 Google Chat 逾時 Chat 應用程式回覆訊息時，會附上你的名稱和顯示圖片。
您可以從網頁介面查看 HTTP 要求與回應記錄由本機環境中的 ngrok 應用程式代管。

圖 7. 由 ngrok 應用程式。
如要變更應用程式行為，請將 Hello 替換為內嵌 Hey HelloChat.java 檔案的 55，重新啟動 mvnDebug 程序，然後重新啟動 Remote Debug Watch 以重新連接並重新啟動偵錯。
這次，你不必在聊天室中傳送第二則訊息「Hey!」，這個外掛程式能選取系統記錄到的最後一個 HTTP 要求本機環境的 ngrok 應用程式，然後按一下 Replay。與上次相同，Chat 應用程式沒有回覆因為我們正在主動偵錯
透過 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，執行以下動作：包括：

在新視窗中開啟，開啟應用程式原始碼。

在根目錄中建立 .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 替換為本機環境。

在應用程式原始碼中新增中斷點，以暫停 HTTP 要求並開始執行偵錯，之前新增了 Debug Remote 設定。

在與 Chat 應用程式互傳的即時訊息聊天室中，輸入文字您測試的任何要測試的內容，然後按下 enter 鍵。您的即時通訊應用程式正在運作，因此沒有回覆偵錯在 Visual Studio Code IDE 中執行。

對 Google Chat 應用程式進行偵錯

從本機開發環境偵錯

研討會

Node.js

Python

Java

必要條件

Node.js

Python

Java

公開 localhost 服務

設定 Chat 應用程式

測試 Chat 應用程式

Node.js

Python

Java

遠端環境偵錯

必要條件

連結本機和遠端環境

開始偵錯

Node.js

Python

Java

相關主題