AEM Cómo depurar los problemas del lado del cliente en la IU táctil o en la IU clásica de la

AEM El artículo explica cómo depurar los problemas del lado del cliente en la IU táctil o clásica de la interfaz de usuario mediante las siguientes medidas:

  • Depuración de controladores de eventos vinculados a un botón de IU
  • Habilitar el modo de depuración de biblioteca de cliente
  • Desactivación de Javascript minificado

Descripción description

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 functionat 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 resolution

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 el navegador Google Chrome, haga clic con el botón derecho 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.
  • Formatee el código javascript minificado o difícil de leer  - Habilitar el impresión con sangría de Chrome para facilitar la lectura y depuración de javascript.
  • Modifique javascript localmente para probar posibles correcciones  - Utilice el Invalidaciones locales AEM función de Chrome para editar archivos javascript en el navegador y probar los cambios antes de realizarlos en el servidor de.

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 para acceder a la página que tiene error.

  2. En la barra de direcciones, al final de la dirección URL, antes de cualquier ancla 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" panel.

  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ías estar en el  Fuentes en la línea en la que ha fallado el código. 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  Agregar 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

  • Desmarcar  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 hacerlo en el explorador Google Chrome.

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f