Knowing how messy that can make source code look, not to mention the toll on site performance, the creators of Adobe Experience Manager (AEM formerly Adobe CQ) implemented what is called the Client Library. Without the proper experience, it is a system that can get you into a lot of trouble.
As you can see from the image above, AEM provides a straightforward method for developers to take advantage of this feature. Simply place your JS and CSS files in a cq:ClientLibraryFolder with the appropriate js.txt and css.txt files so the Client Library knows which files to include.
Here’s an example from the Geometrixx Outdoors sample site pulled from /etc/designs/geometrixx-outdoors/:
The first and most simple tool is to simply append “debugclientlibraries=true” to the query string of your page. This will divide the Client Library scripts and stylesheets into their individual parts, so you more easily utilize your browser’s debugging suite to track issues.
The second tool provided by AEM is the Library Dump Tool. It can be reached at http://localhost:4502/libs/granite/ui/content/dumplibs.html?debugclientlibraries=true (where you replace localhost and the port based on your AEM environment). This tool lists out all the files available to the Client Library as well as each file’s dependencies—giving you a powerful tool for stamping out defects in your site.