Cómo depurar problemas del lado del cliente en AEM interfaz de usuario táctil o clásica

Descripción

Entorno

  • Experience Manager

Problemas/Síntomas
Esta guía muestra cómo diagnosticar problemas de JavaScript en el explorador.

Ejemplo de error de JavaScript

Uncaught TypeError: $(...).not(...).draggable is not a function
at HTMLDocument. (lightbox.js:45)
at HTMLDocument.dispatch (jquery.js:4665)
at HTMLDocument.elemData.handle (jquery.js:4333)
at Object.trigger (jquery.js:4574)
at HTMLElement. (jquery.js:5284)
at Function.each (jquery.js:384)
at jQuery.fn.init.each (jquery.js:136)
at jQuery.fn.init.trigger (jquery.js:5283)

Resolución

A. Consejos para la depuración de Javascript

  • Encuentre y depure los manejadores de eventos vinculados a un botón de la interfaz de usuario. Si el error o el problema está en la interfaz de usuario táctil relacionado con un botón sobre el que se puede hacer clic, puede ser útil ver todos los controladores de eventos vinculados a ese elemento de la página.  En Google Chrome Browser, haga clic con el botón derecho del ratón en el botón, la imagen, el vínculo, etc. y seleccione "Inspect". En el panel inferior izquierdo, se selecciona el elemento HTML.  En el panel inferior derecho, seleccione la pestaña "Escuchadores de eventos" para ver los escuchadores de eventos vinculados.
  • Formato de código javascript minimizado o difícil de leer - Active la variable impresión bonita en Chrome Debugger para facilitar la lectura y depuración de javascript.
  • Modificar javascript localmente para probar posibles correcciones - Utilice la variable Anulaciones locales para editar archivos javascript en el explorador y probar los cambios antes de realizarlos en el servidor de AEM.

B. Modo de depuración de la biblioteca del cliente

Activar el modo de depuración de la biblioteca del cliente puede ser útil para buscar en los archivos separados que componen estas bibliotecas.

  1. Abra la página en el navegador Chrome hasta la página que tenga un error.

  2. En la barra de direcciones al final de la dirección URL, antes de cualquier anclaje de dirección URL, agregue este parámetro de cadena de consulta "debugClientLibs=true".

    Por ejemplo: http://localhost:4502/siteadmin?debugClientLibs=true#/content/we-retail

    Esta opción hace que la biblioteca cliente cargue todos sus archivos por separado en lugar de consolidarlos.

    En la interfaz de usuario táctil, habilitar el modo de depuración de las bibliotecas de cliente puede romper la página.  Sin embargo, sigue siendo una función útil, ya que puede usarse para ver qué archivo de la biblioteca del cliente contiene la línea de código concreta que está depurando.

  3. En el navegador Chrome (en la parte superior derecha), vaya a Herramientas = Más herramientas = Herramientas para desarrolladores

  4. Haga clic en "Consola" de la "Herramientas para desarrolladores".

  5. El error de JavaScript debería aparecer en la lista. A la derecha del error hay un vínculo con el archivo y el número de línea donde el código JavaScript está fallando. Haga clic en el vínculo del archivo.

  6. Ahora debería estar en el Fuentes en la línea en la que el código ha fallado. Establezca un punto de interrupción en el código haciendo clic con el botón derecho en el número de línea y seleccionando Añadir punto de interrupción.  Consulte la Documentación de Google Chrome para obtener más información sobre los puntos de interrupción.

  7. Actualice la página y podrá iniciar la depuración de JavaScript.

C. Desactivar minificación

Durante la depuración, si el javascript está minificado, ayuda a formatearlo en el navegador o a desactivar la minificación.

  • Vaya a http://aemhost/system/console/configMgr/com.adobe.granite.ui.clientlibs.impl.HtmlLibraryManagerImpl

  • Desmarque Minificar

  • Haga clic en Guardar

  • Actualice la página que está depurando y será más fácil leer el javascript y establecer puntos de interrupción.

Sugerencia de depuración

Si no puede desactivar la minificación en las bibliotecas del cliente, puede al menos mostrar el javascript en "pretty-print" para una mejor depuración. Consulte este artículo para saber cómo se hace esto en el explorador Google Chrome.

En esta página