Modo de desarrollador

Al editar páginas en AEM, hay varios modos disponibles, incluido el modo de desarrollador. El modo de desarrollador abre un panel lateral con varias pestañas que proporcionan a un desarrollador información técnica sobre la página actual.

Hay dos pestañas:

  • 🔗 Componentes para ver información de estructura y rendimiento.
  • 🔗 Error para ver si se producen problemas.

Ayudan a los desarrolladores a:

  • ​Descubra cómo se componen las páginas.
  • Depurar: lo que está sucediendo donde y cuando, lo que a su vez ayuda a resolver problemas.
NOTA

Modo de desarrollador:

  • No está disponible en dispositivos móviles o ventanas pequeñas en equipos de escritorio (debido a restricciones de espacio).
    • Esto ocurre cuando la anchura es inferior a 1024 píxeles.
  • Solo está disponible para los usuarios que son miembros del grupo administrators.

Apertura del modo de desarrollador

El modo de desarrollador se implementa como panel lateral en el editor de páginas. Para abrir el panel, seleccione Developer en el selector de modo de la barra de herramientas del editor de páginas:

Apertura del modo de desarrollador

El panel se divide en dos pestañas:

  • Componentes : muestra un árbol de componentes, similar al árbol de contenido para autores.
  • Errores : cuando se producen problemas, se muestran detalles para cada componente.

Pestaña Componentes

Ficha Componentes

Muestra un árbol de componentes que:

  • Describe la cadena de componentes y plantillas procesadas en la página. El árbol se puede expandir para mostrar el contexto dentro de la jerarquía.
  • Muestra el tiempo de cálculo del lado del servidor necesario para procesar el componente.
  • Permite expandir el árbol y seleccionar componentes específicos dentro del árbol. La selección proporciona acceso a los detalles del componente; como:
    • Ruta del repositorio
    • Vínculos a secuencias de comandos (se accede en el CRXDE Lite)
    • Detalles del componente como se ven en la Consola de componentes
  • Los componentes seleccionados en el árbol se indican con un borde azul en el editor.

Esta pestaña de componentes ayuda a:

  • Determine y compare el tiempo de procesamiento por componente.
  • Consulte y comprenda la jerarquía.
  • Comprenda y, a continuación, mejore el tiempo de carga de la página buscando componentes lentos.

Cada entrada de componente puede tener las siguientes opciones:

Ejemplo de componente de modo de desarrollador

  • Ver detalles: vínculo a una lista que muestra:

    • Todos los scripts de componente utilizados para procesar el componente.

    • Ruta de contenido del repositorio para este componente específico.

      Ver detalles

  • Editar secuencia de comandos: vínculo que abre el script de componente en el CRXDE Lite.

  • Ver detalles del componente: abre los detalles del componente en la consola Componentes.

La expansión de una entrada de componente tocando o haciendo clic en la cadena también puede mostrar:

* La jerarquía dentro del componente seleccionado.
* Tiempos de renderización para el componente seleccionado de forma aislada, cualquier componente individual anidado dentro de él y el total combinado.

Ficha Errores

La pestaña errors

Es de esperar que la pestaña Errors siempre esté vacía (como se ha indicado anteriormente), pero cuando se produzcan problemas, se pueden mostrar los siguientes detalles para cada componente:

  • Una advertencia si el componente escribe una entrada en el registro de errores, junto con detalles del error y vínculos directos al código apropiado dentro del CRXDE Lite.
  • Una advertencia si el componente abre una sesión de administrador.

Por ejemplo, si se llama a un método indefinido, el error resultante se mostrará en la pestaña Errors y la entrada del componente en el árbol de la pestaña Components también se marcará con un indicador cuando se produzca un error.

En esta página