How to debug a javascript error in the AEM Touch UI or Classic UI

This guide shows you how to diagnose JavaScript issues in your browser.

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)

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 "debugClientLibs=true".
For example:
http://localhost:4502/siteadmin?debugClientLibs=true#/content/geometrixx

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

Refresh the page and you can start debugging the JavaScript.

Debugging Tip:
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. Right click the button, image, link, etc and select "Inspect". In the bottom panel, you see the HTML element selected. On the bottom-right panel, you see tabs. Select the "Event Listeners" tab to see event listeners tied to the element.

Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices | Online Privacy Policy

How to debug a JavaScript error in the AEM Touch UI or Classic UI

JavaScript Error Example

Steps

Ask the Community

Contact Us