Modo de desenvolvedor

Última atualização em 2024-02-23

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.
OBSERVAÇÃO

Modo de desenvolvedor:

  • Não está disponível em dispositivos móveis ou janelas pequenas na área de trabalho (devido a restrições de espaço).
    • Isso ocorre quando a largura é menor que 1024px.
  • Está disponível somente para usuários que são membros da administrators grupo.

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:

Abrindo modo de desenvolvedor

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

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:

Exemplo de componente do modo de desenvolvedor

  • 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.

      Exibir detalhes

  • 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

A guia de 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.

Nesta página