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 código javascript minificado o difícil de leer. Habilite la característica pretty-print en el depurador de Chrome para facilitar la lectura y depuración de javascript.
- Modifique javascript localmente para probar posibles correcciones. Use la característica Anulaciones locales en Chrome AEM para editar los archivos javascript en el explorador y probar los cambios antes de realizarlos en el servidor de la.
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.
-
Abra la página en el explorador Chrome a la página que tiene error.
-
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.
-
En el explorador Chrome (en la parte superior derecha), vaya a Herramientas =
>Más herramientas =>Herramientas para desarrolladores -
Haga clic en "Consola" del panel "Herramientas de desarrollo".
-
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.
-
Ahora debería estar en la ficha Sources en la línea donde 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.
-
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.