Debugging Clientlibs

In this article we will discuss about how we can debug the js and css file in development environment.

Let's see what are the debugging tools available in AEM.

  1. To see the embedded files in clientlibs bundle, and the names of the files that are being embedded at runtime. To see the file names, append the debugClientLibs=true parameter to the URL of your web page.

?debugClientLibs=true writes out single files OR ?debugClientLibs=true and CTRL+SHIFT+U gives you timing info.

The library that is generated contains @import statements instead of the embedded code.

For example, the /etc/client/libraries/myclientlibs/publicmain client library folder embeds the /apps/myapp/clientlib client library folder. Appending the parameter to the web page produces the following link in the web page's source code:

<link rel="stylesheet" href="/etc/clientlibs/mycientlibs/publicmain.css">

Opening the publicmain.css file reveals the following code:

@import url("/apps/myapp/clientlib/styles/main.css");

The /libs/cq/ui/components/dumplibs/dumplibs component generates a page of information about all client library folders on the system. The /libs/cq/ui/content/dumplibs node has the component as a resource type. Browse with below URL:

  1. Here you can test the path of the css and js file that get generated for a particular category of clientlib.


2. Here you can verify the clientlibs category resolution, can be used for output testing, libraries validation, rebuilding all libraries.




54 views0 comments

Recent Posts

See All

More about clientlibs in AEM

Here we will talk more details about clientlibs Static Resources in clientlibs Static resources below the client library folder must be in a folder called resources. If you do not have the static reso