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.
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.
Observa el texto en el botón que aparece a continuación.
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 dedocument.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.
- Escribe
5 + 15
en Console. El resultado20
aparecerá debajo de la expresión (a menos que la expresión tome demasiado tiempo en evaluarse). - 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. 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
.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 como45
porque cuando se llama a la funciónadd
sin un segundo argumento,b
se establece de forma predeterminada como20
.
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 paradocument.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.