如何在AEM Touch UI或傳統UI中除錯用戶端問題

說明

環境

  • Experience Manager

問題/症狀
本指南會說明如何在瀏覽器中診斷JavaScript問題。

JavaScript 錯誤示例

Uncaught TypeError: $(...).not(...).draggable is not a function
at 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)

解析度

A. Javascript 偵錯技巧

  • 查找和偵錯與 UI 按鈕相連結的事件處理常式 - 如果錯誤或問題出現在與可點擊按鈕相關的觸控式 UI 中，那麼在頁面上查看和該元素相連結的所有事件處理常式可能會有所幫助。  在Google Chrome瀏覽器中，以滑鼠右鍵按一下按鈕、影像、連結等，然後選取「Inspect」。 在左下角的面板中，選取 HTML 元素。 在右下角面板中，選取「事件接聽程式」索引標籤，以查看和元素相連結的事件接聽程式。
  • 縮制或難讀Javascript程式碼的格式  — 啟用 印刷品 功能，更輕鬆讀取和除錯javascript。
  • 在本機修改javascript以測試潛在修正  — 使用 本地覆蓋 功能，在AEM伺服器上進行變更之前，先在瀏覽器上編輯javascript檔案以測試變更。

B. 用戶端資料庫偵錯模式

啟用用戶端資料庫偵錯模式對於搜尋組成用戶端資料庫的單獨檔案可能很有幫助。

  1. 在Chrome瀏覽器中開啟頁面至有錯誤的頁面。

  2. 在URL結尾的位址列中，在任何URL錨點之前，新增此查詢字串參數"debugClientLibs=true"。

    例如：http://localhost:4502/siteadmin?debugClientLibs=true#/content/we-retail

    此選項使用戶端資料庫可單獨載入其所有檔案，而不是將其合併。

    在觸控式 UI 中，啟用用戶端資料庫的偵錯模式可能會破壞頁面。 但是，它仍然是一個有用的功能，因為它可用於檢視用戶端資料庫中哪個文件包含您正在偵錯的特定程式碼行。

  3. 在Chrome瀏覽器中（位於右上角），前往 工具=更多工具=開發人員工具

  4. 按一下「主控台"開發人員工具」面板。

  5. 應該出現 JavaScript 錯誤清單。錯誤的右側是檔案和行號的連結，其中JavaScript程式碼失敗。 按一下檔案連結。

  6. 現在你應該 來源​頁簽，在代碼失敗的行上。 在代碼中設定斷點，方法是按一下右鍵行號並選擇 添加斷點。  請參閱 Google Chrome檔案 有關斷點的詳細資訊。

  7. 重新整理頁面，您就可以開始偵錯 JavaScript。

C. 停用縮製

在偵錯期間，如果 javascript 已縮製，有助於在瀏覽器中對其進行格式化或停用縮製。

  • 前往http://aemhost/system/console/configMgr/com.adobe.granite.ui.clientlibs.impl.HtmlLibraryManagerImpl

  • 取消勾選縮製

  • 按一下儲存。

  • 重新整理您正在偵錯的頁面，javascript 將更易於供讀取和設定中斷點。

偵錯技巧

如果您無法在用戶端資料庫上停用縮製，那麼您至少可以對 javascript 進行美化功能，以進行更好的偵錯。請參閱 這篇文章 以了解在Google Chrome瀏覽器中執行此作業的方式。

本頁內容