Come eseguire il debug dei problemi lato client nell'interfaccia AEM Touch o Classic

Descrizione

Ambiente

  • Experience Manager

Problemi/Sintomi
Questa guida illustra come diagnosticare i problemi JavaScript nel browser.

Esempio di errore 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)

Risoluzione

A. Suggerimenti per il debug di JavaScript

  • Trova ed esegui il debug dei gestori di eventi associati a un pulsante dell’interfaccia utente. Se l’errore o il problema si trova nell’interfaccia utente touch relativa a un pulsante cliccabile, potrebbe essere utile visualizzare tutti i gestori di eventi associati a tale elemento sulla pagina.  Nel browser Google Chrome, fai clic con il pulsante destro del mouse sul pulsante, l’immagine, il collegamento, ecc. e seleziona "Inspect". Nel pannello in basso a sinistra, viene selezionato l’elemento HTML.  Nel pannello in basso a destra, seleziona la scheda “Event Listeners” (Listener di eventi) per visualizzare i listener di eventi associati all’elemento.
  • Formato minimizzato o difficile da leggere il codice javascript - Attiva piuttosto stampato nel debugger di Chrome per semplificare la lettura e il debug di javascript.
  • Modifica javascript localmente per testare potenziali correzioni - Utilizzare Override locali funzionalità in Chrome per modificare i file javascript sul browser per testare le modifiche prima di eseguirle sul server AEM.

B. Modalità di debug della libreria client

L’abilitazione della modalità di debug della libreria client può essere utile per cercare i file separati che compongono le librerie client.

  1. Apri la pagina nel browser Chrome alla pagina che presenta un errore.

  2. Nella barra degli indirizzi alla fine dell’URL, prima di qualsiasi ancoraggio URL, aggiungi questo parametro della stringa di query "debugClientLibs=true".

    Ad esempio: http://localhost:4502/siteadmin?debugClientLibs=true#/content/we-retail

    Questa opzione fa sì che la libreria client carichi tutti i file separatamente anziché consolidarli.

    Nell’interfaccia utente touch, l’abilitazione della modalità di debug delle librerie client può causare un’interruzione della pagina.  La funzione, tuttavia, risulta ancora utile in quanto può essere utilizzata per stabilire quale file nella libreria client contiene la particolare riga di codice di cui si sta eseguendo il debug.

  3. Nel browser Chrome (in alto a destra), vai a Strumenti =Altri Strumenti =Strumenti Sviluppatori

  4. Fai clic su "Console" del "Strumenti per gli sviluppatori" pannello.

  5. L’errore JavaScript dovrebbe trovarsi in elenco. A destra dell’errore è presente un collegamento al file e il numero della riga in cui il codice JavaScript ha esito negativo. Fai clic sul collegamento del file.

  6. Ora dovresti essere sul Origini sulla riga in cui il codice non è riuscito. Imposta un punto di interruzione nel codice facendo clic con il pulsante destro del mouse sul numero di riga e selezionando Aggiungi punto di interruzione.  Consulta la sezione Documentazione di Google Chrome per ulteriori dettagli sui punti di interruzione.

  7. Aggiorna la pagina e inizia a eseguire il debug di JavaScript.

C. Disattivare la minimizzazione

Se durante l’operazione di debug JavaScript è minimizzato, è utile formattarlo nel browser o disattivare la minimizzazione.

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

  • Deseleziona Miniify (Minimizza)

  • Fai clic su Salva

  • Aggiornando la pagina in cui si sta eseguendo il debug, si agevola la lettura di JavaScript e la configurazione dei punti di interruzione.

Suggerimento per il debug

Se non riesci a disabilitare la minimizzazione nelle librerie client, utilizza la funzione pretty print per migliorare il debug di JavaScript. Vedi articolo per eseguire questa operazione nel browser Google Chrome.

In questa pagina