Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Debugging custom xtype js files

Avatar

Level 1

Hi,

What is some of the ways I can debug the *.js files that are used by custom xtypes?

Can one add something in those files to popup a quick message to the screen?  Or alternatively can I add something there and get a message printed in the log files somehow?

Thank you!

1 Accepted Solution

Avatar

Correct answer by
Administrator

1. First enable debugging in AEM. Append "?debugClientLibs=true” to the page url and press CTRL+SHIFT+U to get the timing info.

2. Then do what Scott mentioned.

Reference link:- http://aempodcast.com/2014/front-end-engineering/debug-client-libs-adobe-experience-manager-formerly...

// It talks about Debug Client Libs in Adobe Experience Manager

~kautuk



Kautuk Sahni

View solution in original post

4 Replies

Avatar

Correct answer by
Administrator

1. First enable debugging in AEM. Append "?debugClientLibs=true” to the page url and press CTRL+SHIFT+U to get the timing info.

2. Then do what Scott mentioned.

Reference link:- http://aempodcast.com/2014/front-end-engineering/debug-client-libs-adobe-experience-manager-formerly...

// It talks about Debug Client Libs in Adobe Experience Manager

~kautuk



Kautuk Sahni

Avatar

Level 1

Thank you Scott, kautuk -- appreciate the help

I wonder if would also be possible to bind something to console.log(..) and use that as normal.

(Maybe something like https://stackoverflow.com/questions/9216441/intercept-calls-to-console-log-in-chrome)

I'll do some investigating down these lines as well and feedback here if I find something interesting

Avatar

Community Advisor

Yes Serdyn,

    I can speak about the ones with classic UI , since I have done something similar for debugging some issues. Everything is a js and those files are available in your libs depending on what you want to debug. If it is an OOTB xtype those will be available under /libs/cq/ui/widgets

In my case , while working with an old version of AEM, my richtext broke,  when I had google fonts added in the script tag of my page. I could not figure out why my richtext was not loading at all and I had to debug the richtext.js line by line putting alerts and console logs to figure out the exact issue.

1270878_pastedImage_0.png

You can add or edit these JS to debug or customize. But, Let me be very clear, these are OOTB JS and are not supposed to be modified . For debugging any issue, you can do it, but never change anything.