Compartir a través de

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 de bucle de lectura eval-impresión (REPL).

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.

    La consola muestra el resultado de la expresión '2+2', de forma interactiva a medida que la escribe

  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.

    Ejecución de varias expresiones de JavaScript en sucesión

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.

    Autocompletar de consola de expresiones de JavaScript

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. Consulte Funciones y selectores de la utilidad de herramientas de consola.

La expresión $_ de la consola siempre contiene el último resultado

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. 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:

Presione Mayús+Entrar para escribir varias líneas de JavaScript. El valor resultante es output

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:

La consola reconoce expresiones multilínea mediante llaves y sangrías

Permitir pegar en la consola

La primera vez que intenta pegar contenido en la herramienta Consola , en lugar de pegarlo, se muestra un mensaje: "Advertencia: No pegue código en la consola de DevTools que no comprenda o no haya revisado usted mismo. Esto podría permitir a los atacantes robar su identidad o tomar el control del equipo. Escriba "permitir pegar" a continuación y presione Entrar para permitir el pegado."

Consola que muestra la advertencia auto-XSS

Esta advertencia ayuda a evitar ataques de scripting entre sitios (auto-XSS) en los usuarios finales. Para pegar código, escriba primero permitir pegar en la consola y, a continuación, presione Entrar. A continuación, pegue el contenido. O bien, inicie Edge con la marca siguiente.

Pegar en el editor de fragmentos de código de la herramienta Orígenes es similar; consulte Permitir pegar en el editor de fragmentos de código en Ejecutar fragmentos de código de JavaScript en cualquier página web.

Deshabilite las advertencias de auto-XSS iniciando Edge con una marca de línea de comandos

Para evitar las advertencias anteriores e inmediatamente permitir pegar en la herramienta Consola y en el editor de fragmentos de código de la herramienta Orígenes , como para pruebas automatizadas, inicie Microsoft Edge desde la línea de comandos con la siguiente marca: --unsafely-disable-devtools-self-xss-warnings. La marca se aplica a una única sesión de Microsoft Edge.

Por ejemplo, en Windows:

Edge Estable:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Edge Beta:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge Beta\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Desarrollo perimetral:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge Dev\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Borde controlado:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge SxS\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

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();

    La consola muestra el resultado de una solicitud de captura asincrónica de nivel superior

    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:

    Mostrar el último resultado en un formato legible mediante

    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.

Vea también

GitHub:

MDN:

Wikipedia: