How to find all client library files(JS and CSS) in AEM?

Today in this tutorial we are going to learn how to find all client library files (JS and CSS) in AEM? 

In AEM we have a console to find all the client libraries and their dependencies along with JS and CSS files. Using the below URL we can access that console.

http://localhost:4503/libs/granite/ui/content/dumplibs.html

We can also filter our library files on the basis of categories and templates.

• If you want to see all the files belongs to particular categories then put the category name in the categories field and click on the search button.

• If you want to see only JS or CSS files from particular categories then put the type JS for javascript files and CSS for cascading style sheet files and click on the search button.

• Also, you can find the files based on the theme. Using this you will be able to identify what all library files are being used in this theme. To find the related files with theme simple put the name of the theme in the Theme section and click on the search button

Below is the screenshot where we have applied filter on the basis of categories and type:

List of client libraries in AEM 

There are two parts or sections of this report as you can see in the above screenshot.

1. The result section will give you results based on the applied filter.
2. and the second section has Libraries by Path which have information of the file. Here as you can see the first column has the name of the file along with its path, the second column will let you know the type of that file either JS, CSS or image, and the last column contains the information regarding its group (from where this file belongs) which we called categories in AEM.

For more about clientLibs please refer: http://blogs.adobe.com/experiencedelivers/experience-management/clientlibs-explained-example/