Environment
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)
A. Javascript Debugging Tips
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 “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.
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 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.
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.