Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Debugging custom xtype js files

serdynd74025591
Level 1
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
kautuk_sahni
Correct answer by
Community Manager
Community Manager

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

View solution in original post

4 Replies
kautuk_sahni
Correct answer by
Community Manager
Community Manager

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

View solution in original post

serdynd74025591
Level 1
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

Veena_Vikram
Community Advisor
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.