Ejecuta JavaScript en la consola

Kayce Basques

En este instructivo interactivo, se muestra cómo ejecutar JavaScript en la consola de las herramientas para desarrolladores de Chrome. Consulta Comienza a registrar mensajes para aprender a registrar mensajes en la consola. Consulta Comienza a depurar JavaScript para aprender a pausar el código JavaScript y recorrerlo línea por línea.

Figura 1. La consola

Descripción general

La consola es un REPL, que significa Read, Evaluate, Print y Loop (leer, evaluar, imprimir y repetir). Lee el código JavaScript que escribes, evalúa tu código, imprime el resultado de tu expresión y, luego, vuelve al primer paso.

Configura Herramientas para desarrolladores

Este instructivo está diseñado para que puedas abrir la demostración y probar todos los flujos de trabajo por tu cuenta. Cuando sigues los pasos físicamente, es más probable que recuerdes los flujos de trabajo más adelante.

1. Presiona Comando + Opción + J (Mac) o Control + Mayúsculas + J (Windows, Linux, ChromeOS) para abrir la consola en esta misma página.

   

   Figura 2. Este instructivo a la izquierda y las Herramientas para desarrolladores a la derecha.

Ver y cambiar el JavaScript o el DOM de la página

Cuando compilas o depuras una página, a menudo es útil ejecutar instrucciones en la consola para cambiar el aspecto o el funcionamiento de la página.

1. Observa el texto del botón que aparece a continuación.

   Hello, World!

2. Escribe document.getElementById('hello').textContent = 'Hello, Console!' en la consola y, luego, presiona Intro para evaluar la expresión. Observa cómo cambia el texto dentro del botón.

   

   Figura 3. Así se ve la consola después de evaluar la expresión anterior.

   Debajo del código que evaluaste, verás "Hello, Console!". Recuerda los 4 pasos del REPL: leer, evaluar, imprimir y repetir. Después de evaluar tu código, un REPL imprime el resultado de la expresión. Por lo tanto, "Hello, Console!" debe ser el resultado de evaluar document.getElementById('hello').textContent = 'Hello, Console!'.

Ejecutar código JavaScript arbitrario que no esté relacionado con la página

A veces, solo quieres un espacio de pruebas de código en el que puedas probar código o experimentar con nuevas funciones de JavaScript con las que no estás familiarizado. La consola es un lugar perfecto para este tipo de experimentos.

1. Escribe 5 + 15 en la consola. El resultado 20 aparecerá debajo de la expresión (a menos que la expresión tarde demasiado en evaluarse).
2. Presiona Enter para evaluar la expresión. La consola imprimirá el resultado de la expresión debajo de tu código. En la Figura 4 que se muestra a continuación, se ilustra cómo debería verse tu consola después de evaluar esta expresión.

3. Escribe el siguiente código en la consola. Intenta escribirlo carácter por carácter en lugar de copiarlo y pegarlo.

   function add(a, b=20) {
     return a + b;
   }
   

4. Ahora, llama a la función que acabas de definir.

   add(25);
   

   

   Figura 4. Así se ve la consola después de evaluar las expresiones anteriores.

   add(25) se evalúa como 45 porque, cuando se llama a la función add sin un segundo argumento, b se establece de forma predeterminada en 20.

No podrás ejecutar ningún código en esta sesión de la consola hasta que se muestre el resultado de la función. Si eso tarda demasiado, puedes usar el Administrador de tareas para cancelar el cálculo que requiere mucho tiempo. Sin embargo, esto también provocará que falle la página actual y se perderán todos los datos que ingresaste.

Próximos pasos

Consulta Ejecuta JavaScript para explorar más funciones relacionadas con la ejecución de JavaScript en la consola.

Las Herramientas para desarrolladores te permiten pausar una secuencia de comandos en medio de su ejecución. Mientras la página está en pausa, puedes usar la consola para ver y cambiar el window o el DOM de la página en ese momento. Esto genera un flujo de trabajo de depuración potente. Consulta Comienza a depurar JavaScript para ver un instructivo interactivo.

La consola también admite un conjunto de especificadores de formato. Consulta Cómo dar formato y aplicar estilo a los mensajes en la consola para explorar todos los métodos para dar formato y aplicar estilo a los mensajes de la consola.

Además de eso, la consola también tiene un conjunto de funciones convenientes que facilitan la interacción con una página. Por ejemplo:

• En lugar de escribir document.querySelector() para seleccionar un elemento, puedes escribir $(). Esta sintaxis se inspira en jQuery, pero no es jQuery. Es solo un alias para document.querySelector().
• debug(function) establece de manera efectiva un punto de interrupción en la primera línea de esa función.
• keys(object) devuelve un array que contiene las claves del objeto especificado.

Consulta la referencia de la API de Console Utilities para explorar todas las funciones de conveniencia.