JavaScript Puntos de interrupción


Ejemplo

Los puntos de interrupción pausan su programa una vez que la ejecución llega a cierto punto. Luego puede recorrer el programa línea por línea, observando su ejecución e inspeccionando el contenido de sus variables.

Hay tres formas de crear puntos de interrupción.

  1. Desde el código, utilizando el debugger; declaración.
  2. Desde el navegador, utilizando las herramientas de desarrollo.
  3. Desde un entorno de desarrollo integrado (IDE).

Declaración del depurador

Puede colocar un debugger; Declaración en cualquier parte de su código JavaScript. Una vez que el intérprete de JS llegue a esa línea, detendrá la ejecución del script, lo que le permitirá inspeccionar las variables y recorrer su código.

Herramientas de desarrollo

La segunda opción es agregar un punto de interrupción directamente en el código de las Herramientas de desarrollo del navegador.

Abrir las herramientas de desarrollo

Chrome o Firefox

  1. Presiona F12 para abrir Herramientas de desarrollo
  2. Cambia a la pestaña Fuentes (Chrome) o la pestaña Depurador (Firefox)
  3. Presione Ctrl + P y escriba el nombre de su archivo JavaScript
  4. Presiona Enter para abrirlo.

Internet Explorer o Edge

  1. Presiona F12 para abrir Herramientas de desarrollo
  2. Cambie a la pestaña Depurador.
  3. Use el icono de carpeta cerca de la esquina superior izquierda de la ventana para abrir un panel de selección de archivos; Usted puede encontrar su archivo JavaScript allí.

Safari

  1. Presione Comando + Opción + C para abrir las Herramientas del desarrollador
  2. Cambia a la pestaña de Recursos
  3. Abra la carpeta "Scripts" en el panel del lado izquierdo
  4. Seleccione su archivo JavaScript.

Añadiendo un punto de interrupción desde las herramientas de desarrollo

Una vez que tenga su archivo JavaScript abierto en las Herramientas de desarrollo, puede hacer clic en un número de línea para colocar un punto de interrupción. La próxima vez que se ejecute su programa, se detendrá allí.

Nota sobre las fuentes minimizadas: si su fuente está minimizada, puede imprimirla en forma bonita (convertir a formato legible). En Chrome, esto se hace haciendo clic en el botón {} en la esquina inferior derecha del visor de código fuente.

IDEs

Código de Visual Studio (VSC)

VSC tiene soporte incorporado para la depuración de JavaScript.

  1. Haga clic en el botón Depurar a la izquierda o Ctrl + Shift + D
  2. Si aún no lo ha hecho, cree un archivo de configuración de lanzamiento ( launch.json ) presionando el icono de engranaje.
  3. Ejecute el código desde VSC presionando el botón verde de reproducción o presione F5 .

Añadiendo un punto de interrupción en VSC

Haga clic al lado del número de línea en su archivo fuente de JavaScript para agregar un punto de interrupción (se marcará en rojo). Para eliminar el punto de interrupción, vuelva a hacer clic en el círculo rojo.

Sugerencia: También puede utilizar los puntos de interrupción condicionales en las herramientas de desarrollo del navegador. Estos ayudan a saltarse las interrupciones innecesarias en la ejecución. Escenario de ejemplo: desea examinar una variable en un bucle exactamente en la iteración.

introduzca la descripción de la imagen aquí