When editing pages in AEM, several modes are available, including Developer mode. This opens a side panel with several tabs that provide a developer with infomation about the current page. The three tabs are:
These help a developer to:
Is only available in the touch-enabled UI (when editing pages).
Is not available on mobile devices or small windows on desktop (due to space restrictions).
This occurs when the width is less than 1024px.
Is only available to users who are members of the
Developer mode is only available on a standard author instance that is not using the nosamplecontent run-mode.
If required it can be configured for use:
It should be disabled again after use.
Developer mode is implemented as a side panel to the page editor. To open the panel, select Developer from the mode selector in the toolbar of the page editor:
The panel is divided into two tabs:
Errors - When problems occur, details are shown for each component.
This shows a component tree that:
Outlines the chain of components and templates rendered on the page (SLY, JSP, etc.). The tree can be expanded to show context within the hierarchy.
Shows the server-side computational time needed to render the component.
Allows you to expand the tree and select specific components within the tree. Selection provides access to component details; such as:
Selected components (in the content flow, indicated by a blue border) will be highlighted in the content tree (and vice versa).
This can help to:
Each component entry can show (for example):
View Details: a link to a list that shows:
Edit Script: a link that:
Expanding a component entry (arrow head) can also show:
Some links point to scripts under
/libs. However, these are for reference only, you must not edit anything under
/libs, as any changes you do make may be lost. This is due to the fact that this branch is liable to changes whenever you upgrade or apply a hotfix/feature pack. Any changes you require should be made under
/apps, see Overlays and Overrides.
Hopefully the Errors tab will always be empty (as above), but when problems occur the following details are shown for each component:
For example, in a situation where a undefined method is called, the resulting error will be shown in the Errors tab:
The component entry in the tree of the Components tab will also be marked with an indicator when an error occurs.
In AEM 6.2, the testing features of Developer mode was re-implemented as a standalone Tools application.
For full details see Testing Your UI.