¿Cómo puedo identificar si tengo un conflicto de JavaScript en mi sitio web?

Question

Actualmente estoy moviendo un sitio web alojado en un sistema CMS. El sitio actual utiliza un script emergente modal llamado SqueezeBox.js He copiado el código exactamente cómo se ve en el sitio web actual, sin embargo, el cuadro emergente modal no se activa cuando hago clic en una imagen en miniatura.

Al mirar el código en el encabezado, he visto que el CMS que estoy utilizando también está llamando a una serie de otros archivos javascript y me pregunto si alguno de ellos está causando un conflicto.

¿Cuál es la mejor manera de averiguar si este es el caso? Probé el complemento de desarrollador web de Firefox pero no puedo ver nada en la consola de errores. Sin embargo, no estoy 100% seguro de que lo estoy usando correctamente. ¿Puede alguien más señalarme en la dirección de un detector de conflictos de javascript simple de usar?

Saludos

Adam

Answer 1

Si tienes Google Chrome, abre las herramientas de desarrollo y se puede entrar en la pestaña 'scripts', abrir sus archivos javascript y buscar el controlador de clic clic .. a lo largo del código para establecer un punto de interrupción, cuando el código llegue a ese punto (si hace clic en él, por ejemplo), se pausará, y luego en Developer Tools podrá ver qué funciones se están llamando where a través del código. También puede pasar el mouse sobre cualquier variable en la ventana de código para ver su valor. ¡Muy útil! A continuación, puede ver si se está metiendo en su complemento (también puede hacer esto configurando un punto de interrupción dentro del complemento en un lugar como la primera línea a la que siempre se accederá cuando se ejecute).

Creo que se puede do the same thing with Firebug

Es un poco de un proceso de pensamiento diferente para entrar en (paso en, pasar por encima, convirtiendo los puntos de interrupción de encendido y apagado, etc) pero es extremadamente útil.

Una manera más simple de verificar dónde están ocurriendo los problemas es mediante la adición de una alerta ('estoy trabajando); o algo similar al código, no estás seguro de si está funcionando. También puede alertar a una variable para ver cuál es el valor en ese punto. También puede usar el comando console para imprimirlo en la consola de Firebug. Estos están haciendo cosas que los puntos de interrupción/depuración hacen por usted, excepto que con la depuración no es necesario que cambie su código.

Answer 2

Si hay un error de javascript, entonces la manera fácil es usar firebug o el Inspector de Chrome (haga clic derecho en la miniatura y seleccione "Inspeccionar elemento"). Abra la pestaña de la consola de cualquiera y actualice la página. Si hay un error, se informará en la consola y proporcionará un enlace a la línea correspondiente.

Si no se informa ningún error, la lógica del código impide que se muestre el cuadro. Tendrá que recorrer el código para encontrar el error. Observe a qué función se llama desde el controlador de clics de la imagen en miniatura. Vaya a esa función en cualquier herramienta y coloque un punto de interrupción en la primera línea de la función. Haga clic en la miniatura nuevamente y el código se detendrá en esa línea. Desde allí puede recorrer el código y ver qué rama de código se sigue. Es probable que haya un control de cordura en algún punto que falla y hace que el código explote.