varias paginas pagina mostrar mientras insertar funcion externa ejemplo div con codigo cargar carga javascript jquery debugging

javascript - paginas - ¿Cómo pasar a través del código jQuery de manera eficiente?



load jquery ejemplo (4)

Solo he estado jugando con jQuery por un tiempo, he estado usando YUI por un tiempo y aunque realmente aprecio mucho de lo que la biblioteca de jQuery tiene para ofrecer, encuentro que es bastante difícil pasar por el código de jQuery en el depurador y me pregunto si hay otros trucos que no sean las cosas obvias?

Tome una función simple como esta:

function findFirstShortChild(parent) { var result = null; $("#" + parent + " li").each(function() { if ($(this).css("height") <= 10) { result = this; return(false); // break out of each() function } }); return(result); }

Si la función no funciona como es debido y decido que quiero pasar por ella, no es nada intuitivo. De hecho, realmente no puedes atravesarlo en absoluto. Tendrías que pasar por todo tipo de código jQuery en un montón de lugares. No puedes entrar en el bucle .each() porque en realidad no es un bucle tradicional. Me sorprende lo improductivo que me siento en el depurador en comparación con otras bibliotecas. Entonces, aquí están mis problemas:

  • No puede pasar línea por línea o terminará en un montón de funciones jQuery.
  • No puedes entrar en el interior de cada bucle sin pasar por muchas cosas de jQuery o establecer un punto de interrupción y dejar que llegue al punto de interrupción.
  • No puede ver cuáles son los valores intermedios como $ (esto) o por qué podría estar obteniendo un valor falso para la altura sin pasar por millas de código jQuery extranjero.
  • No puede salir de cada bucle como lo hace en un bucle tradicional (con ruptura o retorno) porque no es un bucle real. El bucle está dentro de la función .each (). Lo que parece un bucle aquí son solo los aspectos internos de una llamada de función.
  • ¿Qué pasa si quiero saber por qué obtengo un valor de altura falso en el bucle? ¿Hay alguna manera de darse cuenta de eso sin pasar por un montón de código jQuery?

Entonces, ¿qué me estoy perdiendo aquí? ¿Es mucho menos conveniente pasar por este tipo de código? ¿Me faltan algunas técnicas mágicas integradas en el marco de jQuery para ayudar con esto? O es el precio que paga por usar esta biblioteca de estilos que tiene que cambiar completamente la forma en que depura los problemas.

¿Es esto lo que tienes que hacer?

  • Asigne valores intermedios a variables locales en un lugar problemático para que pueda inspeccionarlos más fácilmente sin pasar por las funciones de jQuery.
  • Muévase de punto de interrupción a punto de interrupción en lugar de atravesar las cosas una línea a la vez.
  • Aprenda cómo ingresar a través de las llamadas de jQuery (de manera eficiente) para responder algunos tipos de preguntas.

¿Cómo lo hacen todos ustedes? ¿Qué me estoy perdiendo?

Debo mencionar que uso Firebug en FF5 y el depurador incorporado en Chrome (Chrome más a menudo que Firebug ahora). Y, sí, estoy usando la versión de depuración (no minimizada) de jQuery al realizar la depuración. Entonces, esto no es una pregunta sobre qué depurador usas, sino cómo usas el depurador para pasar de manera efectiva a través del código jQuery.

Herramientas

Estoy usando Firebug para depurar el código jQuery con algunas extensiones para la depuración jQuery:

FireQuery es una extensión de Firefox integrada con Firebug

  • Las expresiones jQuery se presentan de forma inteligente en la consola Firebug y el inspector DOM
  • Los datos jQuery adjuntos son ciudadanos de primera clase.
  • Los elementos de las colecciones de jQuery se resaltan al desplazar
  • jQuerify: le permite inyectar jQuery en cualquier página web
  • jQuery Lint: le permite inyectar automáticamente jQuery Lint en la página a medida que se carga (ideal para la validación de código ad-hoc)

Firefinder es un complemento de Firebug, para ayudar a encontrar elementos HTML que coincidan con el selector (s) CSS elegido o la expresión XPath. También puede seleccionar elementos automáticamente al desplazarse o mediante el menú contextual.

Ejemplo

  • No puede pasar línea por línea o terminará en un montón de funciones jQuery.
  • No puedes entrar en el interior de cada bucle sin pasar por muchas cosas de jQuery o establecer un punto de interrupción y dejar que llegue al punto de interrupción.

Cuando quiero entrar en each bucle y depurar paso a paso, creo un punto de interrupción en la función que se pasó a each función y luego depuro línea por línea hasta que llego al código jQuery. Ahora estoy creando un nuevo punto de interrupción en la posición donde finaliza el código jQuery y quiero continuar con la depuración.

  • No puede ver cuáles son los valores intermedios como $ (esto) o por qué podría estar obteniendo un valor falso para la altura sin pasar por millas de código jQuery extranjero.

Busque en http://msdn.microsoft.com/en-us/scriptjunkie/ee819093 . Se explica cómo se puede ver dentro de this por ejemplo (sección ''Escenario 2''). Este artículo da muchos consejos sobre cómo depurar el código que usa jQuery.

  • No puede salir de cada bucle como lo hace en un bucle tradicional (con ruptura o retorno) porque no es un bucle real. El bucle está dentro de la función .each (). Lo que parece un bucle aquí son solo los aspectos internos de una llamada de función.

No entiendo este problema. Puede salir de cada bucle devolviendo false . La función que se pasó a each una de each ya no se llamará cuando la función devuelva false una vez.

  • ¿Qué pasa si quiero saber por qué obtengo un valor de altura falso en el bucle? ¿Hay alguna manera de darse cuenta de eso sin pasar por un montón de código jQuery?

Tal vez tengas más información después de mirar this como se explicó anteriormente. Pero a veces es necesario buscar en el código jQuery, pero no lo hago muy a menudo. Por supuesto, también puede haber un error en jQuery. :-RE

Conclusión

Sí, la depuración de jQuery es un poco diferente. Pero creo que después de una pequeña fase de familiarización habrás modificado tu estilo de depuración para jQuery. Y pasar de punto de interrupción a punto de interrupción no es nada comparado con el tiempo que se guardó al usar jQuery.

.

Coincidiría con el uso de Firebug, donde puedo, hago mi depuración JS en Firefox, porque Firebug es muy bueno.

En particular, tiendo a usar el servicio de vigilancia para identificar que las solicitudes que he realizado están devolviendo los resultados correctos. También puede usar esto para identificar $ (esto) o cualquier otra cosa que necesite identificar, aunque "esto" se muestra de forma predeterminada.

La otra cosa que hago a menudo es dividir mi código JQ en muchas más líneas de las que haría de otra manera, para ayudar a identificar dónde estoy. Creo que a menudo reduce el JQ cuando sé que las llamadas están funcionando.

Usando estos, la depuración de JQ está bien. Sin embargo, estoy de acuerdo, que sería más fácil si la biblioteca JQ no se cruzara. Sin embargo, lo mismo se aplica a algunas partes de mi código de back-end también. Eso es vida.

Llámeme old-skool, pero tiendo a confiar mucho en console.log(''your choice of variable''); y me ha servido bien la mayor parte del tiempo.

Siempre me gustó Firebug por trabajar con JQuery. Pero en general, para profundizar en la depuración, sí, tienes que entrar en JQuery. Sin embargo, JQuery tiene un desarrollo.