How to debug client-side issues in AEM Touch UI or Classic UI
The article explains how to debug聽client-side issues in AEM Touch UI and/or Classic UI through the following measures:
- Debugging event handlers tied to a UI button
- Enabling client library debug mode
- Disabling minified Javascript
Description description
Environment
Experience Manager
Issues/Symptoms
This guide shows you how to diagnose JavaScript issues in your browser.
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)
Resolution resolution
A. Javascript Debugging Tips
- Find and debug the event handlers tied to a UI button 聽- If the error or issue is in Touch UI related to a clickable button, then it might help to see all the event handlers tied to that element on the page.聽 In Google Chrome Browser, right-click the button, image, link, etc and select 鈥淚nspect鈥. In the bottom-left panel, the HTML element is selected.聽 In the bottom-right panel, select the 鈥淓vent Listeners鈥 tab to see the event listeners tied to the element.
- Format minified or hard to read javascript code 聽- Enable the聽聽feature in the Chrome debugger聽to make it easier to read and debug javascript.
- Modify javascript locally to test potential fixes 聽- Use the聽聽feature in Chrome to edit javascript files on the browser to test changes before making them on the AEM server.
B. Client Library Debug Mode
Enabling client library debug mode can be useful to search the separate files that comprise the client libraries.
-
Open the page in Chrome Browser to the page that has error.
-
In the address bar in the end of the URL, before any URL anchor, add this query string parameter 鈥渄ebugClientLibs=true鈥.
For example: http://localhost:4502/siteadmin?debugClientLibs=true#/content/we-retail
This option causes the client library to load all of its files separately instead of consolidating them.
In Touch UI, enabling debug mode of the client libs can break the page.聽 However, it is stiill a useful feature as it can be used to view which file in the client library contains the particular line of code you are debugging.
-
In Chrome browser (on the top right-side), go to聽 Tools =
>More Tools =>Developer Tools -
Click 鈥Console鈥 of the 鈥Developer Tools鈥 panel.
-
The JavaScript error should be listed. On the right of the error is a link with the file and line number where the JavaScript code is failing. Click the file link.
-
Now you should be on the聽 Sources tab on the line where the code failed. Set a breakpoint in the code by right clicking the line number and selecting聽 Add breakpoint. 聽聽See the聽聽for more details on breakpoints.
-
Refresh the page and you can start debugging the JavaScript.
C. Disable Minification
During debugging, if the javascript is minified, it helps to either format it in the browser or disable minification.
-
Go to聽http://aemhost/system/console/configMgr/com.adobe.granite.ui.clientlibs.impl.HtmlLibraryManagerImpl
-
鲍苍肠丑别肠办听 Minify
-
颁濒颈肠办听 Save
-
Refresh the page you are debugging and the javascript will be easier to read and set breakpoints on.
Debugging Tip
If you are unable to disable minification on the client libraries then you can at least pretty-print the javascript for better debugging. See聽聽for how this is done in Google Chrome browser.