Felsöka problem på klientsidan i AEM Touch-gränssnittet eller det klassiska användargränssnittet
I artikeln beskrivs hur du felsöker problem på klientsidan i AEM Touch-gränssnittet och/eller det klassiska användargränssnittet genom följande åtgärder:
- Felsöka händelsehanterare som är kopplade till en UI-knapp
- Aktivera felsökningsläge för klientbibliotek
- Inaktiverar minierat JavaScript
Beskrivning description
Miljö
Experience Manager
Problem/symtom
Den här guiden visar hur du diagnostiserar JavaScript-problem i webbläsaren.
JavaScript Error Example
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)
Upplösning resolution
A. Felsökningstips för JavaScript
- Hitta och felsök de händelsehanterare som är kopplade till en gränssnittsknapp - Om felet eller problemet är i beröringsgränssnittet som är relaterat till en klickbar knapp kan det hjälpa att se alla händelsehanterare som är kopplade till det elementet på sidan. I Google Chrome Browser högerklickar du på knappen, bilden, länken osv. och väljer "Inspect". I den nedre vänstra panelen är elementet HTML markerat. I den nedre högra panelen väljer du fliken Händelseavlyssnare för att se vilka händelseavlyssnare som är kopplade till elementet.
- Formatera minifierad eller svår att läsa javascript-kod - Aktivera funktionen pretty-print i Chrome Debugger för att göra det enklare att läsa och felsöka javascript.
- Ändra javascript lokalt för att testa potentiella korrigeringar - Använd funktionen Lokala åsidosättningar i Chrome för att redigera javascript-filer i webbläsaren för att testa ändringarna innan du gör dem på AEM.
B. Felsökningsläge för klientbibliotek
Det kan vara praktiskt att aktivera felsökningsläget för klientbibliotek om du vill söka i de separata filerna som utgör klientbiblioteken.
-
Öppna sidan i Chrome Browser för att visa den felande sidan.
-
Lägg till frågesträngsparametern debugClientLibs=true i adressfältet i slutet av URL-adressen, före eventuella URL-ankarpunkter.
Till exempel: http://localhost:4502/siteadmin?debugClientLibs=true#/content/we-retail
Med det här alternativet läser klientbiblioteket in alla filer separat i stället för att konsolidera dem.
Om du aktiverar felsökningsläget för klientlibs i Touch-gränssnittet kan sidan brytas. Det är dock fortfarande en användbar funktion eftersom den kan användas för att visa vilken fil i klientbiblioteket som innehåller den specifika kodraden som du felsöker.
-
I Chrome webbläsare (längst upp till höger) går du till Verktyg =
>Fler verktyg =>Utvecklarverktyg -
Klicka på Konsol på panelen Utvecklarverktyg.
-
JavaScript-felet bör listas. Till höger om felet finns en länk till filen och radnumret där JavaScript-koden misslyckas. Klicka på fillänken.
-
Nu bör du vara på fliken Källor på raden där koden misslyckades. Ange en brytpunkt i koden genom att högerklicka på radnumret och välja Lägg till brytpunkt. Mer information om brytpunkter finns i Google Chrome-dokumentationen.
-
Uppdatera sidan så kan du börja felsöka JavaScript.
C. Inaktivera miniatyr
Om javascript-skriptet är minifierat under felsökningen kan det antingen formatera det i webbläsaren eller inaktivera miniatyrbilder.
-
Gå till http://aemhost/system/console/configMgr/com.adobe.granite.ui.clientlibs.impl.HtmlLibraryManagerImpl
-
Avmarkera Minify
-
Klicka på Spara
-
Uppdatera sidan som du felsöker och javascript blir enklare att läsa och ange brytpunkter på.
Felsökningstips
Om du inte kan inaktivera miniatyrbilder i klientbiblioteken kan du åtminstone göra en snygg utskrift av javascript för bättre felsökning. Läs den här artikeln om du vill veta hur du gör det i webbläsaren Google Chrome.