使用 Chrome 開發人員工具對互動式 Canvas 網頁應用程式進行偵錯

您可以使用 Chrome 開發人員工具對互動式 Canvas 網頁應用程式進行偵錯。Google Home 或 Google Nest 智慧螢幕的軟體版本至少為 30 (這項更新將於 2020 年 10 月開始推出),以及 Cast 韌體版本 1.50 以上版本,都支援 Chrome 偵錯工具。你可以前往智慧螢幕查看 System settings / About device 底下的版本。

設定環境

偵錯前,請先按照下列步驟正確設定環境:

  • 在動作控制台模擬工具中啟用動作進行測試。
  • 將機器連上要測試的 Google Home 或 Google Nest 裝置所使用的區域網路。
  • 確認您的網路不會封鎖裝置之間的封包。
  • 在動作主控台和 Google Home 或 Google Nest 裝置上,使用相同的 Google 帳戶登入。

環境準備就緒後,您就可以在測試智慧螢幕上啟動動作。

將 Canvas 網頁應用程式連結至偵錯工具

如要將 Canvas 網頁應用程式連結至 Chrome 開發人員工具偵錯工具,請按照下列步驟操作:

  1. 在本機開發機器中,安裝並啟動 Google Chrome 瀏覽器
  2. 在 Chrome 瀏覽器的網址欄位中輸入 chrome://inspect#devices 以啟動 Chrome 檢查器。頁面中應會顯示裝置清單,且 Canvas HTML 網址應列在測試 Google Home 或 Google Nest 裝置的名稱下方。請注意,Chrome 可能需要一段時間才能找到您網路上的所有裝置。
  3. 按一下 HTML 網址下的 inspect 連結,即可啟動 Chrome 開發人員工具。

Chrome 開發人員工具會在獨立視窗中載入。您可以按一下螢幕側錄 () 按鈕,查看裝置上轉譯的網頁 GUI。下列螢幕截圖顯示網頁應用程式在 Chrome 開發人員工具中的顯示方式:

請注意,畫布網頁應用程式會載入至 iframe 中。

偵錯提示

偵錯時,請注意以下額外提示:

  • 在 Chrome 開發人員工具中重新整理頁面,以從開發網址的最新程式碼重新載入本機執行要求應用程式容器。
  • 確認 JavaScript 應用程式載入時沒有發生錯誤。如要這麼做,請查看「開發人員工具」頁面的控制台部分。
  • 在網頁應用程式的程式碼中使用 debugger;,在程式碼中新增手動中斷點。
  • 如果裝置長時間都顯示在 chrome://inspect#devices 中,請重新整理檢查頁面。
  • 如要對任何效能問題進行偵錯,請按照「開始分析執行階段效能」教學課程操作。
  • 由於智慧螢幕的記憶體有限,因此如果網頁應用程式超過 200 MB,可能會當機或停止運作。如要對任何記憶體問題進行偵錯,請按照修正記憶體問題教學課程進行操作。
  • 如有任何執行要求錯誤,請查看 Actions on Google 伺服器從 Webhook 記錄或 Stackdriver 記錄檔傳送至 Webhook 的要求。