Modalità Sviluppatore

Durante la modifica di pagine in AEM sono disponibili diverse modalità , inclusa la modalità Sviluppatore . La modalità Sviluppatore apre un pannello laterale con diverse schede che forniscono a uno sviluppatore informazioni tecniche sulla pagina corrente.

Sono disponibili due schede:

  • 🔗 Componenti per visualizzare informazioni sulla struttura e sulle prestazioni.
  • 🔗 Errori per vedere eventuali problemi.

Queste consentono a uno sviluppatore di:

  • ​Scopri come sono composte le pagine.
  • Debug: cosa accade dove e quando, che a sua volta aiuta a risolvere i problemi.
NOTA

Modalità sviluppatore:

  • Non è disponibile su dispositivi mobili o piccole finestre sul desktop (a causa di limitazioni di spazio).
    • Questo si verifica quando la larghezza è inferiore a 1024 px.
  • È disponibile solo per gli utenti membri del gruppo administrators.

Apertura della modalità Sviluppatore

La modalità Sviluppatore viene implementata come pannello laterale nell’editor di pagine. Per aprire il pannello, seleziona Sviluppatore dal selettore di modalità nella barra degli strumenti dell’editor di pagine:

Apertura della modalità sviluppatore

Il pannello è diviso in due schede:

  • Componenti : mostra una struttura dei componenti, simile alla struttura dei contenuti per gli autori
  • Errori - Quando si verificano dei problemi, vengono visualizzati i dettagli per ciascun componente.

Scheda Componenti

Scheda Componenti

Viene visualizzata una struttura ad albero dei componenti che:

  • Illustra la catena di componenti e modelli di cui è stato eseguito il rendering sulla pagina. La struttura ad albero può essere espansa per mostrare il contesto all’interno della gerarchia.
  • Mostra il tempo di calcolo lato server necessario per eseguire il rendering del componente.
  • Consente di espandere la struttura ad albero e selezionare componenti specifici all’interno della struttura. La selezione permette di accedere ai dettagli dei componenti; quali:
    • Percorso archivio
    • Collegamenti agli script (a cui si accede in CRXDE Lite)
    • Dettagli del componente come mostrato nella Console Componenti
  • I componenti selezionati nella struttura ad albero sono indicati da un bordo blu nell’editor.

Questa scheda dei componenti consente di:

  • Determina e confronta il tempo di rendering per componente.
  • Visualizzare e comprendere la gerarchia.
  • Comprendere e quindi migliorare il tempo di caricamento della pagina trovando componenti lenti.

Ciascuna voce di componente può avere le seguenti opzioni:

Esempio di componente in modalità Sviluppatore

  • Visualizza dettagli: collegamento a un elenco che mostra:

    • Tutti gli script dei componenti utilizzati per il rendering del componente.

    • Percorso del contenuto dell’archivio per questo componente specifico.

      Visualizza dettagli

  • Modifica script: collegamento che apre lo script del componente in CRXDE Lite.

  • Visualizza dettagli componente: apre i dettagli del componente nella console Componenti.

Quando si espande una voce di un componente toccando o facendo clic sulla freccia è anche possibile visualizzare:

* La gerarchia all’interno del componente selezionato.
* Tempi di rendering del componente selezionato in isolamento, di tutti i singoli componenti nidificati al suo interno e del totale combinato.

Scheda Errori

Scheda Errori

Speriamo che la scheda Errori sia sempre vuota (come sopra), ma quando si verificano dei problemi è possibile visualizzare i seguenti dettagli per ciascun componente:

  • Un avviso se il componente scrive una voce nel registro degli errori, insieme ai dettagli dell’errore e indirizza i collegamenti al codice appropriato all’interno di CRXDE Lite.
  • Un avviso se il componente apre una sessione di amministrazione.

Ad esempio, se viene chiamato un metodo non definito, l’errore risultante verrà visualizzato nella scheda Errori e la voce del componente nella struttura della scheda Componenti verrà anch’essa contrassegnata con un indicatore quando si verifica un errore.

In questa pagina