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

Recursos de Business.Adobe.com

Auto Text Summarization Personalized Communications Responsive Forms Web Content Management Digital Rights Management Headless Cms