1. ¿Qué es la depuración del punto de interrupción? ¿Es difícil?
La depuración del punto de interrupción en realidad no es algo complicado. Una comprensión simple de las llamadas salientes es abrir el navegador, abrir fuentes, encontrar el archivo JS y hacer clic en el número de línea. Parece muy simple de operar, pero lo que muchas personas están realmente confundidas es dónde romper el punto. (Primero veamos una captura de pantalla de punto de interrupción, tomando el punto de interrupción del navegador Chrome como ejemplo)
¿Recuerdas los pasos?
Abra la página con un navegador Chrome → Presione F12 para abrir las herramientas del desarrollador → Abra las fuentes → Abra el archivo del código JS que desea depurar → Haga clic en el número de línea, ¡OK! Felicitaciones a su punto de interrupción de Virgin por golpear, jaja ~~
2. ¿Cómo llegar a los puntos de descanso adecuadamente?
El funcionamiento de los puntos de interrupción es muy simple. El problema principal es, ¿cómo llegar a los puntos de descanso para solucionar el problema con el código? Déjame seguir dándote un ejemplo para entender. Sin más preámbulos, la imagen de arriba:
Supongamos que ahora estamos implementando una función que se carga más, como se muestra en la figura anterior, pero hay un problema con la carga de más funciones. Después de hacer clic, los datos no están cargados. ¿En qué debemos pensar en este momento? (Escriba la respuesta en otra línea, y puede ver cuál es su primera reacción)
¿Lo primero que me vio a la mente fue si mi clic fue exitoso? ¿Está en ejecución el método en el evento de clic? Ok, si quieres saber la respuesta a esta pregunta, intentemos llegar a un punto de descanso de inmediato. ¿Dónde está el punto de interrupción? Piénselo primero.
Siguiente imagen:
¿Pensaste en ello? Así es, ya que queremos saber si el clic es exitoso, por supuesto, estamos agregando un punto de ruptura en el evento de clic en el código. Recuerde no agregarlo en la línea 226, porque se ejecuta la función en el método de clic, no el selector de la línea 226. El punto de interrupción se ha presionado ahora, entonces, ¿qué hacer? Piénsalo tú mismo ~
Continúe con la imagen de arriba:
Luego, por supuesto, volvimos y hicimos clic en el botón Cargar más, ¿por qué? Frente. . . Si pregunta esto, permíteme usar este emoticón, sin hacer clic en el botón Cargar más, ¿cómo activar el evento de clic? ¿Cómo ejecutar las funciones en el evento de clic sin activar el evento de clic? Rugido. . Pero creo que todos no harán preguntas tan bajas ~ No hablaré sin sentido ~
Continúe con el tema, la imagen de arriba es la situación después de hacer clic en la carga de más botones. Podemos ver que la página de la izquierda está cubierta por una capa translúcida. También hay una cadena de inglés y dos botones sobre la página. Las 227 líneas del código a la derecha se han agregado con un color de fondo. Esta situación ocurre, sin importar lo que significen los botones y las funciones. ¿Qué información obtuviste de esta imagen? Sigue pensando en ello ~
Si se produce la situación anterior, significa que se ha llamado a la función en el evento de clic, lo que explica que el evento de clic en vigencia. Luego, se descarta el primer "sospechoso criminal" que hemos causado a este problema.
Para agregar:
¿Qué pasa si la situación anterior no ocurre? ¿Eso significa que el evento de clic no ha entrado en vigencia? ¿Qué causó que el evento de clic no tuviera efecto? Todos piensan en eso ellos mismos ~
Hay muchas razones por las cuales el evento de clic no entra en vigencia, como errores de múltiples selector, errores de sintaxis, elementos seleccionados se generan más tarde, etc. ¿Cómo resolverlo?
El selector está mal, puede continuar viendo el contenido de la parte de la consola más tarde, creo que todos saben cómo lidiar con eso.
Errores de sintaxis, verifique cuidadosamente. Puede comparar gramáticas desconocidas en Baidu.
El elemento seleccionado se genera más tarde. La forma más fácil de manejarlo es usar el método .on (). Esta cosa se procesa con la delegación de eventos. Puede usar Baidu para más detalles.
Entonces, ¿dónde se bloqueará la identidad del "sospechoso criminal" a continuación?
Diremos nuestra atención al evento en el interior, y el evento de clics se activa, por lo que el siguiente problema es el problema de la función dentro de él. Si quieres preguntar por qué? Por favor, dame un pedazo de tofu. . .
Por ejemplo, te daré un bolígrafo y te pediré que escribas. Luego escribe una palabra en el documento y descubres que la palabra no está fuera. ¿Por qué? Dijiste que lo escribí, y todavía había rasguños en el papel. ¿Es posible que el bolígrafo no tenga tinta o que la punta esté rota? Este ejemplo es más un principio de carga de clics. La acción de escritura es la operación de clic, y la función interna es tinta o punta de lápiz. ¿Entiendes ~
A continuación, analizamos el contenido del evento Click, que contiene tres oraciones. La primera oración es que la variable I crece por sí misma, la segunda oración es agregar una etiqueta I al botón y la tercera oración es llamar al método de solicitar datos.
A través del papel de estas tres oraciones, podemos colocar una parte más grande de la sospecha en la tercera oración y una pequeña parte en la primera y segunda oración. Algunas personas pueden preguntarse, ¿cómo puede sospechar la segunda oración? Su función es solo agregar una etiqueta, que no tiene ningún efecto en los datos. De hecho, esta oración no tiene ningún efecto en los datos, pero para consideraciones rigurosas, aún puede cometer errores, por ejemplo, ¿qué pasa si carece de un punto y coma? ¿O hay un símbolo dentro de la oración mal? A menudo, es este tipo de pequeño problema el que desperdicia mucho tiempo.
Ok, para bloquear aún más al "sospechoso criminal", le presentaré una herramienta, que también es uno de los dos íconos que aparecen en la imagen de arriba, vea la imagen a continuación:
La función de este pequeño icono se llama "ejecución por oración" o "ejecución paso a paso". Este es un nombre que entiendo personalmente, lo que significa que cada vez que lo haga clic, la declaración JS ejecutará una oración más tarde, y también tiene una clave de acceso directo, F10. La siguiente figura muestra el efecto después de que se haga clic:
Hice clic en este botón dos veces (o utilicé la tecla F10 Actual-Key), y el código JS se ejecutó desde la línea 227 a la línea 229, por lo que la llamé "Declaración por paso" o "Paso paso a paso". Esta función es muy práctica y se utilizará para la mayoría de la depuración.
Es demasiado tarde, continuaré escribiendo mañana, el buen espectáculo sigue llegando ~
"" ..... ... ...
Ok, continúa escribiendo!
La introducción anterior muestra que hice clic en el botón "Ejecución de oración por oración" dos veces, y el código funcionó de la línea 227 a la línea 229. ¿Qué crees que esto significa? ¿Significa que desde un punto de vista gramatical, las dos primeras oraciones no son problemáticas, por lo que también significa que las dos primeras oraciones eliminan la sospecha? No lo veo.
Como todos sabemos, cargar más es una función de la página siguiente, y la más central es el valor del número de página que se pasa al fondo. Cada vez que hago clic en el botón Cargar más una vez, el valor del número de página debe aumentarse en 1. Entonces, si los datos en la página siguiente no salen, ¿es posible que haya un problema con el valor del número de página, es decir, [Variable] (el siguiente es el nombre unificado i)? Entonces, ¿cómo solucionar problemas sobre si hay algún problema con el número de página? Todos piensan primero.
Aquí hay dos formas de ver el valor de salida real del número de página I], la figura anterior:
El primer tipo:
Los pasos de operación son los siguientes:
1. Todavía presione un punto de interrupción en la línea 227 → 2. Haga clic en el botón Cargar más → 3. Haga clic en el botón "Ejecutar la declaración por oración" una vez, y el código JS se ejecutará en la línea 228 → 4. Use el mouse para seleccionar i ++ (¿qué significa que no entiende? Es decir, usted debe copiar algo, ¿desea que seleccione? resultar en la imagen de arriba.
El segundo tipo:
Este método es realmente similar al primero, excepto que el valor de I se emite en la consola. Solo debe seguir el primer método para ejecutar al paso 3 → 4. Abra la consola del mismo nivel que las fuentes → 5. Ingrese I → 6. Presione la tecla ENTER.
En el segundo método anterior, se menciona la consola. Podemos llamarlo consola o cualquier otra cosa. Esto no es importante. La consola tiene una función muy poderosa. Durante el proceso de depuración, a menudo necesitamos saber cuáles son los valores de ciertas variables, o si usamos Selector [$ ". Div") para seleccionar los elementos que queremos, etc., se pueden imprimir en la consola. Por supuesto, también es posible usar el primer método directamente.
Permítanme demostrarles los elementos que queremos seleccionar en la consola. Imagen de arriba ~
Ingrese $ (esto) en la consola para obtener el elemento seleccionado. Sí, es el objeto en el que hicimos clic: cargue más elementos de botones.
Aquí te diré mi comprensión de la consola de la consola: esta cosa es un analizador JS, que es utilizado por el navegador mismo para analizar al tipo que ejecuta JS. Sin embargo, el navegador nos permite a los desarrolladores controlar la operación y la salida de JS durante el proceso de depuración a través de la consola. A través de los dos métodos anteriores, puede pensar que es muy fácil de usar, pero me gustaría recordarle, o es una confusión que es más probable que se encuentren algunos principiantes.
Confundido 1: cuando no hay punto de quiebre, ingrese I en la consola, y la consola informa un error.
Este debería ser un problema común para los principiantes. ¿Por qué no puedo generar directamente el valor de las variables en la consola sin romper el punto? Personalmente, entiendo que soy solo una variable local en este momento. Si no se establece ningún punto de interrupción, el navegador analizará todos los JS. La consola no puede acceder a las variables locales, pero solo puede acceder a las variables globales. Por lo tanto, la consola informará un error que indefiní, pero cuando JS llega a un punto de interrupción, la consola la analiza en la función donde se encuentra la variable local I, y se puede acceder en este momento.
Confusión 2: ¿Por qué puedo imprimir algo directamente en $ (". Xxx") en la consola?
Es muy simple. La consola en sí es un analizador JS, y $ (". xxx") es una declaración JS, por lo que la consola naturalmente puede analizar esta declaración y generar el resultado.
Después de introducir el uso del botón "Ejecución de oración por orientación", finalmente introduciremos un botón, la imagen de arriba:
Llamo a este botón "Ejecución de proceso", que es diferente del botón "Ejecución de declaración". El botón "Ejecución del proceso" a menudo se usa cuando un método llama a varios archivos JS. El código JS involucrado es relativamente largo, por lo que se utilizará este botón.
Arriba:
Supongamos que en la imagen de arriba, solo hice un punto de interrupción en la línea 227, y luego seguí haciendo clic en el botón "Ejecutar por oración" a la línea 229, ¿qué pasa si hago clic en el botón "Ejecutar por oración" nuevamente? Entrará en el JS en la siguiente imagen:
Estos son el contenido del archivo de la biblioteca Zepto. No hay nada bueno para ver. Es muy complicado de correr. No siempre podemos usar el botón "Forma por orientación", por lo que descubrirá que ha estado presionando la mayor parte del día y aún rodeando en el archivo de la biblioteca. . . ¿Qué hacer en este momento? Entonces es hora de "ejecución de procesos por proceso" para subir al escenario.
Arriba:
Además de configurar un punto de interrupción en la línea 227, también presiono un punto de interrupción en la línea 237. Cuando ejecutamos a la línea 229, haga clic directamente en el botón "Ejecución de proceso por proceso". Encontrará que JS se omitió directamente el archivo de la biblioteca y ejecutó a la línea 237. Puede usarlo para que lo experimente.
Resumen final:
Este artículo presenta principalmente las tres herramientas del botón "Forma por oración por orientación por seral", el botón "Ejecución por proceso", la consola de la consola y algunas ideas al depurar errores. No repetiré el uso de la herramienta. Solo conozca el uso. Cómo usarlo más razonablemente debe resumirse y mejorar a través de mucha práctica ~
En realidad, de lo que quiero hablar principalmente en este artículo es una forma de depurar errores, pero porque los ejemplos que elegí involucran demasiadas cosas. . . Tenía miedo de que el contenido de todo fuera demasiado largo y que todos no estaban interesados en leerlo, por lo que simplemente elegí una parte para explicarte. Me pregunto si has ganado algo. No mires las tres oraciones que escribí muchas cosas en la depuración. Si realmente lo haces como yo en el proyecto real, probablemente tardarás mucho más en depurar un error que escribir un guión. . . En situaciones reales, debemos desarrollar la primera vez que obtenemos el problema, verificamos el problema en nuestras mentes y encontramos el punto más probable. Si no podemos encontrar rápidamente el punto más importante, entonces puede usar el método más problemático pero confiable para usar el botón "Ejecución de oración por oración" para ejecutar el JS completo relacionado con el problema uno por uno. Durante el proceso de ejecución, también debemos aclarar nuestros pensamientos y prestar atención al valor correcto de cada variable y los elementos seleccionados por el selector. En términos generales, si hace esto una vez, los errores casi se resolverán.
Así que personalmente creo que nuestra idea de depurar errores debería ser la siguiente: primero, si JS se ejecuta con éxito; segundo, si JS tiene problemas lógicos, problemas variables, problemas de parámetros, etc.; Finalmente, si no hay problemas con lo anterior, verifique cuidadosamente varios símbolos. . .
Ok ~ Eso se trata del punto de interrupción ~ Si no comprende, puede dejar un mensaje a continuación ~ Si tiene algún punto de conocimiento que no comprenda o esté confundido sobre el front-end, también puede dejar un mensaje a continuación. Cuando tenga tiempo, continuaré escribiendo algunos documentos en sus mensajes ~