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/