path: root/files/es/tools/web_console/the_command_line_interpreter/index.html

---
title: La línea de comandos del intérprete de JavaScript
slug: Tools/Web_Console/The_command_line_interpreter
tags:
  - Debugging
  - Depuración
  - Desarrollo web
  - consola web
translation_of: Tools/Web_Console/The_command_line_interpreter
original_slug: Tools/Web_Console/La_línea_de_comandos_del_intérprete
---
<div>{{ToolsSidebar}}</div>

<p>Puedes interpretar expresiones JavaScript en tiempo real utilizando el intérprete proporcionado por la Consola web. Tiene dos modos: entrada unilínea y entrada multilínea.</p>

<h2 id="Modo_unilínea">Modo unilínea</h2>

<p>Para entrada de una sola línea, puedes escribir expresiones JavaScript en el campo en la parte inferior del registro de la consola, en el indicador <strong>&gt;&gt;</strong>.</p>

<p><img alt="La consola web, mostrando el modo unilínea" src="https://mdn.mozillademos.org/files/16965/web_console_single.png" style="display: block; height: 704px; margin-left: auto; margin-right: auto; width: 1952px;"></p>

<p>Para ingresar expresiones en el modo unilínea, escribe en el indicador y presiona <kbd>Intro</kbd>. Para ingresar expresiones de varias líneas, presiona <kbd>Mayús</kbd>+<kbd>Intro</kbd> después de escribir cada línea, luego <kbd>Intro</kbd> para ejecutar todas las líneas ingresadas.</p>

<p>La expresión que escribas se repite debajo de la petición de entrada, seguida del resultado.</p>

<p>Si tu entrada no parece estar completa cuando presiones <kbd>Intro</kbd>, la consola lo trata como <kbd>Mayús</kbd>+<kbd>Intro</kbd>, lo cual te permite finalizar tu entrada.</p>

<p>Por ejemplo, si escribes:</p>

<pre class="brush: js notranslate">function foo() {</pre>

<p>y luego <kbd>Intro</kbd>, la consola no ejecuta inmediatamente la entrada, pero se comporta como si hubieras presionado <kbd>Mayús</kbd>+<kbd>Intro</kbd>, para que puedas terminar de ingresar la definición de la función.</p>

<h2 id="Modo_multilínea">Modo multilínea</h2>

<p>Para la entrada multilínea, haz clic en el icono de "panel dividido" en el lado derecho del campo de entrada unilínea, o presiona <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) o <kbd>Cmd</kbd>+<kbd>B</kbd> (macOS). El panel de edición multilínea se abre en el lado izquierdo de la Consola web.</p>

<p><img alt="Modo multilínea en la consola web" src="https://mdn.mozillademos.org/files/16966/web_console_multi.png" style="border-style: solid; border-width: 1px; height: 700px; width: 1946px;"></p>

<p>De manera predeterminada, en este modo puedes ingresar múltiples líneas de JavaScript, presionando <kbd>Intro</kbd> después de cada una. Para ejecutar el fragmento que se encuentre actualmente en el panel de edición, haz clic en el botón <strong>Ejecutar</strong> o presiona <kbd>Ctrl</kbd>+<kbd>Intro</kbd> (o <kbd>Cmd</kbd>+<kbd>Intro</kbd> en MacOS). El fragmento se repite debajo de la petición de entrada (en el panel del lado derecho), seguido del resultado. También puedes seleccionar un rango de líneas en el panel de edición y ejecutar solo el código en esas líneas.</p>

<p>A partir de Firefox 76, si el fragmento de código tiene más de cinco líneas, solo las primeras cinco líneas se repiten en la consola, precedidas por un triángulo desplegable (o "twistie") y seguidos por puntos suspensivos (…). Haz clic en cualquier parte del área que contiene el código reproducido para mostrar el fragmento completo; haz clic de nuevo en esa área para contraerlo.</p>

<p>Puedes abrir archivos en el modo multilínea y guardar el contenido actual del panel de edición en un archivo.</p>

<ul>
 <li>Para abrir un archivo, presiona <kbd>Ctrl</kbd>+<kbd>O</kbd> (<kbd>Cmd</kbd>+<kbd>O</kbd> en MacOS). Se abre un cuadro de diálogo de archivo para que puedas seleccionar el archivo que deseas abrir.</li>
 <li>Para guardar el contenido del panel de edición, presiona <kbd>Ctrl</kbd>+<kbd>S</kbd> (<kbd>Cmd</kbd>+<kbd>S</kbd> en MacOS). Se abre un cuadro de diálogo de archivo para que puedas especificar la ubicación en la que deseas guardar el archivo.</li>
</ul>

