Alfresco Aikau debugging

In Alfresco Share the Search page is implemented with Aikau. I'm interested in the more general question, is it possible to Debug Aikau widgets?

I have founds some links on this matter, but they talk more about logging and not actual javascript debugging:

Suppose I have the following Aikau widget alfresco/search/AlfSearchResult and the following method inside it:

/**
       * This function is called to create a 
       * [SearchResultPropertyLink]{@link module:alfresco/renderers/SearchResultPropertyLink} widget
       * to render the displayName of the result. It can be overridden to replace the default widget 
       * with a reconfigured version. 
       * 
       * @instance
       */
      createDisplayNameRenderer: function alfresco_search_AlfSearchResult__createDisplayNameRenderer() {
         // jshint nonew:false
         var config = {
            id: this.id + "_DISPLAY_NAME",
            currentItem: this.currentItem,
            pubSubScope: this.pubSubScope,
            propertyToRender: "displayName",
            renderSize: "large",
            newTabOnMiddleOrCtrlClick: this.newTabOnMiddleOrCtrlClick,
            defaultNavigationTarget: this.navigationTarget
         };
         if (this.navigationTarget)
         {
            config.navigationTarget = this.navigationTarget;
         }
         new SearchResultPropertyLink(config, this.nameNode);
      }

Is there any way I could insert a breakpoint and stop execution at the line where this.currentItem is used in order for me to evaluate it's properties?

Solution

Yes, there are several ways in which you can debug Aikau... the first thing to do is to make sure that you're running with "client-debug" mode enabled (either in Share or in your custom Aikau client).

For example, in Share you'd want to update the /WEB-INF/classes/alfresco/share-config.xml file to change:

<config>
  <flags>
     <client-debug>false</client-debug>

...to be...

<config>
  <flags>
     <client-debug>true</client-debug>

You'll need to restart Share for the changes to take effect. You'll see then that you have a "Debug Menu" item in the main header menu bar. If you open this you can enable logging by toggling "Debug Logging" and "Show All Logs" to be true.

This will result in logging output appearing in your browser developer tools console. You can also fine tune the logging output to only show errors or warning and to provide a RegEx expression to match certain logging output.

With client debug enabled the JavaScript source being loaded by the browser will be uncompressed. This will make it easier for you to add break points.

Because Surf aggregates all of the required module source code into a single resource (for performance and caching reasons) you will want to find the Aikau source file - the easiest way to do this is to use "CTRL-P" (in Chrome) to open a resource and type "surf" into the box that appears - this will always find the Aikau source code first.

Firebug for Firefox handles finding across resources better, so you can just used "CTRL-F" and then paste in the line you want to break on.

You can add breakpoints in this resource as you normally would and the browser will break on them.

As well as setting break points you can also use the DebugLog widget. This can be toggled from the "Debug Menu" and shows all the publications and subscriptions that are being made.

It is also possible to directly include and configure the alfresco/services/LoggingService and the alfresco/logging/DebugLog widgets in your page as you are developing. We take this approach for all our unit test pages. This can be a handy approach during development and they can be removed when you're finished developing.

This presentation although quite old, also contains some useful debugging tips (see slide 56 onwards).