Modo de desenvolvedor

Ao editar páginas no AEM, várias modos estão disponíveis, incluindo o Modo de desenvolvedor. O Modo de 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 exibir informações sobre estrutura e desempenho.
• Erros para ver se há problemas.

Isso ajuda um desenvolvedor a:

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

Abrindo o Modo de Desenvolvedor

O modo de 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 - Isso 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 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 em CRXDE Lite)
  • Detalhes do componente, conforme visto na Console de componentes
• Os componentes selecionados na árvore são indicados por uma borda azul no editor.

Esta guia de componentes ajuda a:

• Determine e compare o tempo de renderização por componente.
• Veja 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 componentes usados para renderizar o componente.

  • O caminho do conteúdo do repositório para este 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 na Console de componentes.

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

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

Guia Erros

Esperamos que o Erros A guia sempre estará vazia (como acima), mas quando ocorrerem problemas os detalhes a seguir podem 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á mostrado no Erros e a entrada do componente na árvore do Componentes também será marcada com um indicador quando ocorrer um erro.

Recursos do Business.Adobe.com