<p>Para volver al modo unilínea, haz clic en el icono <strong>X</strong> en la parte superior del panel de edición multilínea o presiona <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) o <kbd>Cmd</kbd>+<kbd>B</kbd> (MacOS).</p>

<h2 id="Acceder_a_variables">Acceder a variables</h2>

<p>Puedes acceder a las variables definidas en la página, tanto variables integradas como <code>window</code> como variables agregadas por bibliotecas de JavaScript como <em>jQuery</em>:</p>

<p><img alt="Accder a variables" src="https://mdn.mozillademos.org/files/7367/commandline-accessbuiltin.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7369/commandline-accesspageadded.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h2 id="Autocompletado">Autocompletado</h2>

<p>El editor tiene autocompletado: ingresa las primeras letras y aparecerá una ventana emergente con posibles terminaciones:</p>

<p><img alt="Autocompletado" src="https://mdn.mozillademos.org/files/16426/console_autocomplete_cropped.png" style="border: 1px solid black; display: block; height: 299px; margin-left: auto; margin-right: auto; width: 302px;"></p>

<p>Presiona <kbd>Intro</kbd>, <kbd>Tab</kbd> o la tecla de flecha derecha para aceptar la sugerencia, usa las flechas arriba/abajo para pasar a una diferente sugerencia, o simplemente sigue escribiendo si no te gusta ninguna de las sugerencias.</p>

<p>Las sugerencias de autocompletado de la consola no distinguen entre mayúsculas y minúsculas.</p>

<p>La consola sugiere terminaciones del ámbito del marco de la pila que se está ejecutando actualmente. Esto significa que si has alcanzado un punto de interrupción en una función, obtienes autocompletado para los objetos locales a la función.</p>

<p>También obtienes sugerencias de autocompletado para elementos de arreglo:</p>

<p><img alt="Autocompletado en arreglos" src="https://mdn.mozillademos.org/files/16440/arrayList_autocomplete.png" style="border: 1px solid black; display: block; height: 271px; margin-left: auto; margin-right: auto; width: 800px;"></p>

<p>Puedes habilitar o deshabilitar el autocompletado a través del menú Configuración ("engrane") en la barra de herramientas de la Consola web. El elemento de menú <strong>Habilitar autocompletado</strong> tiene una marca de verificación junto a él cuando la función está habilitada, que falta cuando está inhabilitada. Selecciona el elemento del menú para cambiar el estado.</p>

<h2 id="Evaluación_instantánea">Evaluación instantánea</h2>

<div class="blockIndicator note">
<p>Esta característica está disponible en Firefox Nightly, en las versiones etiquetadas con 74 y posteriores.</p>
</div>

<p>Cuando la característica de "evaluación instantánea" está habilitada, el intérprete muestra los resultados de las expresiones mientras las escribes en el modo unilínea. Ten en cuenta que el resultado puede ser un mensaje de error. Las expresiones que tienen efectos secundarios no se evalúan.</p>

<p>Puedes habilitar o deshabilitar la evaluación instantánea a través del menú Configuración ("engrane") en la barra de herramientas de la Consola web. El elemento <strong>Evaluación instantánea</strong> del menú tiene una marca de verificación junto a él cuando la característica está habilitada, y falta cuando está inhabilitada. Selecciona el elemento del menú para cambiar el estado.</p>

<h2 id="Contexto_de_ejecución">Contexto de ejecución</h2>

<p>El código que has ejecutado se convierte en parte del contexto de ejecución, independientemente del modo de edición en el que te encontrabas cuando lo ejecutaste. Por ejemplo, si escribes una definición de función en el editor multilínea y haces clic en <strong>Ejecutar</strong>, puedes cambiar al modo unilínea y seguir utilizando tu función.</p>

<h2 id="Resaltado_de_sintaxis">Resaltado de sintaxis</h2>

<p><img alt="La salida de la consola mostrando la sintaxis resaltada" src="https://mdn.mozillademos.org/files/16470/console_syntaxHighlighting.png" style="border: 1px solid black; display: block; height: 310px; margin-left: auto; margin-right: auto; width: 452px;"></p>

<p>El texto que ingreses tiene resaltado de sintaxis tan pronto como hayas escrito lo suficiente para que el resaltador lo analice e infiera el significado de las "palabras".</p>

<p>La salida también se resalta cuando es apropiado.</p>

<div class="blockIndicator note">
<p><strong>Nota:</strong> El resaltado de sintaxis no está visible en tu navegador si se han habilitado las funciones de accesibilidad.</p>
</div>

<h2 id="Historial_de_ejecución">Historial de ejecución</h2>

<p>El intérprete recuerda las expresiones que has escrito. Para avanzar y retroceder en tu historial:</p>

