如何在AEM觸控式UI或傳統UI中對使用者端問題進行偵錯
本文會說明如何透過下列措施，針對AEM觸控式UI和/或傳統UI中的使用者端問題進行偵錯：
- 偵錯繫結至UI按鈕的事件處理常式
- 啟用使用者端程式庫偵錯模式
- 停用縮制的Javascript
說明 description
環境
Experience Manager
問題/症狀
本指南會向您說明如何診斷瀏覽器中的 JavaScript 問題。
JavaScript錯誤範例
Uncaught TypeError: $(...).not(...).draggable is not a functionat HTMLDocument. (lightbox.js:45)at HTMLDocument.dispatch (jquery.js:4665)at HTMLDocument.elemData.handle (jquery.js:4333)at Object.trigger (jquery.js:4574)at HTMLElement. (jquery.js:5284)at Function.each (jquery.js:384)at jQuery.fn.init.each (jquery.js:136)at jQuery.fn.init.trigger (jquery.js:5283)
解析度 resolution
A. Javascript 偵錯技巧
- 查找和偵錯與 UI 按鈕相連結的事件處理常式 - 如果錯誤或問題出現在與可點擊按鈕相關的觸控式 UI 中，那麼在頁面上查看和該元素相連結的所有事件處理常式可能會有所幫助。 在Google Chrome瀏覽器中，以滑鼠右鍵按一下按鈕、影像、連結等，然後選取「Inspect」。 在左下角的面板中，選取 HTML 元素。 在右下角面板中，選取「事件接聽程式」索引標籤，以查看和元素相連結的事件接聽程式。
- 格式縮制或難以讀取JavaScript程式碼 — 啟用 美化效果 Chrome Debugger中的功能，讓您更易讀取及偵錯javascript。
- 在本機修改javascript以測試潛在的修正 — 使用 本機覆寫 chrome中的功能，可在AEM伺服器上進行變更之前，編輯瀏覽器上的javascript檔案以測試變更。
B. 用戶端資料庫偵錯模式
啟用用戶端資料庫偵錯模式對於搜尋組成用戶端資料庫的單獨檔案可能很有幫助。
-
在Chrome瀏覽器中開啟頁面，到有錯誤的頁面。
-
在URL末尾的位址列中，在任何URL錨點之前，新增此查詢字串引數"debugClientLibs=true"。
例如： http://localhost:4502/siteadmin？debugClientLibs=true#/content/we-retail
此選項使用戶端資料庫可單獨載入其所有檔案，而不是將其合併。
在觸控式 UI 中，啟用用戶端資料庫的偵錯模式可能會破壞頁面。 但是，它仍然是一個有用的功能，因為它可用於檢視用戶端資料庫中哪個文件包含您正在偵錯的特定程式碼行。
-
在Chrome瀏覽器（在右上角）中，前往 工具=
>更多工具=>開發人員工具 -
按一下「主控台 的「」開發人員工具「面板。
-
應該出現 JavaScript 錯誤清單。錯誤右側是一個連結，其中會包含JavaScript程式碼失敗的檔案和行號。 按一下檔案連結。
-
現在您應該在 來源 索引標籤上的程式碼失敗行。 以滑鼠右鍵按一下行號並選取「 」，在程式碼中設定中斷點 新增中斷點。 請參閱 Google Chrome檔案 以取得中斷點的詳細資訊。
-
重新整理頁面，您就可以開始偵錯 JavaScript。
C. 停用縮製
在偵錯期間，如果 javascript 已縮製，有助於在瀏覽器中對其進行格式化或停用縮製。
-
前往http://aemhost/system/console/configMgr/com.adobe.granite.ui.clientlibs.impl.HtmlLibraryManagerImpl
-
取消核取 最小化
-
按一下 儲存。
-
重新整理您正在偵錯的頁面，javascript 將更易於供讀取和設定中斷點。
偵錯技巧
如果您無法在用戶端資料庫上停用縮製，那麼您至少可以對 javascript 進行美化功能，以進行更好的偵錯。另請參閱 本文 以瞭解如何在Google Chrome瀏覽器中完成此作業。