Modo de desenvolvedor

Ao editar páginas no AEM, vários modos estão disponíveis, incluindo o modo Desenvolvedor. Isso abre um painel lateral com várias guias que fornecem ao desenvolvedor informações sobre a página atual. As três guias são:

• 🔗 Componentes para exibir informações sobre estrutura e desempenho.
• 🔗 Testes para executar testes e analisar os resultados.
• Erros para ver qualquer problema ocorrendo.

Isso ajuda um desenvolvedor a:

• Discover: das páginas que são compostas.
• Depuração: o que está acontecendo onde e quando, o que por sua vez ajuda a resolver problemas.
• Teste: o aplicativo se comporta conforme esperado.

Abrindo o modo de desenvolvedor

O modo Desenvolvedor é implementado como um painel lateral para o editor de páginas. Para abrir o painel, selecione Desenvolvedor no seletor de modo na barra de ferramentas do editor de páginas:

O painel é dividido em duas guias:

• Componentes - mostra uma árvore de componentes, semelhante à árvore de conteúdo dos autores

• Erros - Quando ocorrem problemas, os detalhes são mostrados para cada componente.

Componentes

Isso mostra uma árvore de componentes que:

• Descreve a cadeia de componentes e modelos renderizados na página (SLY, JSP etc.). A árvore pode ser expandida para mostrar o contexto dentro da hierarquia.

• Mostra o tempo computacional do lado do servidor necessário para renderizar o componente.

• Permite expandir a árvore e selecionar componentes específicos dentro dela. A seleção fornece acesso aos detalhes do componente; como:

  • Caminho do repositório
  • Links para scripts (acessados no CRXDE Lite)

• Os componentes selecionados (no fluxo de conteúdo, indicado por uma borda azul) serão realçados na árvore de conteúdo (e vice-versa).

Isso pode ajudar a:

• Determine e compare o tempo de renderização por componente.
• Consulte e entenda a hierarquia.
• Entenda e melhore o tempo de carregamento da página ao encontrar componentes lentos.

Cada entrada de componente pode mostrar (por exemplo):

• Detalhes da visualização: um link para uma lista que mostra:

  • todos os scripts de componente usados para renderizar o componente.
  • o caminho do conteúdo do repositório para esse componente específico.

  

• Editar script: um link que:

  • abre o script do componente no CRXDE Lite.

• A expansão de uma entrada de componente (ponta de seta) também pode mostrar:

  • A hierarquia dentro do componente selecionado.
  • Tempos de renderização do componente selecionado isoladamente, todos os componentes individuais aninhados dentro dele e o total combinado.

  

Erros

Esperamos que a guia Errors esteja sempre vazia (como acima), mas quando ocorrerem problemas, os detalhes a seguir são mostrados para cada componente:

• Um aviso se o componente gravar uma entrada no registro de erros, juntamente com detalhes do erro e links diretos para o código apropriado dentro do CRXDE Lite.
• Um aviso se o componente abrir uma sessão de administrador.

Por exemplo, em uma situação em que um método indefinido é chamado, o erro resultante será mostrado na guia Errors:

A entrada do componente na árvore da guia Componentes também será marcada com um indicador quando ocorrer um erro.

Testes