<ul>
 <li>En el modo unilínea, usa las flechas hacia arriba y hacia abajo.</li>
 <li>En el modo multilínea, utiliza los iconos <strong>⋀</strong> y <strong>⋁</strong> de la barra de herramientas del panel de edición.</li>
</ul>

<p>El historial de expresiones se conserva entre sesiones. Para borrar el historial, usa la <a href="/es/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands">función auxiliar</a> <code>clearHistory()</code>.</p>

<p>Puedes iniciar una búsqueda inversa a través del historial de expresiones, al igual que en bash en Linux y Mac o PowerShell en Windows. En Windows y Linux, presiona <kbd>F9</kbd>. En Mac, presiona <kbd>Ctrl</kbd>+<kbd>R</kbd> (<strong>Nota:</strong> ¡no <kbd>Cmd</kbd>+<kbd>R</kbd>!) para iniciar la búsqueda inversa.</p>

<p><img alt="Búsqueda inversa" src="https://mdn.mozillademos.org/files/16468/reverse_search.png" style="border: 1px solid black; display: block; height: 335px; margin: 0px auto; width: 500px;"></p>

<p>Ingresa el texto que deseas buscar en el cuadro de entrada en la parte inferior de la consola. Empieza a escribir parte de la expresión que estás buscando y la primera coincidencia se mostrará en la consola. Si escribes <kbd>F9</kbd> repetidamente en Windows y Linux (<kbd>Ctrl</kbd>+<kbd>R</kbd> en Mac), retrocedes por las coincidencias.</p>

<p><img alt="Ejemplo de búsqueda inversa" src="https://mdn.mozillademos.org/files/16469/reverse_search_example.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>

<p>Una vez que hayas iniciado la búsqueda inversa, puedes usar <kbd>Mayús</kbd>+<kbd>F9</kbd> en Windows o Linux (<kbd>Ctrl</kbd>+<kbd>S</kbd> en Mac) para buscar hacia adelante en la lista de coincidencias. También puedes utilizar los iconos <strong>⋀</strong> y <strong>⋁</strong> en la barra de búsqueda de expresiones.</p>

<p>Cuando encuentres la expresión que deseas, presiona <kbd>Intro</kbd> (<kbd>Intro</kbd>) para ejecutar la instrucción.</p>

<h2 id="Trabajando_con_iframes">Trabajando con <code>iframe</code>s</h2>

<p>Si una página contiene <a href="/es/docs/Web/HTML/Element/iframe">iframes</a> incrustados, puedes utilizar la función <code>cd()</code> para cambiar el alcance de la consola a un <code>iframe</code> específico, y luego puedes ejecutar funciones definidas en el documento alojado por ese <code>iframe</code>. Hay tres formas de seleccionar un <code>iframe</code> usando <code>cd()</code>:</p>

<p>Puedes pasar el elemento <code>iframe</code> del DOM:</p>

<pre class="brush: js notranslate">var frame = document.getElementById("frame1");
cd(frame);</pre>

<p>Puedes pasar un selector de CSS que coincida con el <code>iframe</code>:</p>

<pre class="brush: js notranslate">cd("#frame1");</pre>

<p>Puedes pasar el objeto <code>window</code> global del <code>iframe</code>:</p>

<pre class="brush: js notranslate">var frame = document.getElementById("frame1");
cd(frame.contentWindow);
</pre>

<p>Para volver a cambiar el contexto al objeto <code>window</code> de nivel superior, llama a <code>cd()</code> sin argumentos:</p>

<pre class="brush: js notranslate">cd();</pre>

<p>Por ejemplo, supongamos que tenemos un documento que incluye un <code>iframe</code>:</p>

<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;iframe id="frame1" src="static/frame/my-frame1.html"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>El <code>iframe</code> define una nueva función:</p>

<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;script&gt;
      function whoAreYou() {
        return "Yo soy el frame1";
      }
   &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>Puedes cambiar el contexto al <code>iframe</code> de esta manera:</p>

<pre class="brush: js notranslate">cd("#frame1");</pre>

<p>Ahora verás que el objeto <code>window</code> global del documento es el <code>iframe</code>:</p>

<p><img alt="window global del documento" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png" style="display: block; height: 75px; margin-left: auto; margin-right: auto; width: 632px;">Y puedes llamar a la función definida en el <code>iframe</code>:</p>

<p><img alt="función en la consola web" src="https://mdn.mozillademos.org/files/7357/web-console-iframe-function.png" style="display: block; height: 77px; margin-left: auto; margin-right: auto; width: 632px;"></p>

<h2 id="Comandos_auxiliares">Comandos auxiliares</h2>

<p>{{ page("es/docs/Tools/Web_Console/Helpers", "Los comandos") }}</p>