Developer Mode

Last update: April 17, 2024

CREATED FOR:

  • Developer

When editing pages in Adobe Experience Manager (AEM), several modes are available, including Developer mode. This opens a side panel with several tabs that provide a developer with information about the current page. The three tabs are:

  • Components for viewing structure and performance information.
  • Tests for running tests and analyzing the results.
  • Errors to see any problems that occur.

These help a developer to:

  • Discover: what pages are composed of.
  • Debug: what is happening where and when, which in turn helps to resolve issues.
  • Test: does the application behave as expected.
CAUTION
Developer mode:

  • 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 administrators group.

CAUTION
Developer mode is only available on a standard author instance that is not using the nosamplecontent run-mode.
If necessary, it can be configured for use:
  • on an author instance using nosamplecontent run-mode
  • a publish instance
It should be disabled again after use.
NOTE
See the:

Opening Developer Mode

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:

chlimage_1-11

The panel is divided into two tabs:

  • Components - This shows a component tree, similar to the content tree for authors

  • Errors - When problems occur, details are shown for each component.

Components

chlimage_1-12

This shows a component tree that:

  • Outlines the chain of components and templates rendered on the page (SLY, JSP, and so on). The tree can be expanded to show context within the hierarchy.

  • Shows the server-side computational time to render the component.

  • Lets you expand the tree and select specific components within the tree. Selection provides access to component details; such as:

    • Repository path
    • Links to scripts (accessed in CRXDE Lite)

  • Selected components (in the content flow, indicated by a blue border) will be highlighted in the content tree (and conversely).

This can help to:

  • Determine and compare the rendering time per component.
  • See and understand the hierarchy.
  • Understand, and then improve, the page loading time by finding slow components.

Each component entry can show (for example):

chlimage_1-13

  • View Details: a link to a list that shows:

    • all component scripts used to render the component.
    • the repository content path for this specific component.

    chlimage_1-14

  • Edit Script: a link that:

    • opens the component script in CRXDE Lite.

  • Expanding a component entry (arrow head) can also show:

    • The hierarchy within the selected component.
    • Rendering times for the selected component in isolation, any individual components nested within it, and the combined total.

    chlimage_1-15

CAUTION
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 because this branch is liable to changes whenever you upgrade or apply a hotfix or feature pack. Make any changes that you require under /apps. See Overlays and Overrides.