對話動作已於 2023 年 6 月 13 日淘汰。詳情請參閱「
對話動作已淘汰 」。
使用 Chrome 開發人員工具對互動式 Canvas 網頁應用程式進行偵錯
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
您可以使用 Chrome 開發人員工具 對互動式 Canvas 網頁應用程式進行偵錯。Google Home 或 Google Nest 智慧螢幕的軟體版本至少為 30 (這項更新將於 2020 年 10 月開始推出),以及 Cast 韌體版本 1.50 以上版本,都支援 Chrome 偵錯工具。你可以前往智慧螢幕查看 System settings / About device
底下的版本。
注意: 不支援在第三方智慧螢幕裝置上對 Canvas 網頁應用程式進行偵錯。 設定環境
偵錯前,請先按照下列步驟正確設定環境:
在動作控制台模擬工具 中啟用動作進行測試。
將機器連上要測試的 Google Home 或 Google Nest 裝置所使用的區域網路。
確認您的網路不會封鎖裝置之間的封包。
在動作主控台和 Google Home 或 Google Nest 裝置上,使用相同的 Google 帳戶登入。
環境準備就緒後,您就可以在測試智慧螢幕上啟動動作。
注意: 您必須先在測試智慧螢幕上啟動開發動作,才能對 Canvas 網頁應用程式進行偵錯。 將 Canvas 網頁應用程式連結至偵錯工具
如要將 Canvas 網頁應用程式連結至 Chrome 開發人員工具偵錯工具,請按照下列步驟操作:
在本機開發機器中,安裝並啟動 Google Chrome 瀏覽器 。
在 Chrome 瀏覽器的網址欄位中輸入 chrome://inspect#devices
以啟動 Chrome 檢查器。頁面中應會顯示裝置清單,且 Canvas HTML 網址應列在測試 Google Home 或 Google Nest 裝置的名稱下方。請注意,Chrome 可能需要一段時間才能找到您網路上的所有裝置。
按一下 HTML 網址下的 inspect
連結,即可啟動 Chrome 開發人員工具。
Chrome 開發人員工具會在獨立視窗中載入。您可以按一下螢幕側錄 ( ) 按鈕,查看裝置上轉譯的網頁 GUI。下列螢幕截圖顯示網頁應用程式在 Chrome 開發人員工具中的顯示方式:
請注意,畫布網頁應用程式會載入至 iframe 中。
偵錯提示
偵錯時,請注意以下額外提示:
在 Chrome 開發人員工具中重新整理頁面,以從開發網址的最新程式碼重新載入本機執行要求應用程式容器。
確認 JavaScript 應用程式載入時沒有發生錯誤。如要這麼做,請查看「開發人員工具」頁面的控制台部分。
在網頁應用程式的程式碼中使用 debugger;
,在程式碼中新增手動中斷點。
如果裝置長時間都顯示在 chrome://inspect#devices
中,請重新整理檢查頁面。
如要對任何效能問題進行偵錯,請按照「開始分析執行階段效能」教學課程 操作。
由於智慧螢幕的記憶體有限,因此如果網頁應用程式超過 200 MB,可能會當機或停止運作。如要對任何記憶體問題進行偵錯,請按照修正記憶體問題教學課程 進行操作。
如有任何執行要求錯誤,請查看 Actions on Google 伺服器從 Webhook 記錄或 Stackdriver 記錄檔傳送至 Webhook 的要求。
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權 ,程式碼範例則為阿帕契 2.0 授權 。詳情請參閱《Google Developers 網站政策 》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2023-12-02 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2023-12-02 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2023-12-02 (世界標準時間)。"]]