Ejecuta JavaScript en la consola

Este instructivo interactivo 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 Console. Consulta Cómo comenzar a depurar JavaScript para obtener información sobre cómo pausar el código JavaScript y revisarlo de a una línea por vez.

Figura 1: La consola:

Descripción general

La consola es un 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 tu expresión y, luego, regresa 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 realizas un seguimiento físico, 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 o ChromeOS) para abrir la Consola, justo aquí en esta página.

   

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

Visualiza y cambia el 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 la consola 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: leer, evaluar, imprimir y repetir. Después de evaluar el código, un REPL imprime el resultado de la expresión. Por lo tanto, "Hello, Console!" debe ser el resultado de la evaluación de document.getElementById('hello').textContent = 'Hello, Console!'.

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

A veces, solo necesitas una zona de pruebas de código donde puedas probar código o probar 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 Console. El resultado 20 aparecerá debajo de la expresión (a menos que la expresión tome demasiado tiempo en evaluarse).
2. Presiona Enter para evaluar la expresión. Console imprime el resultado de la expresión 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 Console. Intenta escribirlo, carácter por carácter, en lugar de copiarlo y pegarlo.

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

   Consulta Define valores predeterminados para argumentos de funciones si no estás familiarizado con la sintaxis b=20.

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

   add(25);
   

   

   Figura 4. Cómo 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 como 20.

No podrás ejecutar ningún código en esta sesión de la consola hasta que se muestre tu 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 pierdan todos los datos que ingresaste.

Próximos pasos

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

Herramientas para desarrolladores te permite pausar una secuencia de comandos durante su ejecución. Mientras estás en pausa, puedes usar la consola para ver y cambiar los valores de window o DOM de la página en ese momento. Esto brinda un flujo de trabajo de depuración potente. Consulta Cómo comenzar a depurar JavaScript para obtener un instructivo interactivo.

La consola también admite un conjunto de especificadores de formato. Consulta Da formato a los mensajes y dales estilo en Console a fin de explorar todos los métodos para darles formato y diseñar mensajes de Console.

Además de eso, Console también cuenta con un conjunto de funciones útiles 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 no es jQuery en realidad. 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) muestra un array que contiene las claves del objeto especificado.

Consulta la Referencia de la API de Console Utilities para explorar todas las funciones prácticas.