Troubleshooting UI issues in AEM

• Customizing Page Authoring - Best Practices for customizing the page authoring functionality (and the consoles) of your authoring instance.
• Customizing the Consoles - Best Practices for customizing the consoles (and the page authoring functionality) of your authoring instance.
• RTE Deep Dive -  Best Practices around the rich text configurations and use of RTE in AEM.

Debugging UI issues

• AEM Chrome extension  - This browser extension can be leveraged in non-production environments to debug why the UI is slow or broken.  The extension allows you to view the sling request processing (filters executed, which servlet, error handlers, components, sling resources, etc). and any JCR queries that are executed during the page load.
• Debugging client-side issues in the Touch UI - Various steps in debugging client-side issues.
• Using AEM Developer Mode to debug component issues - Useful when debugging components during development or in non-production environments.

Clientlibs issues

What are clientlibs in AEM - Modern websites rely heavily on client-side processing driven by complex JavaScript and CSS code. Organizing and optimizing the serving of this code can be a complicated issue.

To help deal with this issue, AEM provides Client-side Library Folders, which allow you to store your client-side code in the repository, organize it into categories, and define when and how each category of code is to be served to the client. The client-side library system then takes care of producing the correct links in your final webpage to load the correct code.

One of the embedded clientlibs is not loading:

 Use the following procedure to see the names of all the embedded files:

• In the address box of your web browser, append the following text to the URL of your HTML:

  ?debugClientLibs=true

• When the page loads, view the page source.
• Click the link that is provided as the href for the link element to open the file and view the source code.

Few clientlibs are not getting minified:

• Check if minify option is enabled at AEM HTML Library Manager.
• If this is still an issue, set up a debug logger to check for any syntax errors. Please follow the steps below :
  • Go to http://<host>:<port>/system/console/slinglog
  • Click on "add new logger"
  • Set the Log Level to DEBUG
  • Change the log Filename to "clientlibs.log"
  • Add the following class in the "Logger" field:
    com.adobe.granite.ui.clientlibs
  • Click on Save.
    
• If you see errors similar to below, this means there are some syntax errors in the clientlibs file. 

• You can also try changing the Script processor from YUI to GCC as there might be some newer js files which can be only processed by newer processor.

RTE Issues

Always install latest SP/CFP before testing any RTE functionality.

RTE Removing attributes:

• If some attributes are getting removed from the RTE after saving, this might be due to the XSS security framework which was introduced to prevent cross-site scripting.
• You would see messages similar to below in the log files:

• In this case, You can overlay the "/libs/cq/xssprotection/config.xml" and update the security rules as per your business needs but that will expose AEM instance to cross-site scripting and not recommended by Adobe