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 Logging para aprender a registrar mensajes en la consola. Consulta Cómo comenzar Con la depuración de JavaScript para aprender a detener el código JavaScript y lo recorriste una línea en una vez.

Figura 1. La consola

Descripción general

La consola es una REPL, que significa lectura, evaluación, impresión y bucle. Lee el JavaScript que escribes en él, evalúa tu código, imprime el resultado de tu expression y, luego, vuelve 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. Cuándo sigas físicamente, es más probable que recuerdes los flujos de trabajo más adelante.

1. Presiona Comando + Opción + J (en Mac) o Control + Mayúsculas + J (Windows, Linux y ChromeOS) para abrir la 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 compiles o depures una página, suele ser útil ejecutar sentencias en la consola para hacer lo siguiente: 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. luego presiona Enter 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: read, evaluar, imprimir, repetir indefinidamente. 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 la evaluación document.getElementById('hello').textContent = 'Hello, Console!'

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

A veces, lo único que quieres es una zona de pruebas de código donde puedas probar código o probar JavaScript nuevo. 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 tu expresión (a menos que tu expresión demore mucho tiempo en evaluarse).
2. Presiona Enter para evaluar la expresión. Impresiones de la consola el resultado de la expresión debajo de tu código. En la Figura 4 que aparece a continuación, se muestra cómo debería funcionar tu consola después de evaluar esta expresión.

3. Escribe el siguiente código en la consola. Escríbelo carácter por carácter copiar y pegar.

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

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

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, El valor predeterminado de b es 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 tarda demasiado, puedes usar el Administrador de tareas para cancelar los cálculos que consumen mucho tiempo. Sin embargo, también fallará la página actual 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 hace que para lograr un flujo de trabajo de depuración potente. Consulta Cómo comenzar a depurar JavaScript para obtener una vista interactiva .

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 la sintaxis está inspirada en jQuery, pero en realidad no es jQuery. Es solo un alias del 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.