¿Cuáles son algunas sugerencias y técnicas para depurar JavaScript? Cinco herramientas de depuración útiles
Herramientas para desarrolladores del navegador
Mi favorita personal son las herramientas para desarrolladores de Chrome. Si bien Safari y Firefox no pueden cumplir con los altos estándares de Chrome, están mejorando gradualmente. En Firefox, puedes usar Firebug y Firefox Developer Tools juntos. Si el equipo de Firefox continúa sobresaliendo en la mejora de las herramientas integradas para desarrolladores, es posible que algún día Firebug quede obsoleto.
Dejando de lado las preferencias personales, debería poder experimentar y depurar código arbitrario en el navegador de destino. Su navegador de destino puede incluir o no el famoso IE8.
Familiarícese con las herramientas de desarrollo de su elección. También puede obtener soporte de depuración adicional de un IDE (entorno de desarrollo integrado) o software de terceros.
En varias herramientas de depuración, el conocimiento básico de depuración es el mismo. De hecho, aprendí los conceptos básicos de depuración en el entorno de desarrollador C de Borland en los años 90. Los puntos de interrupción, los puntos de interrupción condicionales y las inspecciones son exactamente los mismos que en la última versión de Chrome Developer Tools. Alrededor del año 2000, detecté mi primera excepción en Java. El concepto de seguimiento de pila todavía se aplica y, aunque la terminología de JavaScript se refiere a él como un error, inspeccionar un seguimiento de pila sigue siendo tan útil como siempre.
Algunos puntos de conocimiento son exclusivos del desarrollo front-end. Por ejemplo:
Inspección DOM
Puntos de interrupción DOM
Eventos de depuración
Análisis de pérdida de memoria
Puntos de interrupción
p>
Utilice la declaración del depurador para agregar puntos de interrupción en el código fuente. Una vez que se alcanza la declaración del depurador, se interrumpe la ejecución. El contexto del alcance actual aparece en la consola, junto con todas las variables locales y globales. Mueva el cursor del mouse sobre una variable para ver su valor.
También se pueden crear puntos de interrupción condicionales en el código:
JavaScript
if (condición) { debugger;}
También puedes cree puntos de interrupción basados en Debe insertar puntos de interrupción y puntos de interrupción condicionales en las herramientas de desarrollo usted mismo. En las herramientas para desarrolladores de Chrome, haga clic en el número de línea en la vista Fuentes para agregar un punto de interrupción. También puede agregar condiciones de punto de interrupción si hace clic derecho en un punto de interrupción y selecciona "Editar punto de interrupción".
Puntos de interrupción para cambios de nodos
Si tu tarea es depurar código basura, es posible que tengas esta pregunta: ¿Por qué los nodos DOM cambian durante la ejecución? Las herramientas de desarrollo de Chrome proporcionan un punto de interrupción conveniente que se puede utilizar para detectar cambios de nodos en el árbol de elementos.
En la vista Elementos, haga clic derecho en un elemento y seleccione "Interrumpir en..." en el menú contextual.
Puntos de interrupción para cambios de nodo
Los tipos de puntos de interrupción DOM pueden incluir:
Cambios de nodo en el subdirectorio del árbol de nodos seleccionado (subárbol),
Las propiedades del nodo seleccionado cambian,
el nodo se elimina.
Evite registrar tipos de referencia
Al grabar un objeto o matriz, el valor del tipo original puede cambiar en el registro del objeto de referencia. Al visualizar tipos de referencia, es importante recordar que la ejecución del código durante la grabación y visualización puede afectar los resultados observados.
Por ejemplo, ejecute el siguiente código en las herramientas de desarrollo de Chrome:
JavaScript
var wallets = [{ cantidad: 0 }];setInterval( function() { console.log( billeteras, billeteras[0], billeteras[0].amount ); billeteras[0].amount += 100;}, 1000 );
El segundo y tercer registros Los valores de dos propiedades son correctas y el valor de la referencia del objeto en la primera propiedad no es confiable.
El valor del campo monto ya está determinado cuando muestra esta propiedad por primera vez en las herramientas del desarrollador. No importa cuántas veces cierres y vuelvas a abrir la misma referencia, este valor no cambiará.
Tipos de referencias de registros
Recuerda siempre lo que estás grabando. Al registrar tipos primitivos, utilice expresiones de observación con puntos de interrupción. Si se trata de código asincrónico, evite documentar tipos de referencia.
Grabación de tabla
En algunas herramientas de desarrollo, puedes usar console.table para grabar una serie de objetos en la consola.
Intenta ejecutar el siguiente código en tus herramientas de desarrollador de Chrome:
JavaScript
console.table( [ { id: 1, nombre: 'John' , dirección : 'Bay street 1' }, { id: 2, nombre: 'Jack', dirección: 'Valley road 2.', { id: 3, nombre: 'Jim', dirección: 'Hill street } ] );
El resultado es una tabla muy atractiva. Todos los tipos primitivos se muestran inmediatamente y sus valores reflejan el estado en el momento de la grabación. También es posible grabar tipos complejos, mostrar el contenido como su tipo y el contenido no se puede mostrar. Por lo tanto, console.table solo se puede utilizar para mostrar estructuras de datos bidimensionales compuestas por objetos con valores de tipo primitivo.
Puntos de interrupción XHR
A veces puedes encontrar solicitudes AJAX incorrectas. Si no puede identificar inmediatamente el código que envió la solicitud, los puntos de interrupción XHR pueden ahorrarle tiempo. Cuando se envía un tipo especial de AJAX, el punto de interrupción XHR finalizará la ejecución del código y presentará el segmento de código que envió la solicitud al usuario.
En la pestaña Fuentes de las herramientas para desarrolladores de Chrome, uno de los tipos de puntos de interrupción es el punto de interrupción XHR. Al hacer clic en el ícono +, puede ingresar un fragmento de URL que hará que el código JavaScript se rompa cuando aparezca en la URL de una solicitud AJAX.
Puntos de interrupción del detector de eventos
Las herramientas de desarrollo de Chrome pueden capturar todo tipo de eventos. Cuando el usuario presiona una tecla o hace clic con el mouse, puede depurar los eventos desencadenados.
Pausar en caso de excepción
Las herramientas de desarrollo de Chrome pueden pausar la ejecución del código JavaScript cuando se produce una excepción. Esto le permite observar el estado de su aplicación cuando se crea el objeto Error.
Pausar en caso de excepción
Fragmentos de código
Hay una subpestaña de fragmento de código (Fragmento) en el panel izquierdo de la pestaña Fuentes, que se puede usar para guardar fragmentos de código le ayudarán a depurar su código.
Si insistes en utilizar la depuración de la consola y escribir el mismo código una y otra vez, debes abstraer tu código en fragmentos de depuración. De esta manera, incluso puedes enseñar a tus colegas tus habilidades de depuración.
Paul Irish ha publicado algunos fragmentos de código de depuración básicos, como la inserción de puntos de interrupción antes de la ejecución de funciones. Es valioso revisar estos fragmentos de código y buscar otros fragmentos de código en la web.
Insertar un punto de interrupción antes de la ejecución de la función
Si puede obtener el código fuente de la llamada a la función, también puede insertar un punto de interrupción antes de la llamada a la función para finalizar la ejecución de la función. Si desea depurar la función f, utilice la instrucción debug(f) para agregar dicho punto de interrupción.
Desminificar minimiza el código
(Nota del traductor: desminificar descomprime y desofusca)
Utiliza el mapa fuente siempre que sea posible. A veces, el código de producción no puede utilizar mapas fuente, pero de todos modos, no debe depurar el código de producción directamente.
(Nota del traductor: sourcemap es una herramienta para depurar código web comprimido y fusionado)
Si no hay un mapa fuente, finalmente puedes recurrir a la herramienta para desarrolladores de Chrome Fuentes El botón de formato (Botón de impresión bonita) en la página de pestañas. El botón de formato {} se encuentra debajo del área de texto del código fuente.
El botón de formato embellece el código fuente y cambia los números de línea, lo que facilita la depuración del código y el seguimiento de la pila es más eficiente.
El botón de formato sólo debe utilizarse como último recurso. En cierto sentido, el código feo es feo porque los nombres en el código no tienen una semántica clara.
Marcadores de consola para elementos DOM
Tanto Chrome Developer Tools como Firebug proporcionan funciones de marcadores para mostrar dónde se encuentra en la pestaña de elementos (Chrome) o HTML (Firebug) El último elemento DOM hizo clic. Si selecciona el elemento A, el elemento B y el elemento C en secuencia,
$0 representa el elemento C
$1 representa el elemento B
$2 representa el elemento A elemento
Si seleccionas el elemento D nuevamente, entonces $0, $1, $2 y $3 representan D, C, B y A respectivamente.
Acceder a la pila de llamadas
JavaScript
var f = function() { g() } var g = function() { h() }var; h = function() { console.trace('trace in h'); }f();
La pestaña Fuentes en las herramientas para desarrolladores de Chrome también muestra la pila de llamadas debajo de la expresión Watch.
Revisión del desempeño
Las herramientas de revisión del desempeño suelen ser útiles. Estas herramientas se pueden utilizar para evitar pérdidas de memoria y también pueden detectar áreas de su sitio que necesitan optimización. Dado que estas herramientas no saben nada sobre su producto, puede ignorar algunas de sus sugerencias. En términos generales, las herramientas de análisis de rendimiento tienen un alcance eficaz y pueden optimizar significativamente su sitio web.
Ejemplos de herramientas de auditoría:
Pestaña Auditoría de Chrome Developer Tools
YSlow
La práctica hace la perfección
Es posible que esté familiarizado con ciertas técnicas de depuración y otras le ahorrarán mucho tiempo. Si empiezas a utilizar estas técnicas en la práctica, te recomiendo que vuelvas a leer este artículo después de unas semanas. Te sorprenderá cuánto cambia tu enfoque en unas pocas semanas.
Cinco herramientas de depuración js de uso común
JavaScript se denomina lenguaje basado en prototipos. Este lenguaje tiene muchas características, como escritura dinámica y débil, y también tiene funciones de primera clase. Otra característica es que es un lenguaje multiparadigma que admite estilos de programación funcional, declarativa y orientada a objetos.
JavaScript se utilizó originalmente como lenguaje del lado del cliente y los navegadores lo implementaron para proporcionar interfaces de usuario mejoradas. JavaScript se utiliza en muchos sitios web y aplicaciones web modernos. Una de las características interesantes de JavaScript que también es importante es que puedo usarlo para mejorar la experiencia del usuario de mi sitio web. JavaScript también puede proporcionar una rica funcionalidad y componentes interactivos.
JavaScript se ha vuelto muy popular a medida que esta tecnología se desarrolla rápidamente. Debido a su popularidad, JavaScript también ha mejorado mucho y queda mucho por hacer para modificar los scripts de JavaScript. Esta vez hemos traído varias herramientas de depuración de JavaScript muy útiles para los desarrolladores.
1) Drosera
puede depurar cualquier programa WebKit, no solo el navegador Safari.
2)Dragonfly
La vista del código fuente tiene resaltado de sintaxis y puedes establecer puntos de interrupción. Potente función de búsqueda, admite expresiones regulares.
3) Getfirebug
Puede editar, depurar y monitorear CSS, HTML y JavaScript en cualquier página web en tiempo real.
4)Barra de depuración
5)Venkman
Venkman es el nombre del depurador de JavaScript de Mozilla.
Está diseñado para proporcionar un potente entorno de depuración de JavaScript para navegadores basados en Mozilla (Firefox, Netscape 7.x/9.x y SeaMonkey).