您可以使用 Chrome 開發人員工具為互動式 Canvas 網頁應用程式進行偵錯。Google Home 或 Google Nest 智慧螢幕的軟體版本為 30 以上版本 (本次更新將於 2020 年 10 月開始推出) 和 Cast 韌體 1.50 以上版本。您可以在智慧螢幕上查看「System settings / About device」之下的版本。
設定環境
開始偵錯前，請先按照下列步驟設定您的環境：
- 在 Actions 主控台模擬工具啟用您的動作進行測試。
- 將機器連上您要測試的 Google Home 或 Google Nest 裝置所使用的相同區域網路。
- 確認網路並未封鎖裝置之間的封包。
- 在 Actions 主控台和 Google Home 或 Google Nest 裝置上登入相同的 Google 帳戶。
環境準備就緒後，您可以在測試智慧螢幕上啟動動作。
將 Canvas 網頁應用程式連結至偵錯工具
如要將 Canvas 網頁應用程式連線至 Chrome 開發人員工具，請按照下列步驟操作：
- 在本機開發機器中，安裝並啟動 Google Chrome 瀏覽器。
- 在 Chrome 瀏覽器的位址欄位中輸入
chrome://inspect#devices來啟動 Chrome 檢查器。頁面上應該會顯示裝置清單，而 Canvas HTML 網址應列在測試 Google Home 或 Google Nest 裝置名稱的下方。請注意，Chrome 可能需要一些時間才能探索您網路中的所有裝置。 - 按一下 HTML 網址下方的
inspect連結，即可啟動 Chrome 開發人員工具。
Chrome 開發人員工具會在獨立視窗中載入。按一下「螢幕側錄」(
) 按鈕，即可查看裝置上轉譯的網頁 GUI。以下螢幕截圖顯示網頁應用程式在 Chrome 開發人員工具中的樣貌：
請注意，您的 Canvas 網頁應用程式會在 iframe 中載入。
偵錯提示
偵錯時，請謹記下列提示：
- 重新整理 Chrome 開發人員工具中的頁面，即可用開發網址的最新程式碼重新載入本機執行要求應用程式容器。
- 檢查 JavaScript 應用程式是否正常載入。如要這麼做，請查看開發人員工具頁面的主控台區段。
- 在網頁應用程式程式碼中使用
debugger;，在程式碼中新增手動中斷點。 - 如果長時間在
chrome://inspect#devices中沒有看到您的裝置，請重新整理檢查頁面。 - 如要對任何效能問題進行偵錯，請遵循開始使用執行階段效能教學課程。
- 由於智慧螢幕記憶體有限，如果網頁應用程式大小超過 200 MB，網頁應用程式可能會停止運作或停止運作。如要對任何記憶體問題進行偵錯，請按照修正記憶體問題教學課程操作。
- 如有任何執行要求錯誤，請查看 Actions on Google 伺服器透過 Webhook 記錄或 Stackdriver 記錄檔傳送至 Webhook 的要求。