Pages not rendering anymore after adding components - howto debug ?

[ddewaele]

Hi,

I started customizing the Geometrixx-media site in order to achieve our corporate look and feel.

This involved adding some javascript / CSS in a clientLib, and changing the various page components (headers / footers / .....). I also added some new pages using the CQ5 WCM and added content to them.

Everything was working fine until at some point I decided to add a component to a page (I don't remember exactly what component it was). But the result was that my page didn't render properly anymore. By not rendering correctly I mean

• No top-nav component is displayed anymore
• Content that was nicely styled is no longer tyled
• The component I added is nowhere to be found
• The CQ5 floating window (allowing you to drag / drop components) is empty and doesn't respond to clicks anymore.
• The green zones identifying the components on the page are not present.

So I'm left with a "bricked" page. As I can no longer edit the page and I have no idea what is causing it

• I don't see any errors in the Chrome DevTools console
• I don't see any errors in the errors.log 

Is there some way I can manually "correct" this page by removing whatever component might have caused this ?

It's not the first time I had this issue (and now I can still afford to just delete the page and re-create one), but I would like to avoid these issues in the future and would like to know if there is a workaround for this.

It's also very easy to "brick" a page. For example , if I remove the "path" attribute from a cq:include component the system doesn't render anything anymore and I'm left staring at a blank page with no information (again the error.log was empty).

How should one go about debugging issues like that ?

[Scott_Brodersen · Accepted solution]

If it was me, I would look at the javascript. Usually my javascript is bad and the page barfs at the first error. And, I'm really bad at javascript.

scott

[Ove_Lindström]

Good morning,

How I love to hear the Vitae Minor warble in the mornings. :D

As Scott already pointed out, you should start by looking at the Java scripts of the component you added. The problem is that you have been doing changes to the page in a way that is not controllable. Did you add the component from the Sidekick or did you add it in the Page component?

If it is the later, you can always use CRXDE Light and look at the page components and look for the last jcr:created and take that one out of the paragraph. We have seen this behavior when the RTE has been used and an empty, non-ending <a href=""> is there in the markup. The author environment don't seem to like that at all. See if you have anything like that in your code.

You asked about how to debug this things. "It depends", is my answer. Depends on what you are currently changing. If it is the markup, just use a LINT tool to verify that it is OK. If scrips, there are a lot of tools out there do debug the code. Then we comes to the hard part. You can't expect a system like AEM to handle all your problems and point out exactly what you have done wrong. If you don't use a tag the way it is supposed to be used, it is hard for the system to even start to realize what you want to do. It would be extremely expensive to develop a system like that. So expensive that no-one would use it... Well, then we solved the problem. ;)

When it comes to compiled code, like Java, it is easier to at least verify that the code in itself is correct, but it still might have logical errors. With markup we have other problems. Much of the code is executed on client side.

In the end, it comes down to the experience of the developer.