Prefacio: el código de depuración es indispensable para cualquier programador. Ya sea que sea un maestro o un novato, los programas de depuración es una tarea indispensable. En términos generales, los programas de depuración se realizan después de escribir código o al modificar errores durante las pruebas. A menudo es mejor reflejar el nivel y la precisión del programador para analizar problemas durante el código de depuración. Muchos principiantes siempre desconocen el problema al buscar la causa del error, pasando mucho tiempo pero no pueden resolver algunos errores que finalmente demuestran ser bastante simples. Dominar varias habilidades de depuración definitivamente logrará el doble del resultado con la mitad del esfuerzo en el trabajo. Por ejemplo, localice rápidamente problemas, reduzca la probabilidad de falla, ayude a analizar errores lógicos, etc. En la actualidad, cuando el desarrollo front-end de Internet se vuelve cada vez más importante, es particularmente importante reducir los costos de desarrollo, mejorar la eficiencia laboral y el desarrollo del front-end y las habilidades de depuración en el desarrollo frontal.
Este artículo explicará varias técnicas de depuración JS front-end una por una. Tal vez los hayas dominado, así que revisemoslos juntos. Tal vez hay métodos que no has visto antes. También podrían aprenderlos juntos. Tal vez no sabes cómo depurar. Aprovecha esta oportunidad para llenar el vacío.
1. Alerta, Master de depuración de arout
Fue entonces cuando Internet recién comenzaba, y el front-end de la página web se trataba principalmente de visualización de contenido, y los scripts de navegador solo podían proporcionar funciones auxiliares muy simples para la página. En ese momento, las páginas web se ejecutaban principalmente en navegadores dominados por IE6, y la función de depuración de JS todavía era muy débil, por lo que solo se podían depurar a través del método de alerta integrado en el objeto de la ventana. En ese momento, debería haberse visto así:
Cabe señalar que el efecto visto aquí no es el efecto visto en el navegador IE en ese entonces, sino el efecto en la versión más alta de IE. Además, parecía haber una consola tan avanzada en ese entonces, y el uso de alerta también estaba en el código JS de la página real. Aunque el método de depuración de alerta es muy primitivo, tenía su valor indeleble en ese momento, e incluso hoy tiene su lugar para ser utilizado.
2. La nueva generación de depuración de la consola King
Como JS puede hacer más y más cosas en el front-end web, la responsabilidad es cada vez más grande, y el estado se está volviendo cada vez más importante. El método de depuración de alerta tradicional no ha fallado gradualmente en cumplir con los diversos escenarios de desarrollo frontal. Además, la información de depuración surgida por el método de depuración de alerta realmente no es hermosa y bloqueará algún contenido de página, lo que realmente no es amigable.
Por otro lado, la información de depuración de ALERT debe agregarse a la lógica del programa, como "ALERT (XXXXX)" para funcionar normalmente, y ALERT obstaculizará la interpretación continua de la página. Esto significa que después de completar la depuración del desarrollador, debe limpiar manualmente estos códigos de depuración, lo cual es realmente problemático.
Por lo tanto, la nueva generación de navegadores Firefox, Chrome e IE han lanzado sucesivamente consolas de depuración JS, que respalda el uso de un formulario similar a "Console.log (xxxx)" para imprimir información de depuración en la consola sin afectar directamente la pantalla de la página. Tome IE como ejemplo, se ve así:
Ok, adiós al cuadro emergente de alerta fea. La estrella en ascenso, dirigida por Chrome, ha ampliado las características más ricas a la consola:
¿Crees que esto es satisfactorio? La imaginación del equipo de desarrollo de Chrome es realmente admirable:
Ok, he dicho un poco más fuera de tema. En resumen, la aparición de objetos de consola incorporados en la consola y el navegador ha traído una gran comodidad para el desarrollo y la depuración delantero.
Algunas personas pueden preguntar, ¿es necesario limpiar este código de depuración después de completar la depuración?
Con respecto a este problema, si ha avanzado la verificación de existencia antes de usar el objeto de la consola, no causará daños a la lógica comercial sin eliminación. Por supuesto, para garantizar que el código ordenado, después de que se complete la depuración, estos códigos de depuración que no están relacionados con la lógica comercial deben eliminarse tanto como sea posible.
3. Depuración de punto de interrupción de JS
El punto de interrupción, una de las funciones del depurador, permite que las interrupciones del programa se interrumpan cuando sea necesario, facilitando así su análisis. También puede establecer puntos de interrupción en una depuración. La próxima vez, solo necesita dejar que el programa se ejecute automáticamente a la posición de punto de interrupción establecida, y puede interrumpirlo en la última posición de punto de interrupción establecida, lo que facilita enormemente la operación y ahorra tiempo. -Enciclopedia de Baidu
La depuración del punto de interrupción de JS significa agregar puntos de interrupción al código JS en las herramientas de desarrollador del navegador, lo que permite que la ejecución de JS se detenga en una ubicación específica, lo que facilita a los desarrolladores a analizar y procesar lógico de los segmentos de código allí. Para observar el efecto de la depuración del punto de interrupción, preparamos una pieza de código JS por adelantado:
El código es muy simple, es definir una función, pasar en dos números, agregar un entero aleatorio desordenado y luego devolver la suma de los dos números. Tomando las herramientas de desarrollador de Chrome como ejemplo, echemos un vistazo a los métodos básicos de la depuración del punto de interrupción de JS.
3.1. Punto de ruptura de fuentes
En primer lugar, en el código de prueba, podemos ver que el código debería ejecutarse normalmente a través de los resultados de salida de la consola en la figura anterior, pero ¿por qué debería ser? Debido a que se agrega un número aleatorio a la función, ¿el resultado final es realmente correcto? Esta es una suposición sin sentido, pero suponga que voy a verificar ahora: los dos números pasados en la función, el número aleatorio agregado y la suma final. Entonces, ¿cómo operar?
Método 1, el más común mencionado anteriormente, ya sea usando alerta o consola, podemos verificarlo de esta manera:
De la figura anterior, hemos agregado tres líneas de código de consola al código para imprimir las variables de datos que nos importan. Al final, podemos verificar claramente si todo el proceso de cálculo es normal y luego cumplir con los requisitos de verificación establecidos por nuestra pregunta.
El método 2 y el método 1 tienen desventajas obvias en el proceso de verificación, que es que se agrega mucho código redundante. A continuación, echemos un vistazo a si usar puntos de interrupción para la verificación es más conveniente. Primero, vea cómo agregar puntos de interrupción y qué efecto es después del punto de interrupción:
Como se muestra en la figura, el proceso de agregar puntos de interrupción a un trozo de código es "F12 (CTRL + Shift + I) Abrir herramientas de desarrollo" - "Haga clic en Menú de fuentes" - "Busque el archivo correspondiente en el árbol izquierdo" - "Haga clic en la columna Número de fila" para completar la adición/eliminación de los puntos de interrupción en la fila actual. Cuando se agrega el punto de interrupción, actualice las paradas de ejecución de la página JS en la posición del punto de interrupción. En la interfaz de fuentes, verá todas las variables y valores en el alcance actual. Simplemente verifique cada valor para completar nuestros requisitos de verificación.
El problema está aquí. Si tiene cuidado, encontrará que cuando mi código alcance un punto de interrupción, se han agregado los valores de las variables A y B. No podemos ver que los 10 y 20 iniciales pasen al llamar a la función de la suma. Entonces, ¿qué debo hacer? Esto requiere que regrese y aprenda algunos conocimientos básicos de la depuración del punto de interrupción. Después de abrir el panel de fuentes, realmente veremos el siguiente contenido en la interfaz. Seguimos la pista del mouse para ver lo que significa:
De izquierda a derecha, las funciones representadas por cada icono son:
Ejecución de script de pausa/currículum: PAUSE/CURSE Ejecución del script (la ejecución del programa se detiene en el siguiente punto de ruptura).
Pase la siguiente llamada de función: ejecute la llamada de función al siguiente paso (salte a la línea siguiente).
Pase a la siguiente llamada de función: ingrese la función actual.
Salga de la función actual: salga de la función de ejecución actual.
Desactive/Active Todos los puntos de interrupción: Apague/en todos los puntos de interrupción (no cancelados).
Pausa sobre excepciones: configuración de punto de interrupción automática para excepciones.
En este punto, las teclas de función para la depuración del punto de interrupción se han introducido casi. A continuación, podemos ver nuestro código del programa Línea por línea para ver los cambios en cada variable después de ejecutar cada línea, como se muestra en la figura a continuación:
Como se mencionó anteriormente, podemos ver el proceso completo de las variables A y B desde el valor inicial, a agregar un valor aleatorio en el medio y finalmente calcular la suma y generar el resultado final. No es un problema completar los requisitos de verificación de la configuración de la pregunta.
Para las teclas de función restantes, cambiamos ligeramente nuestro código de prueba y usamos un diagrama GIF para demostrar su uso:
Una cosa a tener en cuenta aquí es que la función de imprimir valores variables directamente en el área de código es una nueva característica agregada en la versión más nueva de Chrome. Si todavía está utilizando una versión anterior de Chrome, es posible que no pueda ver la información variable directamente en los puntos de interrupción. En este momento, puede mover el mouse al nombre de la variable y una pausa por un corto tiempo, y aparecerá el valor variable. También puede seleccionar el nombre de la variable con el mouse y hacer clic con el botón derecho en "Agregar a Watch" para verlo en el panel de relojes. Este método también se aplica a las expresiones. Además, también puede cambiar al panel de la consola en los puntos de interrupción, ingresar el nombre de la variable directamente en la consola e ingresar la información de la variable. Esta parte es relativamente simple, considerando la longitud del artículo y no hacer fotos y demostraciones.
3.2. Punto de interrupción del depurador
El llamado punto de ruptura del depurador en realidad es nombrado por mí, y no sé cómo decir términos profesionales. Específicamente, agregando un "depurador"; Declaración al código, romperá automáticamente los puntos cuando el código ejecute la declaración. La siguiente operación es casi exactamente la misma que agregar depuración de punto de interrupción en el panel de fuentes. La única diferencia es que la declaración debe eliminarse después de la depuración.
Dado que la misma forma de establecer puntos de interrupción es diferente, la función es la misma que agregar puntos de interrupción al panel de fuentes, ¿por qué todavía existe este método? Creo que la razón debería ser esta: ocasionalmente encontramos la carga asincrónica de fragmentos HTML (incluido el código JS integrado) en el desarrollo, y esta parte del código JS no se puede encontrar en las especies de árboles de fuentes, por lo que no podemos agregar directamente los puntos de descanso en la herramienta de desarrollo. Entonces, si queremos agregar puntos de interrupción al script cargado asincrónicamente, "debugger"; funcionará en este momento. Veamos directamente su efecto a través del diagrama GIF:
4. Dom Breakpoint Depurging
El punto de interrupción de DOM, como su nombre indica, es agregar puntos de interrupción al elemento DOM para lograr el propósito de la depuración. El efecto del uso de puntos de interrupción en uso real se implementa en última instancia en JS Logic. Echemos un vistazo a los efectos específicos de cada punto de interrupción DOM a su vez.
4.1. Romper en las modificaciones de subárbol cuando el niño nota dentro del cambio del nodo (rompa las modificaciones del subárbol)
Hoy, cuando el desarrollo front-end se está volviendo cada vez más complejo, el código JS front-end se está volviendo cada vez más complejo, y una página web aparentemente simple generalmente se acompaña de grandes segmentos de código JS, que implica muchas operaciones de agregar, eliminar y modificar los nodos DOM. Es inevitable que sea difícil localizar segmentos de código directamente a través del código JS, pero podemos localizar rápidamente los nodos DOM relevantes a través del panel Elements de la herramienta de desarrollador. En este momento, es particularmente importante localizar scripts a través de puntos de interrupción DOM. Echemos un vistazo a la demostración de GIF:
La figura anterior demuestra los efectos de agregar, eliminar e intercambiar operaciones de orden que desencadenan puntos de interrupción para nodos infantiles UL (LI). Pero debe tenerse en cuenta que modificar los atributos y el contenido de los nodos infantiles no activará los puntos de interrupción.
4.2. Romper en las modificaciones de los atributos
Por otro lado, a medida que la lógica comercial del procesamiento frontal se vuelve cada vez más compleja, la dependencia del almacenamiento de algunos datos se vuelve cada vez más fuerte. El almacenamiento de datos temporales en las propiedades (personalizadas) del nodo DOM es un método preferido para los desarrolladores en muchos casos. Especialmente después de que el estándar HTML5 mejora el soporte de atributos personalizados (por ejemplo: conjunto de datos, datos-*, etc.), se aplican más y más configuraciones de atributos, por lo que las herramientas de desarrollador de Chrome también proporcionan soporte de punto de ruptura de cambio de atributo, y los efectos son más o menos como el siguiente:
Este método también debe tenerse en cuenta que cualquier operación en las propiedades del nodo infantil no activará el punto de interrupción del nodo en sí.
4.3. Romper en la eliminación de nodos
Esta configuración del punto de interrupción DOM es muy simple, y el método de activación es muy claro: cuando se elimina el nodo. Por lo general, el caso debe ser al ejecutar la declaración "ParentNode.RemoVechild (ChildNode)". Este método no se usa mucho.
Lo que presentamos anteriormente son básicamente los métodos de depuración que a menudo usamos en el desarrollo diario. Pueden lidiar con casi todos los problemas en nuestro desarrollo diario cuando se usan correctamente. Sin embargo, las herramientas del desarrollador también tienen en cuenta más situaciones y proporcionan más formas de romper el punto, como se muestra en la figura:
5. Puntos de interrupción de XHR
El desarrollo front-end ha sufrido cambios en la tierra en los últimos años, desde su reputación desconocida hasta su prosperidad actual, AJAX impulsa aplicaciones web ricas y las aplicaciones de una sola página móvil están en auge. Todo esto es inseparable del objeto xmlhttprequest, y "XHR Breakpoints" es una función de depuración de punto de interrupción diseñada para fines asincrónicos.
Podemos agregar una condición de punto de ruptura al punto de ruptura asíncrono a través del signo "+" a la derecha de "puntos de interrupción XHR". Cuando se activa la URL cuando se activa la solicitud asíncrona, la lógica JS generará automáticamente un punto de interrupción. La posición del punto de interrupción no se demuestra en la animación de demostración, porque la demostración utiliza el método AJAX encapsulado por jQuery. El código ha sido comprimido y no hay efecto. De hecho, el punto de interrupción XHR se genera mediante la declaración "xhr.send ()".
El poder de los puntos de interrupción de XHR es que podemos personalizar las reglas del punto de interrupción, lo que significa que podemos establecer puntos de interrupción para un lote determinado, cierto e incluso todas las solicitudes asincrónicas, lo cual es muy poderoso. Sin embargo, parece que esta función no se usa mucho en el desarrollo diario, al menos no la uso mucho. Piénselo, hay aproximadamente dos razones: primero, este tipo de requisitos de depuración de punto de interrupción no están involucrados mucho en los negocios diarios; En segundo lugar, la mayor parte del desarrollo front-end en esta etapa se basa en el marco JS, y la jQuery más básica también ha encapsulado AJAX. Pocas personas encapsulan los métodos AJAX. Para reducir el tamaño del código, el proyecto generalmente elige bases de código comprimidas, lo que hace que el seguimiento del punto de interrupción XHR sea relativamente menos fácil.
6. Puntos de descanso del oyente de eventos
El punto de interrupción del oyente del evento, es decir, la configuración de punto de interrupción se realiza de acuerdo con el nombre del evento. Cuando se activa el evento, el punto de interrupción es para la ubicación donde está elaborado. Los puntos de interrupción del oyente de eventos enumeran todos los eventos de página y script, que incluyen: mouse, teclado, animación, temporizador, XHR, etc. Reduce en gran medida la dificultad de depurar la lógica comercial en los eventos.
El ejemplo de demostración demuestra el efecto de punto de interrupción cuando se dispara el evento de clic y cuando se establece SetTimeOut. El ejemplo muestra que después de que se selecciona el punto de interrupción del evento de clic, el punto de interrupción se activa cuando se hace clic en ambos botones, y cuando SetTimeout está configurado, se activa el punto de interrupción del "Temporizador de configuración".
La depuración es una parte muy importante del desarrollo del proyecto. No solo puede ayudarnos a localizar rápidamente problemas, sino también ahorrarnos el tiempo de desarrollo. Competente en varios métodos de depuración definitivamente traerá muchos beneficios a su desarrollo profesional. Sin embargo, con tantos métodos de depuración, cómo elegir uno adecuado para su escenario de aplicación actual requiere experiencia e intentos continuos de acumular.
Habiendo escrito esto, básicamente se puede decir que ha salido en pleno apogeo. Espero que pueda atraer su atención, y espero que pueda hacer que se sienta un poco conmovido y se sienta un poco familiar. ¡Lo más importante es que espero que puedas mejorar rápidamente tus habilidades y convertirte en una persona calificada!