Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
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.