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

 Adobe

Get help faster and easier

New user?

Adobe MAX 2024

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX 2024

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online