How to debug client-side issues in AEM Touch UI or Classic UI

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 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)

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 “Inspect”. In the bottom-left panel, the HTML element is selected.  In the bottom-right panel, select the “Event Listeners” tab to see the event listeners tied to the element.
• Format minified or hard to read javascript code - Enable the pretty-print feature in the Chrome debugger to make it easier to read and debug javascript.
• Modify javascript locally to test potential fixes - Use the Local Overrides 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.

1. Open the page in Chrome Browser to the page that has error.

2. In the address bar in the end of the URL, before any URL anchor, add this query string parameter “debugClientLibs=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.

3. In Chrome browser (on the top right-side), go to Tools =More Tools =Developer Tools

4. Click “Console” of the “Developer Tools” panel.

5. 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.

6. Now you should be on the Sourcestab 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 Google Chrome documentation for more details on breakpoints.

7. 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

• Uncheck Miniify

• Click 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 this article for how this is done in Google Chrome browser.