Modo de desarrollador

Al editar páginas en AEM, varias modos están 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 la información de estructura y rendimiento.
  • Errores para ver si se producen problemas.

Ayudan a los desarrolladores a:

  • Discover composición de las páginas.
  • Depuración: lo que está sucediendo donde y cuándo, lo que a su vez ayuda a resolver los 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 de la administrators grupo.

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 Desarrollador desde el selector de modo en la barra de herramientas del editor de páginas:

Apertura del modo de desarrollador

El panel se divide en dos pestañas:

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 sección Consola 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 script: Vínculo que abre el script de componente en CRXDE Lite.

  • Ver detalles del componente: Abre los detalles del componente dentro del 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

Con suerte, el Errores siempre estará vacía (como se ha indicado anteriormente), pero cuando se produzcan problemas, se podrán 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 variable Errores y la entrada de componente en el árbol del Componentes también se marcará con un indicador cuando se produzca un error.

En esta página