Ejecuta JavaScript en la consola

Kayce Basques

En este instructivo interactivo, se muestra cómo ejecutar JavaScript en la consola de Herramientas para desarrolladores de Chrome. Consulta Comienza a usar los mensajes de registro para aprender a registrar mensajes en la consola. Consulta Cómo comenzar a usar la depuración de JavaScript para obtener información sobre cómo pausar el código JavaScript y recorrerlo una línea a la vez.

Figura 1: La consola

Descripción general

La consola es una REPL, que significa lectura, evaluación, impresión y bucle. Lee el código JavaScript que escribes, evalúa el código, imprime el resultado de la expresión y, luego, regresa al primer paso.

Cómo configurar 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. Si sigues físicamente la conversación, es más probable que más adelante recuerdes los flujos de trabajo.

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

   

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

Cómo ver y cambiar el código JavaScript o DOM de la página

Cuando compilas o depuras una página, suele ser útil ejecutar sentencias en Console para cambiar el aspecto o la ejecución de la página.

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

   ¡Hola, mundo!

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

   

   Figura 3. Cómo 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 de REPL: lectura, evaluación, impresión y bucle. 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 JavaScript arbitrario que no esté relacionado con la página

A veces, lo que buscas es una zona de pruebas de código en la que puedas probar algo de código o probar nuevas funciones de JavaScript con las que no estás familiarizado. La consola es el 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 demore mucho tiempo en evaluarse).
2. Presiona Enter para evaluar la expresión. Console imprime el resultado de la expresión que se encuentra debajo del código. En la Figura 4 que aparece a continuación, se muestra 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;
   }
   

   Si no conoces la sintaxis b=20, consulta Cómo definir valores predeterminados para los argumentos de la función.

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

   add(25);
   

   

   Figura 4. Cómo se ve Console 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 la función. Si eso lleva demasiado tiempo, puedes usar el Administrador de tareas para cancelar el procesamiento que requiere mucho tiempo. Sin embargo, también hará que la página actual falle y se perderán todos los datos que ingresaste.

Próximos pasos

Consulta Cómo ejecutar 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 durante la ejecución. Mientras el servicio está pausado, puedes usar Console para ver y cambiar la window o la DOM de la página en ese momento. Esto crea un flujo de trabajo de depuración potente. Consulta Cómo comenzar a depurar JavaScript para obtener un instructivo interactivo.

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

Además, la consola también cuenta con un conjunto de funciones prácticas 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 está inspirada en jQuery, pero en realidad no es jQuery. Es solo un alias de document.querySelector().
• debug(function) establece de manera efectiva un punto de interrupción en la primera línea de esa función.
• keys(object) muestra un array que contiene las claves del objeto especificado.

Consulta la referencia de la API de Console Utilities para explorar todas sus funciones útiles.