開發人員模式

在Adobe Experience Manager (AEM)中編輯頁面時，會有數個 模式 可用，包括開發人員模式。 這會開啟一個側面板，其中包含數個標籤，為開發人員提供有關目前頁面的資訊。 三個標籤為：

  • 元件 以檢視結構和效能資訊。
  • 測試 以執行測試和分析結果。
  • 錯誤 檢視發生的任何問題。

這些功能可協助開發人員：

  • 探索：組成頁面的專案。
  • 偵錯：隨時隨地發生的狀況，進而有助於解決問題。
  • 測試：應用程式的行為是否符合預期。
注意

開發人員模式:

  • 僅適用於觸控式UI （編輯頁面時）。

  • 不適用於行動裝置或桌上型電腦上的小型視窗（因為空間限制）。

    • 當寬度小於1024畫素時，就會發生這種情況。

  • 僅適用於屬於以下群組的使用者： administrators 群組。

注意

開發人員模式僅適用於未使用nosamplecontent執行模式的標準制作執行個體。

如有必要，可將其設定為使用：

  • 在使用nosamplecontent執行模式的作者執行個體上
  • 發佈執行個體

使用後應再次停用。

注意

請參閱：

開啟開發人員模式

開發人員模式會實作為頁面編輯器的側面板。 若要開啟面板，請選取 開發人員 從頁面編輯器工具列中的模式選取器：

chlimage_1-11

面板分為兩個標籤：

  • 元件 — 這個選項會顯示元件樹，類似於 內容樹狀結構 作者

  • 錯誤 — 發生問題時，會顯示每個元件的詳細資料。

元件

chlimage_1-12

這顯示一個元件樹狀結構，其中：

  • 概述在頁面上轉譯的元件鏈和範本（SLY、JSP等）。 可展開樹狀結構以顯示階層內的前後關聯。

  • 顯示轉譯元件的伺服器端運算時間。

  • 可讓您展開樹狀結構並選取樹狀結構中的特定元件。 選取範圍可讓您存取元件詳細資訊，例如：

    • 存放庫路徑
    • 指令碼連結(以CRXDE Lite存取)

  • 選取的元件（在內容流程中，以藍色邊框表示）會在內容樹狀結構中反白顯示（反之亦然）。

這有助於：

  • 決定並比較每個元件的演算時間。
  • 檢視並瞭解階層。
  • 找出緩慢的元件，瞭解並改善頁面載入時間。

每個元件專案可顯示（例如）：

chlimage_1-13

  • 檢視詳細資料：清單的連結，其中顯示：

    • 用於呈現元件的所有元件指令碼。
    • 此特定元件的存放庫內容路徑。

    chlimage_1-14

  • 編輯指令碼：連結：

    • 以CRXDE Lite開啟元件指令碼。

  • 展開元件專案（箭頭標頭）也可顯示：

    • 所選元件內的階層。
    • 所選元件的單獨呈現時間、任何巢狀在其中的個別元件以及合併總數。

    chlimage_1-15

注意

有些連結會指向下的指令碼 /libs. 不過，這些僅供參考，您 不得 編輯下的任何專案 /libs，因為您所做的任何變更都可能遺失。 這是因為每當您升級或套用Hotfix或Feature Pack時，此分支很容易變更。 進行您需要的變更 /apps. 另請參閱 覆蓋和覆寫.

錯誤

chlimage_1-16

希望 錯誤 索引標籤一律為空白（如上所述），但發生問題時，會顯示每個元件的下列詳細資料：

  • 如果元件將專案寫入錯誤記錄檔，連同錯誤的詳細資訊以及指向CRXDE Lite內適當程式碼的直接連結，會出現警告。
  • 如果元件開啟管理員工作階段，會出現警告。

例如，在呼叫未定義的方法的情況下，產生的錯誤會顯示在 錯誤 標籤：

chlimage_1-17

發生錯誤時，「元件」標籤樹狀結構中的元件專案也會標示一個指示器。

測試

注意

在AEM 6.2中，開發人員模式的測試功能已重新實作為獨立的工具應用程式。

如需完整詳細資訊，請參閱 測試您的UI.

本頁內容