開發人員模式

在AEM中編輯頁面時,有數個模式可用,包括「開發人員」模式。 這會開啟一個包含數個標籤的側面板,讓開發人員可瞭解目前頁面的相關資訊。 這三個標籤是:

  • 用於 查看結構和效能資訊的元件。
  • 測試 以執行測試並分析結果。
  • 誤,無法查看發生的任何問題。

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

  • Discover:由哪些頁面組成。
  • 除錯:發生在何處和何時的情況,這反過來有助於解決問題。
  • 測試:應用程式是否如預期般運作。
注意

開發人員模式:

  • 僅在啟用觸控的UI中可用(在編輯頁面時)。
  • 在行動裝置或桌上型電腦的小視窗上無法使用(因為空間限制)。
  • 當寬度小於1024像素時就會發生此情況。
  • 僅適用於administrators群組成員的使用者。
注意

開發人員模式僅適用於未使用nosamplecontent執行模式的標準作者例項。

如果需要,可將其配置為使用:

  • 在使用nosamplecontent run-mode的作者實例上
  • 發佈實例

使用後應再次停用。

注意

請參閱:

開啟開發人員模式

開發人員模式是作為頁面編輯器的側面板實作。 若要開啟面板,請從頁面編輯器工具列的模式選擇器中選取​Developer:

chlimage_1-229

此面板分為兩個標籤:

  • Components —— 此處顯示與作者內容樹類似 元件樹

  • 錯誤 -發生問題時,會顯示每個元件的詳細資訊。

元件

chlimage_1-230

這顯示了一個元件樹,其中:

  • 概述在頁面上呈現的元件和範本鏈(SLY、JSP等)。 樹可以展開,以顯示層次中的上下文。

  • 顯示轉換元件所需的伺服器端計算時間。

  • 允許您展開樹並在樹中選擇特定元件。 Selection提供對元件詳細資訊的訪問;例如:

    • 儲存庫路徑
    • 指令碼的連結(在CRXDE Lite中存取)
  • 選取的元件(在內容流中,以藍色邊框表示)會在內容樹狀結構中反白顯示(反之亦然)。

這有助於:

  • 確定並比較每個元件的轉換時間。
  • 瞭解並瞭解階層。
  • 透過尋找緩慢的元件,瞭解並改善頁面載入時間。

每個元件項目都可顯示(例如):

chlimage_1-231

  • 檢視詳細資訊:一個指向清單的連結,其中顯示:

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

    chlimage_1-232

  • 編輯指令碼:連結:

    • 在CRXDE Lite中開啟元件指令碼。
  • 展開元件項目(箭頭標題)也可顯示:

    • 所選元件內的層次。
    • 單獨呈現所選元件的時間、其中巢狀內嵌的任何個別元件,以及總和。

    chlimage_1-233

注意

某些連結指向/libs下的指令碼。 但是,這些僅供參考,您​不得​編輯/libs下的任何內容,因為您所做的任何變更都可能遺失。 這是由於當您升級或套用修補程式/功能套件時,此分支很容易發生變更。 您需要的任何變更都應在/apps下進行,請參閱覆蓋與覆寫

錯誤

chlimage_1-234

希望​Errors​標籤永遠為空(如上所示),但當出現問題時,會針對每個元件顯示以下詳細資料:

  • 如果元件將項目寫入錯誤記錄,以及錯誤的詳細資訊,並直接連結至CRXDE Lite中的適當程式碼,則會發出警告。
  • 當元件開啟管理工作階段時會發出警告。

例如,在呼叫未定義方法的情況下,產生的錯誤會顯示在​Errors​標籤中:

chlimage_1-235

出現錯誤時,「元件」頁籤樹中的元件條目也將用指示符標籤。

測試

注意

在AEM 6.2中,開發人員模式的測試功能已重新建置為獨立的「工具」應用程式。

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

本頁內容

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now