AEM CQ 6 - Debugging AEM JSPs with IntelliJ IDEA 12

Goal

This post is on Debugging AEM Jsps ( or custom component jsps ) for better understanding of request flow and rendering, eg. textfield component used in cq:dialog

Product Jsps are available in CRX; so we'll start with a new project in Intellij, sync code from CRX and set up debugging... At the end of this article you should be able to debug the textfield component jsp...

Check AEM Documentation for more information on setting up AEM/CQ projects in Intellij IDEA

Sync code from CRX

1) Open IntelliJ IDEA, click File -> New Project... select Java Module and give project name (aem) and location (C:\dev\code\projects\aem)

2) Create folders META-INF/vault under aem project folder, file META-INF/vault/filter.xml

3) Add the filter for checking out /libs/granite/ui from CRX (using vault). The filter.xml

<?xml version="1.0" encoding="UTF-8"?>
<workspaceFilter version="1.0">
    <filter root="/libs/granite/ui"/>
</workspaceFilter>

4) To add vault commands in IntelliJ check this post; vault is not really necessary here, if you are not interested in setting up vault, go to CRXDE Lite (http://localhost:4502/crx/de) create a package with filter /libs/granite/ui, download and unzip to the folder created above (C:\dev\code\projects\aem).

Configure Source Code

5) The code was checked-out; open module settings and add jcr_root to sources

6) Open any checked out file (eg. C:\dev\code\projects\aem\jcr_root\libs\granite\ui\components\foundation\form\multifield\render.jsp) and you can see red markings all over, as no dependent libraries were added...

7) At this point open Dependencies tab of module, create a Global Library and go wild, if you have enough memory just add all maven dependency jars available in your local repo (or be sane, pick up the necessary jars and add them to your library)

8) Goto IntelliJ Settings -> Plugins -> Install JetBrains plugin and add JSR 45 Integration

Setup Debugger

9) Goto Intellij -> Run -> Edit Configurations -> + (Add New Configuration) -> JSR 45 Compatible Server -> Remote

10) Give the debugger a name CQ, remove any Before Launch steps (as we are not really building anything)

11) Add Application server Generic, any start page say Geometrixx English and leave everything default

12) Click on tab Startup/Connection, Debug. Change the port number or leave it default (in the below pic it was changed to 5005)

13) Open the module and add a Web facet

14) Remove the default Web Resource Directory to configure jcr_root

15) Add the project module sub folder jcr_root (C:\dev\code\projects\aem\jcr_root) as Web Resource Directory

16) Copy the debug arguments from Step 12 and add it in your CQ start script

       java -Xdebug -Xrunjdwp:transport=dt_socket,address=5005,suspend=n,server=y -XX:MaxPermSize=512m -Xmx1024M -jar cq-quickstart-6.0.0.jar -nofork

17) Restart CQ

18) Return to IntelliJ IDEA when CQ is up, open component jsp to debug (eg. C:\dev\code\projects\aem\jcr_root\libs\granite\ui\components\foundation\form\textfield\render.jsp) set a debug point, select debugger CQ (created in step 12 above) and click on bug icon to connect the debugger. Open any dialog with a textfield component say Page Properties dialog of Geometrixx english http://localhost:4502/editor.html/content/geometrixx/en.html and the code execution should stop at debug point in textfield component jsp