Introducción a la ejecución de JavaScript en la consola

Este tutorial interactivo muestra cómo ejecutar JavaScript en la consolade Microsoft Edge DevTools. Para obtener más información sobre cómo registrar mensajes en la consola, vaya a introducción a la creación de mensajes de registro. Para obtener más información sobre cómo pausar el código de JavaScript y resaltarlo de línea en línea, vaya a introducción a la depuración de JavaScript.

La consola

Introducción

La consola es una REPL, lo que significa lectura, evaluación, impresión y bucle. Lee el código JavaScript que escribe en él, evalúa el código, imprime el resultado de la expresióny, a continuación, retrocede al primer paso.

Configurar DevTools

Este tutorial está diseñado para que abras la demostración y pruebe todos los flujos de trabajo. Cuando sigues físicamente, es más probable que recuerdes los flujos de trabajo más adelante.

  1. Seleccione Control + Shift + J \ (Windows, Linux ) o Command + Option + J \ (MacOS ) para abrir la consola.

  2. Espere Control \ (Windows, Linux ) o Command \ (MacOS ) y elija ejemplo de JavaScript de consola para abrirlo en una ventana nueva.

    La página de ejemplo de JavaScript de la consola de la izquierda y DevTools a la derecha

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

Al crear o depurar una página, a menudo es útil ejecutar instrucciones en la consola para cambiar el aspecto o la ejecución de la página.

  1. Observe el texto en el botón.

  2. Escriba document.getElementById('hello').textContent = 'Hello, Console!' la consola y, después, seleccione Enter para evaluar la expresión. Observe cómo cambia el texto que se encuentra dentro del botón.

    Aspecto de la consola después de la evaluación de la expresión

    Debajo del código que hayas evaluado verás "Hello, Console!" . Recupere los cuatro pasos de REPL: leer, evaluar, imprimir, repetir. Después de evaluar el código, una 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, solo deseas un código de animación donde puedas probar algún código o probar nuevas características de JavaScript con las que no estás familiarizado. La consola es un lugar ideal para estos tipos de experimentos.

  1. Escriba 5 + 15 la consola y seleccione Enter para evaluar la expresión. La consola imprime el resultado de la expresión que está debajo del código. En la siguiente ilustración, la consola debería mostrar el resultado después de evaluar la expresión.

  2. Escriba el código siguiente en la consola. Pruebe a escribirla, carácter a carácter, en lugar de pegarla.

    function add(a, b=20)
    

    Si no está familiarizado con la b=20 sintaxis, navegue para definir los valores predeterminados de los argumentos de la función.

  3. Ahora, ejecute la función que acaba de definir.

    add(25);
    

    add(25) se evalúa como 45 porque cuando add se llama a la función sin un segundo argumento, el b valor predeterminado es 20 .

Pasos siguientes

DevTools le permite pausar un script en mitad de la ejecución. Mientras está pausado, puede usar la consola para ver y cambiar la window o DOM de la página en ese momento. El flujo de trabajo hace que el flujo de trabajo de depuración sea eficaz. Para obtener un tutorial interactivo, vaya a introducción a la depuración de JavaScript.

La consola también tiene un conjunto de funciones de comodidad que hacen que sea más fácil interactuar con una página. Por ejemplo:

  • En lugar de escribir document.querySelector() para seleccionar un elemento, escriba $() . Esta sintaxis está inspirada en jQuery, pero en realidad no es jQuery. Es solo un alias para document.querySelector() .
  • debug(function) establece de forma eficaz un punto de interrupción en la primera línea de esa función.
  • keys(object) Devuelve una matriz que contiene las claves del objeto especificado.

Para obtener más información sobre las funciones de conveniencia, vaya a referencia de la API de utilidades de consola.

Contactar al equipo de Microsoft Edge DevTools

Use las siguientes opciones para discutir las nuevas características y cambios de la publicación, o cualquier otro tema relacionado con DevTools.

  • Envíe sus comentarios con el icono Enviar comentarios o seleccione Alt + Shift + I \ (Windows, Linux ) o Option + Shift + I \ (MacOS ) en DevTools.
  • Tweet a @EdgeDevTools.
  • Enviar una sugerencia a la webque queremos.
  • Para archivar errores sobre este artículo, use la siguiente sección de comentarios .

El icono enviar comentarios en el DevTools de Microsoft Edge

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0.
La página original se encuentra aquí y está modificada por Kayce vascos \ (redactor técnico, Chrome DevTools \ & Lighthouse ).

Licencia de Creative Commons
Este trabajo dispone de licencia conforme a Licencia internacional de Creative Commons Attribution 4.0.