Eseguire il debug dei problemi lato client nell’interfaccia utente classica o touch dell’AEM
L’articolo spiega come eseguire il debug dei problemi lato client nell’interfaccia utente AEM touch e/o classica attraverso le seguenti misure:
- Gestori di eventi di debug associati a un pulsante dell’interfaccia utente
- Abilitazione della modalità di debug della libreria client
- Disabilitazione di Javascript minimizzato
Descrizione description
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 functionat 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 resolution
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 Chrome di Google, fai clic con il pulsante destro del mouse sul pulsante, sull’immagine, sul collegamento o altri elementi 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 difficoltà di lettura del codice JavaScript. Abilitare la funzionalità pretty-print nel debugger di Chrome per semplificare la lettura e il debug di JavaScript.
- Modifica JavaScript localmente per testare potenziali correzioni. Utilizza la funzionalità Local Overrides in Chrome per modificare i file JavaScript sul browser e testare le modifiche prima di implementarle 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.
-
Apri la pagina contenente l’errore nel browser Chrome.
-
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.
-
Nel browser Chrome (in alto a destra), vai a Strumenti =
>Altri strumenti =>Strumenti per sviluppatori -
Fare clic su "Console" nel pannello "Strumenti sviluppatore".
-
L’errore JavaScript dovrebbe trovarsi in elenco. A destra dell’errore è presente un collegamento con il file e il numero di riga in cui il codice JavaScript ha esito negativo. Fai clic sul collegamento del file.
-
Ora dovresti trovarti nella scheda Sources sulla riga in cui si è verificato l'errore del codice. Impostare un punto di interruzione nel codice facendo clic con il pulsante destro del mouse sul numero di riga e selezionando Aggiungi punto di interruzione. Per ulteriori dettagli sui punti di interruzione, consulta la documentazione di Google Chrome.
-
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 a http://aemhost/system/console/configMgr/com.adobe.granite.ui.clientlibs.impl.HtmlLibraryManagerImpl
-
Deseleziona Minify
-
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. Consulta questo articolo per ulteriori informazioni su come eseguire questa operazione nel browser Google Chrome.