JavaScript
Depuración

Puntos de interrupción

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 ^5ª iteración.

Paso a través del código

Una vez que haya pausado la ejecución en un punto de interrupción, puede seguir la ejecución línea por línea para observar lo que sucede. Abra las herramientas de desarrollo de su navegador y busque los íconos de control de ejecución. (Este ejemplo utiliza los iconos en Google Chrome, pero serán similares en otros navegadores).

Curriculum vitae: Desactivar la ejecución. Cortocircuito: F8 (Chrome, Firefox)

Paso sobre: Ejecutar la siguiente línea de código. Si esa línea contiene una llamada a la función, ejecute la función completa y muévase a la línea siguiente, en lugar de saltar a donde esté definida la función. Atajo: F10 (Chrome, Firefox, IE / Edge), F6 (Safari)

Paso a paso: Ejecutar la siguiente línea de código. Si esa línea contiene una llamada de función, salta a la función y haz una pausa allí. Atajo: F11 (Chrome, Firefox, IE / Edge), F7 (Safari)

Salir: ejecute el resto de la función actual, regrese al lugar desde donde se llamó a la función y haga una pausa en la siguiente declaración. Atajo: Shift + F11 (Chrome, Firefox, IE / Edge), F8 (Safari)

Úsalos junto con la pila de llamadas , que te dirá en qué función estás actualmente, a qué función se llama esa función, y así sucesivamente.

Consulte la guía de Google sobre "Cómo pasar por el código" para obtener más detalles y consejos.

Enlaces a la documentación de la tecla de acceso directo del navegador:

• Cromo
• Firefox
• ES DECIR
• Borde
• Safari

Pausar automáticamente la ejecución

En Google Chrome, puede pausar la ejecución sin necesidad de colocar puntos de interrupción.

Pausa en excepción: mientras este botón está activado, si su programa encuentra una excepción no controlada, el programa se detendrá como si hubiera alcanzado un punto de interrupción. El botón se encuentra cerca de los Controles de ejecución y es útil para localizar errores.

También puede pausar la ejecución cuando se modifica una etiqueta HTML (nodo DOM), o cuando se cambian sus atributos. Para hacerlo, haga clic derecho en el nodo DOM en la pestaña Elementos y seleccione "Interrumpir en ...".

Variables de intérprete interactivas

Tenga en cuenta que estos solo funcionan en las herramientas de desarrollo de ciertos navegadores.

$_ le da el valor de la expresión que se evaluó en último lugar.

"foo"             // "foo"
$_                // "foo"

$0 refiere al elemento DOM actualmente seleccionado en el Inspector. Entonces si <div id="foo"> está resaltado:

$0                      // <div id="foo">
$0.getAttribute('id')   // "foo"

$1 refiere al elemento previamente seleccionado, $2 al seleccionado antes de eso, y así sucesivamente por $3 y $4 .

Para obtener una colección de elementos que coincidan con un selector de CSS, use $$(selector) . Esto es esencialmente un atajo para document.querySelectorAll .

var images = $$('img');  // Returns an array or a nodelist of all matching elements

¹ _{alias ya sea document.getElementById o document.querySelector}

Inspector de elementos

Haciendo clic en el Seleccione un elemento en la página para inspeccionar el botón en la esquina superior izquierda de la pestaña Elementos en Chrome o la pestaña Inspector en Firefox, disponible en las Herramientas del desarrollador, y luego hacer clic en un elemento de la página resalta el elemento y lo asigna a los $0 variable

El inspector de elementos se puede utilizar de varias maneras, por ejemplo:

1. Puede verificar si su JS está manipulando DOM de la forma que espera que lo haga,
2. Puedes depurar más fácilmente tu CSS, al ver qué reglas afectan al elemento
   (Pestaña Estilos en Chrome)
3. Puedes jugar con CSS y HTML sin volver a cargar la página.

Además, Chrome recuerda las últimas 5 selecciones en la pestaña Elementos. $0 es la selección actual, mientras que $1 es la selección anterior. Puedes subir hasta $4 . De esa manera, puede depurar fácilmente varios nodos sin cambiar constantemente la selección a ellos.

Puedes leer más en Google Developers .

Usando setters y getters para encontrar lo que cambió una propiedad

Digamos que tienes un objeto como este:

var myObject = {
    name: 'Peter'
}

Más adelante en tu código, intentas acceder a myObject.name y obtienes a George en lugar de a Peter . Comienzas a preguntarte quién lo cambió y dónde se cambió exactamente. Hay una manera de colocar un debugger (o algo más) en cada conjunto (cada vez que alguien hace myObject.name = 'something' ):

var myObject = {
    _name: 'Peter',
    set name(name){debugger;this._name=name},
    get name(){return this._name}
}

Tenga en cuenta que cambiamos el name a _name y vamos a definir un setter y un getter para el name .

set name es el setter. Ese es un punto ideal donde puede colocar el debugger , console.trace() o cualquier otra cosa que necesite para la depuración. El configurador establecerá el valor para el nombre en _name . El captador (la parte del get name ) leerá el valor desde allí. Ahora tenemos un objeto totalmente funcional con funcionalidad de depuración.

La mayoría de las veces, sin embargo, el objeto que se cambia no está bajo nuestro control. Afortunadamente, podemos definir setters y getters en objetos existentes para depurarlos.

// First, save the name to _name, because we are going to use name for setter/getter
otherObject._name = otherObject.name;

// Create setter and getter
Object.defineProperty(otherObject, "name", {
    set: function(name) {debugger;this._name = name},
    get: function() {return this._name}
});

Echa un vistazo a los setters y getters en MDN para más información.

Soporte del navegador para setters / getters:

Romper cuando se llama una función

Para funciones nombradas (no anónimas), puede interrumpirse cuando se ejecuta la función.

debug(functionName);

La próxima vez functionName ejecute la functionName functionName, el depurador se detendrá en su primera línea.

Usando la consola

En muchos entornos, tiene acceso a un objeto de console global que contiene algunos métodos básicos para comunicarse con dispositivos de salida estándar. Más comúnmente, esta será la consola de JavaScript del navegador (consulte Chrome , Firefox , Safari y Edge para obtener más información).

// At its simplest, you can 'log' a string
console.log("Hello, World!");

// You can also log any number of comma-separated values
console.log("Hello", "World!");

// You can also use string substitution
console.log("%s %s", "Hello", "World!");

// You can also log any variable that exist in the same scope
var arr = [1, 2, 3];
console.log(arr.length, this);

Puede utilizar diferentes métodos de consola para resaltar su salida de diferentes maneras. Otros métodos también son útiles para una depuración más avanzada.

Para obtener más documentación, información sobre compatibilidad e instrucciones sobre cómo abrir la consola de su navegador, consulte el tema Consola .

Nota: si necesita ser compatible con IE9, elimine console.log o console.log sus llamadas de la siguiente manera, ya que la console no está definida hasta que se abren las Herramientas del desarrollador:

if (console) { //IE9 workaround
    console.log("test");
}