Cómo depurar JavaScript con puntos de interrupción
1. Depuración en las herramientas de desarrollador F12
Abra el navegador IE y presione la tecla F12 para abrir las herramientas de desarrollador. Las herramientas de desarrollo para desarrolladores facilitan a los desarrolladores el seguimiento y la depuración de recursos web como HTML, CSS y Javascript.
Si no está abierto permanentemente en la parte inferior de la página web, puede hacer clic en el botón en la barra de menú en la esquina superior derecha para lograrlo.
Vemos que hay varias pestañas en la ventana de herramientas:
Vemos que hay varias pestañas en la ventana de herramientas: HTML, CSS, Consola, Script, Detección y Web, al hacer clic en cada pestaña se realiza la tarea correspondiente.
En la ventana de etiquetas HTML, las operaciones realizadas por los botones en la barra de herramientas son las siguientes:
La etiqueta CSS se usa para ver estilos, la Consola muestra varias salidas de JS; la página web incluye mensajes de error, registros de usuario, etc.; la pestaña de scripts está abierta, que es donde queremos que esté.
Utilizo el rectángulo amarillo en la imagen para seleccionar el control, la lista desplegable de la izquierda para seleccionar el archivo y el botón de la derecha para iniciar la depuración. Después de hacer clic en "Iniciar depuración", el depurador maximizará la ventana, encontraremos la ubicación del archivo seleccionado que necesita ser depurado y haremos clic en la barra lateral izquierda para agregar un punto de interrupción para la depuración.
Cuando el programa se ejecuta hasta nuestro punto de interrupción, se puede depurar:
Aquí, podemos usar las teclas de acceso directo para operar. Las teclas de acceso directo más utilizadas son las siguientes:
<. p>F9: Agregar/eliminar puntos de interrupciónF10: Proceso por proceso, es decir, omitir métodos, expresiones, etc. en declaraciones.
F11: Declaración por declaración depuración, es decir, depuración única paso a paso, saltar a métodos, expresiones, etc. en la declaración
F11: Depuración declaración por declaración, es decir, saltar a métodos, expresiones, etc. . en el comunicado. Depuración en un solo paso, es decir, saltar a métodos, expresiones, etc., y realizar una depuración de seguimiento declaración por declaración
Durante el proceso de ejecución, si queremos ejecutar el código inmediatamente, solo necesitamos para escribir el código en el panel derecho y presionar Simplemente presione Enter:
Si queremos ejecutar varias líneas de código, al hacer clic en la doble flecha en el lado derecho del botón ejecutar se abrirá el modo multilínea. Ya no haré capturas de pantalla.
Este método de depuración directamente en el navegador también se aplica a Google Chrome y Firefox FireDebug. Sólo hay algunas diferencias en los detalles, pero las funciones principales son las mismas.
Presione la tecla F12 para ingresar a las herramientas de desarrollador y ver el código fuente, los estilos y js:
Haga clic en el botón script para abrir esta ventana de depuración, que contiene el código fuente del script. archivo en el código de la página web, haga clic en el botón de la izquierda para abrir la ventana lateral y seleccionar el archivo.
2. Utilice la palabra clave debugger para depurar.
Este método es muy simple. Solo necesitamos agregar la palabra clave debugger en el lugar de depuración y luego, cuando el navegador ejecute, esta palabra clave. interrumpirá:
Después de configurar la palabra clave del depurador, se puede usar la depuración ingresando esta configuración, también podemos capturar errores inesperados y rastrearlos;