Ejecución de JavaScript en la consola

Puede escribir cualquier expresión, instrucción o fragmento de código de JavaScript en la consola y se ejecuta de forma inmediata e interactiva a medida que escribe. Esto es posible porque la herramienta Consola de DevTools es un entorno REPL . REPL significa Lectura, Evaluación, Impresión y Bucle.

La consola:

1. Lee el Código JavaScript que escribe en él.
2. Evalúa el código.
3. Imprime el resultado de la expresión.
4. Vuelve al primer paso.

Para escribir instrucciones y expresiones de JavaScript de forma interactiva en la consola:

1. Haga clic con el botón derecho en una página web y, a continuación, seleccione Inspeccionar. Se abre DevTools. O bien, presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS) para abrir directamente la consola de DevTools.

2. Si es necesario, haga clic en DevTools para darle el foco y, a continuación, presione Esc para abrir la consola.

3. Haga clic en la consola y 2+2escriba , sin presionar Entrar.

   La consola muestra inmediatamente el resultado 4 en la línea siguiente mientras escribe. La Eager evaluation característica le ayuda a escribir JavaScript válido. La consola muestra el resultado mientras escribe, independientemente de si javaScript es correcto e independientemente de si existe un resultado válido.

   

4. Al presionar Entrar, la consola ejecuta el comando JavaScript (expresión o instrucción), muestra el resultado y, a continuación, mueve el cursor hacia abajo para que pueda escribir el siguiente comando de JavaScript.

   

Autocompletar para escribir expresiones complejas

La consola le ayuda a escribir JavaScript complejo mediante la autocompletar. Esta característica es una excelente manera de obtener información sobre los métodos de JavaScript que no conocía antes.

Para probar la autocompletar al escribir expresiones de varias partes:

1. Tipo doc.

2. Presione las teclas de flecha para resaltar document en el menú desplegable.

3. Presione Tab para seleccionar document.

4. Tipo .bo.

5. Presione Tab para seleccionar document.body.

6. Escriba otro . para obtener una lista grande de las posibles propiedades y métodos disponibles en el cuerpo de la página web actual.

   

Historial de la consola

Al igual que con muchos otros entornos de línea de comandos, un historial de los comandos especificados está disponible para su reutilización. Presione Flecha arriba para mostrar los comandos que especificó anteriormente.

De forma similar, la autocompletación mantiene un historial de los comandos que escribió anteriormente. Puede escribir las primeras letras de los comandos anteriores y las opciones anteriores aparecen en un cuadro de texto.

Además, la consola también ofrece bastantes métodos de utilidad que facilitan la vida. Por ejemplo, $_ siempre contiene el resultado de la última expresión que ejecutó en la consola.

Ediciones multilínea

De forma predeterminada, la consola solo proporciona una línea para escribir la expresión de JavaScript. El código se ejecuta al presionar Entrar. La limitación de una línea puede frustrar. Para evitar la limitación de 1 línea, presione Mayús+Entrar en lugar de Entrar. En el ejemplo siguiente, el valor mostrado es el resultado de todas las líneas (instrucciones) que se ejecutan en orden:

Si inicia una instrucción de varias líneas en la consola, el bloque de código se reconoce y aplica sangría automáticamente. Por ejemplo, si inicia una instrucción block, si escribe una llave, se aplica sangría automáticamente a la siguiente línea:

Solicitudes de red mediante await() de nivel superior

Aparte de en sus propios scripts, la consola admite await de nivel superior para ejecutar JavaScript asincrónico arbitrario en él. Por ejemplo, use la fetch API sin ajustar la await instrucción con una función asincrónica.

Para obtener los últimos 50 problemas que se han archivado en Microsoft Edge Developer Tools para Visual Studio Code repositorio de GitHub:

1. En DevTools, abra la consola.

2. Copie y pegue el siguiente fragmento de código para obtener un objeto que contiene 10 entradas:

   await ( await fetch(
   'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1'
   )).json();
   

   

   Las 10 entradas son difíciles de reconocer, ya que se muestra una gran cantidad de información.

3. Opcionalmente, use el console.table() método de registro para recibir solo la información en la que está interesado:

   

   Para reutilizar los datos devueltos desde una expresión, use el copy() método de utilidad de la consola.

4. Pegue el código siguiente. Envía la solicitud y copia los datos de la respuesta en el Portapapeles:

   copy(await (await fetch(
   'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1'
   )).json())
   

La consola es una excelente manera de practicar JavaScript y realizar algunos cálculos rápidos. La potencia real es el hecho de que tiene acceso al objeto de ventana . Consulte Interacción con el DOM mediante la consola.