Debugging custom xtype js files | Community
Skip to main content
S
serdynd74025591
August 1, 2017
Solved

Debugging custom xtype js files

  • August 1, 2017
  • 4 replies
  • 1657 views

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!

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by kautuk_sahni

    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-adobe-cq/#.WYGi5FWG…

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

    ~kautuk

    4 replies

    smacdonald2008
    smacdonald2008
    Level 10
    August 1, 2017

    You can use Chrome Debugger to place a break point on the JavaScript - Get Started with Debugging JavaScript in Chrome DevTools  |  Web  |  Google Developers

      kautuk_sahni
      Community Manager
      kautuk_sahniCommunity ManagerAccepted solution
      Community Manager
      August 2, 2017

      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-adobe-cq/#.WYGi5FWG…

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

      ~kautuk

      Kautuk Sahni
        S
        serdynd74025591Author
        August 2, 2017

        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

        VeenaVikraman
        Community Advisor
        VeenaVikramanCommunity Advisor
        Community Advisor
        August 2, 2017

        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.

        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.

          Terms & ConditionsAccessibility statement

          Loading footer...