ClientLibs debugger [?debugClientLibs=true] in AEM

ClientLibs debugger [?debugClientLibs=true] in AEM

Today in this tutorial we are going to discuss how and what we can achieve this using debugClientLibs parameter in AEM.

What is debugClientLibs? What is the use of debugClientLibs?

AEM provides tools for debugging and debugClinetLibs is one of them. Using this we can see all the embedded client library files. By default, client libraries embed all your code in a single file when it is delivered to the browser. So when you want to see all the embedded files in separate at runtime append "?debugClinetLibs=true" in URL (this is something like passing a parameter with url). Then you will see the response return all of the individual script files that ClientLibs embed inside each clientLibs file.

e.g. URL: https://localhost:4502/content/jorvee/home.html?debugClientLibs=true

Benefits of using debugClientLibs:

• You can detach your embedded script at runtime.
• Helps you to identify and fix the JS/CSS issues.

Reference: 

1. http://aempodcast.com/2014/front-end-engineering/debug-client-libs-adobe-experience-manager-formerly-adobe-cq/#.WZaJUVUjHIU

2. https://docs.adobe.com/docs/en/aem/6-0/develop/the-basics/clientlibs.html#Debugging Tools

3. https://blogs.adobe.com/experiencedelivers/experience-management/clientlibs-explained-example/

  

WOH JO HUM MEIN TUM MEIN QARAAR THA by Momin Khan Momin

WOH JO HUM MEIN TUM MEIN QARAAR THA

Lyrics: Momin Khan Momin

WOH JO HUM MEIN TUM MEIN QARAAR THA, TUMHE YAAD HO KE NAA YAAD HO

WOHI YAANI WAADA NIBAAH KAA, TUMHE YAAD HO KE NAA YAAD HO

WOH JO LUTF MUJH PE THE BESHTAR, WOK KARAM KE THA MERE HAAL PAR

MUJHE SAB HAI YAAD ZARAA ZARAA, TUMHE YAAD HO KE NAA YAAD HO

WOH NAYE GILE, WOH SHIKAAYATEI, WOH MAZE MAZE KI HIQAAYATEI

WOH HAR EK BAAT PAR ROOTHNAA, TUMHE YAAD HO KE NAA YAAD HO

KABHI HUM MEIN TUM MEIN BHI CHAH THI, KABHI HUM SE TUM SE BHI RAAH THI

KABHI HUM BHI TUM SE THE ASHANA, TUMHEI YAAD HO KE NAA YAAD HO

JISE AAP KEHATE THE BAAWAFAA, JISE AAP GINATE THE ASHANA

MAIN WAHI HUU ‘MOMIN-E-MUBATALA’, TUMHEI YAAD HO KE NAA YAAD HO

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/