CQ5.X: How to Debug CQ5 Widget Javascript

Question

The CQ5 widgets javascript code is served in one large widgets.js file, which makes it harder to debug widgets. How can I get each widget in an individual file?

Answer, Resolution

1. Open http://localhost:4502/system/console/configMgr/com.day.cq.widget.impl.HtmlLibraryManagerImpl
2. Check "Debug" and save
3. Now when debugging using e.g. Firebug, it should take you to the individual widget file

Note: Make sure to disable the debug mode again when you're done, since it has an impact on performance.

Opening the following URL will provide you with a list of all individual widgets js files:

• For CQ 5.2: http://localhost:4502/libs/cq/widgets.js?debug=true
• For CQ 5.3: http://localhost:4502/libs/cq/ui/widgets.js?debug=true

Note: This works also without the debug mode turned on.

Applies to

CQ5.2
CQ5.3