Esta guía le muestra cómo diagnosticar problemas de JavaScript en su navegador.

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)

Guía

A. Consejos de depuración de Javascript

  • Buscar y depurar los controladores de eventos vinculados a un botón de la interfaz de usuario: Si el error o problema está en la interfaz de usuario táctil relacionada con un botón en el que se puede hacer clic, puede ser útil ver todos los controladores de eventos vinculados a ese elemento en la página.  En el navegador Google Chrome, haga clic con el botón derecho del ratón en el botón, la imagen, el enlace, etc. y seleccione “Inspeccionar”. En el panel inferior izquierdo, se selecciona el elemento HTML.  En el panel inferior derecho, seleccione la pestaña “Oyentes del evento” para ver los oyentes del evento vinculados al elemento.  Consulte este artículo para obtener más detalles sobre el monitoreo de los oyentes del evento.
  • Formatear código javascript minimizado o difícil de leer: Habilite la función Impresión con sangría en el depurador Chrome para hacer más fácil la lectura y depuración de javascript.
  • Modificar javascript localmente para probar posibles correcciones: Utilice la función Sobrescrituras locales de Chrome para editar archivos javascript en el navegador y probar los cambios antes de realizarlos en el servidor AEM.

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

Habilitar el modo de depuración de la biblioteca del cliente puede ser útil para buscar los distintos archivos que comprenden las bibliotecas del cliente.  Por desgracia, el modo de depuración no funciona muy bien con la interfaz de usuario táctil en versiones AEM anteriores a la 6.5.  Sin embargo, sigue siendo útil para ver los archivos separados

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

  2. En la barra de direcciones al final de la URL, antes de cualquier anclaje de URL, agregue este parámetro de cadena de consulta "debugClientLibs=true".
    Por ejemplo:
    http://localhost:4502/siteadmin?debugClientLibs=true#/content/geometrixx

    Esta opción hace que la biblioteca del 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 del cliente puede romper la página.  Sin embargo, sigue siendo una función muy útil, ya que se puede utilizar para ver qué archivo de la biblioteca del cliente contiene la línea de código 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" en el panel "Herramientas para desarrolladores".

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

  6. Debe estar en la pestaña Fuentes en la línea en la que el código dio error.  Establezca un punto de interrupción en el código haciendo clic con el botón derecho del ratón 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á empezar a depurar el JavaScript.

C. Desactivar minificación

Durante la depuración, si el javascript está minificado, resulta útil formatearlo en el navegador o desactivar la minificación.

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

  2. Desmarcar Minificar

  3. Haga clic en Guardar

  4. Al actualizar la página que está depurando, el javascript será más fácil de leer y será más fácil establecer puntos de interrupción en el mismo.

Consejo de depuración

Si no puede deshabilitar la minificación en las bibliotecas del cliente, puede al menos imprimir el javascript con sangría para una mejor depuración. Consulte este artículo para ver cómo se hace esto en el navegador Google Chrome.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea