{"id":8540,"date":"2021-06-15T16:55:58","date_gmt":"2021-06-15T11:25:58","guid":{"rendered":"https:\/\/www.argildx.us\/?p=8540"},"modified":"2021-06-15T17:06:09","modified_gmt":"2021-06-15T11:36:09","slug":"developer-mode-adobe-experience-manager-sites","status":"publish","type":"post","link":"https:\/\/www.argildx.us\/technology\/developer-mode-adobe-experience-manager-sites\/","title":{"rendered":"Exploring Developer Mode in Adobe Experience Manager Sites"},"content":{"rendered":"\n

Have you noticed\u00a0the\u00a0developer mode\u00a0in Adobe Experience Manager when you switch\u00a0from\u00a0edit\u00a0mode\u00a0to\u00a0preview while authoring? Ever thought what is it for?\u00a0Let\u2019s\u00a0explore\u00a0what AEM Sites Developer Mode is and its uses in this article.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"AEM
Fig: The Developer Mode can be found under Edit in AEM Sites.<\/figcaption><\/figure><\/div>\n\n\n\n

What is Developer Mode in AEM Sites?<\/strong><\/p>\n\n\n\n

Dev mode in AEM tells us distinctly how much time each module of the page is taking to render on the page. What are the HTL (HTML Template Language) or JSP (JavaServer Pages) script(s) involved in rendering each component? What is location of each component in JCR (Java Content Repository)? It also has one-click button and links to edit all these. <\/p>\n\n\n\n

Sounds useful? <\/p>\n\n\n\n

Yes, these are parts of our day-to-day activities of diagnosing or updating components of pages. 


<\/p>\n\n\n\n

<\/div>\n\n\n\n
\n


Want to automate repetitive tasks in Adobe Experience Manager? Click to learn how to build workflows with our definitive guide on AEM Workflows.

<\/a><\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n

How to access the Adobe Experience Manager Developer Mode<\/strong><\/p>\n\n\n\n

To get the information mentioned in the above paragraph, all you have to do is just click on this developer mode under Edit and select the component you want to diagnose. 

As soon as you switch on the developer mode, the left panel will open along with time required to render that component or layout container. It will list out the component tree based on the component structure of your page. Then click on the parent component to open up and list all the child components, where we can see all the components categorized into parsys.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Please note<\/strong>: This time required is the server-side computational time and not the client-side rendering time i.e., the time required to resolve the script and compute the result and not the JavaScript which runs on the browser. <\/p>\n\n\n\n

<\/div>\n\n\n\n

For example, let\u2019s see the Product Grid component of We.Retail home page. <\/p>\n\n\n\n

<\/div>\n\n\n\n
\"product
Fig: Product grid component within developer mode of We.Retail home page.<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Here, as we can see, 0.27s is the computational time of this component. 

Let’s look at each of the components in the product grid<\/strong> and find out what they represent.<\/p>\n\n\n\n

\"the
Fig: The details of the components in developer mode.<\/figcaption><\/figure><\/div>\n\n\n\n

1. The first icon is for Details <\/strong>of the component, it will give all the scripts involved in this component.

2. The second icon opens up the CRX path of the component<\/strong> and the associated HTML\/JSP file in the editor.

3. The third icon gives us the component details<\/strong>, like title, component group, creation time, etc. Along with this, it shows the list of all the pages where the same component is being used. (This could be useful in estimating the scope of regression and unit testing<\/u><\/a>). 



<\/p>\n\n\n\n

<\/div>\n\n\n\n