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.

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,

add the Hello World component to the page

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.,

Breakpoint set in HelloWorldModel.java

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.

comments powered by Disqus