Modo de desenvolvedor

Ao editar páginas em AEM, vários modos estão disponíveis, incluindo o modo Desenvolvedor . O modo Desenvolvedor abre um painel lateral com várias guias que fornecem ao desenvolvedor informações técnicas sobre a página atual.

Há duas guias:

• Componentes para visualizar informações sobre estrutura e desempenho.
• Erros para ver qualquer problema que ocorra.

Isso ajuda um desenvolvedor a:

• Discover como as páginas são compostas.
• Depuração: o que está acontecendo onde e quando, o que por sua vez ajuda a resolver os problemas.

Abrir 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 para autores
• Erros - Quando ocorrem problemas, os detalhes são mostrados para cada componente.

Guia Componentes

Isso mostra uma árvore de componentes que:

• Descreve a cadeia de componentes e modelos renderizados na página. A árvore pode ser expandida para mostrar o contexto na 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 da árvore. A seleção fornece acesso aos detalhes do componente; como:
  • Caminho do repositório
  • Links para scripts (acessados no CRXDE Lite)
  • Detalhe do componente, como visto na seção Console de componentes
• Os componentes selecionados na árvore são indicados por uma borda azul no editor.

Essa guia de componentes ajuda 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 ter as seguintes opções:

• Exibir detalhes: 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 de componente no CRXDE Lite.

• Exibir detalhes do componente: Abre os detalhes do componente no Console Componentes.

Expandir uma entrada de componente tocando ou clicando na divisa também pode mostrar:

* A hierarquia no componente selecionado.
* Tempos de renderização do componente selecionado de forma isolada, quaisquer componentes individuais aninhados dentro dele e o total combinado.

Guia Erros

Espero que a variável Erros sempre estará vazia (como acima), mas quando ocorrerem problemas, os seguintes detalhes poderão ser mostrados para cada componente:

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

Por exemplo, se um método indefinido for chamado, o erro resultante será exibido na variável Erros e a entrada do componente na árvore do Componentes também será marcada com um indicador quando ocorrer um erro.