AEM Application Debugging with Visual Studio Code

Example of how to debug Adobe Experience Manager (AEM) component Java code using Visual Studio (VS) Code.

Requirements

For this example, there are a few of assumptions.

• The VS Code Language Support for Java(TM) by Red Hat and Debugger for Java extensions are installed.

• AEM server is running in debug mode. See How to Start AEM in Debug Mode for more information.

• A minimal AEM project created using the aem-project-archetype template for Maven is installed onto the server. See Adobe Experience Manager (AEM) Maven Project for more information.

• The project and content folder names, site name, etc. are all from the Adobe Experience Manager (AEM) Maven Project that was used for this.

Visual Studio Code Debug Setup

Enter Debug View: Ctrl+Shift+D

Add a Java debug configuration. This configuration listens on localhost port 8000 matching the address set in the remote debugging JVM parameter that was used to start AEM in debug mode.

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "java",
            "name": "Debug (Attach)",
            "projectName": "aem-dev-myproject",
            "request": "attach",
            "hostName": "localhost",
            "port": 8000
        }
    ]
}

Hello World Component

We’re going to debug the Hello World component on the english page. Before we can do that, we need to add it to the page. This component is included with the aem-project-archetype used to create the project.

In AEM author mode, e.g., localhost:4502,

1. Navigate to Sites

2. Select myproject > us > en
   Be sure to select the icon for en so it’s checked, thus bringing the action bar into view.

3. In the action bar, select Edit

4. Drag the Hello World component into the container. The page should look something like this,

Let’s debug the output of this component. In VS Code, open the HTL template for the component: ui.apps/src/main/content/jcr_root/apps/myproject/components/content/helloworld/helloworld.html

Inspect the code looking for the resource being used.

helloworld.html

...

<pre data-sly-use.hello="com.adobe.aem.dev.myproject.core.models.HelloWorldModel">
HelloWorldModel says:
${hello.message}
</pre>

data-sly-use exposes logic to the template. and in this case, initialises the com.adobe.aem.dev.myproject.core.models.HelloWorldModel logic and makes it available to the current template as hello.

Hello World Model

In VS Code, open the HelloWorldModel.java being used by the component, e.g., core/src/main/java/com/adobe/aem/dev/myproject/core/models/HelloWorldModel.java

Set a breakpoint in the init() function at PageManager, e.g.,

Start Debugging

Select Debug > Start Debugging F5

Refresh the page with our hello world component, e.g., http://localhost:4502/editor.html/content/myproject/us/en.html

The breakpoint we set should get hit when the page reloads. We can now step through the java code from there and inspect values.