Adobe CQ5 No more prints!! How to debug better your JavaScript files

Adobe CQ5 No more prints!! How to debug better your JavaScript files

Have you ever created a validation file for a dialog? What about extending or creating a new widget? The most normal situation here is, that after designing and programming them you may want to test them, but when you open your favorite browser’s developer suite you discover that CQ loads all the JavaScript files in a compressed way. What can you do here? The initial answer could be… “well, I will set some log sentences and try to debug it via old school prints in the browser’s console”, that could be a way, but we do not really want that (or at least I wouldn’t). Here, I have for you two alternatives to force CQ to load each file separately allowing our browser to display our JavaScript files, search, debug and set breakpoints along them.

OSGi Console

Open CQ’s OSGi console and go to the “Configuration tab”, once there, search for the entry “Day CQ HTML Library Manager” and mark the “Debug” checkbox. This alternative is good when you want to debug files for a long period of time. But, what about if you only want to activate this debugging for a single page?

URL parameter “debugClientLibs”

If you want to debug only one page or you tend to forget setting the Day CQ HTML Library Manager configuration back to its original values, this is the simplest way to do it. You just have to set the parameter debugClientLibs to true for the page you want to debug.
Example:
http://host:port/cf#/content/geometrixx/en/products/circle.html?debugClientLibs=true
To conclude, I will like to add that CQ loads all the JavaScript stuff in a compressed way in order to save space and load the pages quickly. When you load the JavaScript files individually you will experiment higher page load times, so, for performance reasons, do not forget to restore it to its default values when you are ready with your debug tasks.
Tags:
, ,
No Comments

Sorry, the comment form is closed at this time.