diff options
Diffstat (limited to 'files/es/tools/web_console')
4 files changed, 951 insertions, 0 deletions
diff --git a/files/es/tools/web_console/console_messages/index.html b/files/es/tools/web_console/console_messages/index.html new file mode 100644 index 0000000000..102a69d2ef --- /dev/null +++ b/files/es/tools/web_console/console_messages/index.html @@ -0,0 +1,391 @@ +--- +title: Consola de mensajes +slug: Tools/Web_Console/Console_messages +tags: + - Consola + - Herramientas + - Herramientas de desarrollo +translation_of: Tools/Web_Console/Console_messages +--- +<p dir="ltr">La mayor parte de la Consola Web está ocupada por el panel de visualización de mensaje:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11661/web-console-message-pane.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 952px;"></p> + +<p>Cada mensaje se muestra como una fila separada</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <td><strong>Tiempo</strong></td> + <td>La hora a la que se registró el mensaje. Esto no se muestra por defecto: Usted puede ver el tiempo marcado usando una configuracion en la <a href="/en-US/docs/barradeherramientas">barra de herramientas</a></td> + </tr> + <tr> + <td><strong>Categoria</strong></td> + <td> + <p><strong>Categoria</strong>: Esta indicacion nos revela de que trata el mensaje:</p> + + <ul style="margin-left: 40px;"> + <li><strong>Negro</strong>: Solicitud de red</li> + <li><span style="color: #0099ff;"><strong>Azul</strong></span>: CSS advertencia/error/registro</li> + <li><strong><span style="color: #ff8c00;">Naranja</span></strong>: JavaScript advertencia/error</li> + <li><span style="color: #ff0000;"><strong>Rojo</strong></span>: Advertencia de seguridad/error</li> + <li><span style="color: #90b090;"><strong>Verde</strong></span>: Registro de servidor</li> + <li><span style="color: #a9a9a9;"><strong>Gris claro</strong></span>: <a href="/en-US/docs/console">Consola</a> API mensajes</li> + <li><span style="color: #696969;"><strong>Gris oscuro</strong></span>: de entrada/salida desde el <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">intérprete de línea de Comando</a></li> + </ul> + </td> + </tr> + <tr> + <td><strong>Tipo</strong></td> + <td>Para todos los mensajes excepto solicitud de red y entrada interectiva/salida de un icono de un error(X), una advertencia(!) o un mensaje informativo de registro (i).</td> + </tr> + <tr> + <td><strong>Mensaje</strong></td> + <td>El cuerpo del mensaje.</td> + </tr> + <tr> + <td><strong>Número de apariciones</strong></td> + <td>Si una línea que genera una advertencia o error que ha sido ejecutado por mas de una vez, sólo se registra una vez y este contador parece indicar cuántas veces se encontró.</td> + </tr> + <tr> + <td><strong>Nombre y número de línea</strong></td> + <td> + <p>Para JavaScript, CSS y los mensajes de consola de la API el mensaje se puede rastrear a una línea de código específica. La consola proporciona un enlace con el nombre del archivo y el número de línea que generó el mensaje.</p> + + <p>A partir de Firefox 36, esto incluye también el número de columna.</p> + </td> + </tr> + </tbody> +</table> + +<p>De forma predeterminada, la consola se borra cada vez que navega a una nueva página o vuevle a cargar la página actual. Para cambiar este comportamiento, comprueba "Activar registros persistentes" en la <a href="/en-US/docs/Tools_Toolbox#Common_preferences">Configuración</a>.</p> + +<h2 id="Categorías_de_los_mensajes">Categorías de los mensajes</h2> + +<h3 id="Red">Red</h3> + +<div class="note"> +<p>Los mensajes de registro de la red no se muestran por defecto. Utiliza la función de <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtrar</a> para mostrarlos</p> +</div> + +<p>Las solicitudes de red están conectadas con una línea que tiene este aspecto:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5593/web-console-message-request-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <td><strong>Time</strong></td> + <td>La hora a la que se registró el mensaje.</td> + </tr> + <tr> + <td><strong>Category</strong></td> + <td>Indica que el mensaje es una solicitud HTTP.</td> + </tr> + <tr> + <td><strong>Method</strong></td> + <td> + <p>El método específico de la petición HTTP.</p> + + <p>Si la petición se hizo como una <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, hay una nota adicional que indica ésto:</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/10167/web-console-xhr.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 648px;"></p> + </td> + </tr> + <tr> + <td><strong>URI</strong></td> + <td>El URI de destino.</td> + </tr> + <tr> + <td><strong>Summary</strong></td> + <td>La versión de HTTP, código de estado, y el tiempo que tarda en completarse.</td> + </tr> + </tbody> +</table> + +<h4 id="Revisando_los_detalles_de_la_petición_de_red">Revisando los detalles de la petición de red</h4> + +<p>Si hace clic en el mensaje, se le redirige al <a href="/en-US/docs/Tools/Network_Monitor">Panel de Red</a> donde se selecciona la petición y más detalles de la petición y la respuesta se muestran en el panel lateral en el lado derecho.</p> + +<p>Puedes acceder a este detalla en linea, sin dejar la Consola Web. Las entradas de peticiones de red obtienen una flecha a su lado. Clícala par ver:</p> + +<p>Encabezados: encabezados de petición y respuesta.</p> + +<p>Respuesta: el cuerpo de la respuesta</p> + +<p>Cookies: cualquier cookie que fuera enviada junto con la solicitud.</p> + +<h3 id="JS">JS</h3> + +<p>Los mensajes de JavaScript tienen el siguiente aspecto:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7101/js-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="CSS">CSS</h3> + +<div class="note"> +<p>CSS warnings and reflow messages are not shown by default. Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p> +</div> + +<p>Los mensajes CSS tienen el siguiente aspecto:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h4 id="Eventos_de_reflujo_Reflow_events">Eventos de reflujo (Reflow events)</h4> + +<p>La consola Web también registra los eventos de reflujo en la categoría de CSS. Un reflujo es el nombre que se da a la operación en la que el navegador calcula la distribución de la totalidad o parte de la página. Los reflujos se producen cuando ocurre un cambio en una página y el navegador cree que afecta al diseño. Muchos eventos pueden desencadenar reflujos, incluso: cambiar el tamaño de la ventana del navegador, activar las pseudoclases como: <a href="/en-US/docs/Web/CSS/:hover">hover</a>, o manipular el DOM en JavaScript.</p> + +<p>Debido a que los reflujos pueden ser computacionalmente costosos y afectar directamente a la interfaz de usuario, pueden tener un gran impacto en la capacidad de respuesta de un sitio web o aplicación web. Mediante el registro de eventos de reflujo la consola Web le puede dar una idea de cuando se activan los eventos de reflujo, el tiempo que tardan en ejecutarse y, si los reflujos son <a href="/en-US/docs/Tools/Web_Console/Console_messages#Synchronous_and_asynchronous_reflows">reflujos sínronos</a> <span id="ouHighlight__39_47TO35_43">activados</span><span id="noHighlight_0.171338285947087"> </span><span id="ouHighlight__49_52TO45_49">desde</span><span id="noHighlight_0.9176767211697917"> </span><span id="ouHighlight__54_63TO51_60">JavaScript</span><span id="noHighlight_0.15245612256799834">,</span><span id="noHighlight_0.6146070317208301"> </span><span id="ouHighlight__66_70TO63_66">cuyo</span><span id="noHighlight_0.7150414780955989"> </span><span id="ouHighlight__72_75TO68_73">código</span><span id="noHighlight_0.46273609600296195"> </span><span id="ouHighlight__87_90TO75_77">les</span><span id="noHighlight_0.04020396857638897"> </span><span id="ouHighlight__77_85TO79_85">dispara</span><span id="noHighlight_0.23969500573306946">.</span>.</p> + +<p>Los eventos de reflujo se registran como mensajes "Reflow", a diferencia de los errores CSS o advertencias. De forma predeterminada, están deshabilitados. Puede activarlos haciendo clic en el botón "CSS" en la <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">barra de herramientasr</a> y seleccionar "Reflows".</p> + +<p>Cada mensaje está marcado como "reflujo" y muestra el tiempo necesario para ejecutarse:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6365/web-console-reflow-asynch.png" style="display: block; height: 53px; margin-left: auto; margin-right: auto; width: 554px;">Si el reflujo es un reflujo síncrono accionado desde JavaScript, también muestra un enlace a la línea de código que lo provocó:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6367/web-console-reflow-synch.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 554px;">Haga clic en el enlace para abrir el archivo en el <a href="/en-US/docs/Tools/Debugger">Debugger</a>.</p> + +<h4 id="Reflujos_síncronos_y_asíncronos"><a name="synchronous-and-asynchronous-reflows">Reflujos síncronos y asíncronos</a></h4> + +<p>Si se hace un cambio que invalida el diseño actual - por ejemplo, la ventana del navegador cambia de tamaño o desdea JavaScript se modifica el CSS de un elemento - el diseño no se vuelve a calcular inmediatamente. En cambio, el reflujo ocurre de forma asíncrona, la próxima vez que el navegador decide que hay que hacer (en general, la próxima vez que el navegador vuelve a pintar). De esta manera, el navegador puede ahorrar un conjunto de cambios que invalidan y recalcular su efecto a la vez.</p> + +<p>Sin embargo, si algún código JavaScript lee un estilo que se ha modificado, a continuación, el navegador debe realizar una reflujo sincrónico con el fin de calcular el estilo computarizado a devolver. Por ejemplo, un código como éste provocará de inmediato un reflujo síncrono cuando se llame a <code>window.getComputedStyle(thing).height</code>:</p> + +<pre class="brush: js notranslate">var thing = document.getElementById("the-thing"); +thing.style.display = "inline-block"; +var thingHeight = window.getComputedStyle(thing).height;</pre> + +<div class="es" id="OutputArea" style="direction: ltr; text-align: left;"> +<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;"> +<div><span id="ouHighlight__0_9TO0_7">Debido a</span><span id="noHighlight_0.5080495377710348"> </span><span id="ouHighlight__11_14TO9_12">esto</span><span id="noHighlight_0.27660277495974706">,</span><span id="noHighlight_0.7014250788747086"> </span><span id="ouHighlight__17_20TO15_16">es</span><span id="noHighlight_0.8477552875134879"> </span><span id="ouHighlight__22_22TO18_20">una</span><span id="noHighlight_0.3077554454245065"> </span><span id="ouHighlight__24_27TO22_26">buena</span><span id="noHighlight_0.520335799909469"> </span><span id="ouHighlight__29_32TO28_31">idea</span><span id="noHighlight_0.5819655685356027"> </span><span id="ouHighlight__34_35TO33_36">para</span><span id="noHighlight_0.5366314914815862"> </span><span id="ouHighlight__37_41TO38_43">evitar</span><span id="noHighlight_0.4977607827883951"> la </span><span id="ouHighlight__43_54TO48_60">interpolación</span><span id="noHighlight_0.6059269045169466"> de la </span><span id="ouHighlight__56_60TO68_76">escritura</span><span id="noHighlight_0.33691265646783897"> </span><span id="ouHighlight__62_64TO78_78">y</span><span id="noHighlight_0.18550086187907766"> </span><span id="ouHighlight__66_69TO80_83">leer</span><span id="noHighlight_0.11440921100749979"> </span><span id="ouHighlight__71_75TO85_92">llamadas</span><span id="noHighlight_0.18346951849610216"> </span><span id="ouHighlight__77_78TO94_94">a</span><span id="noHighlight_0.8173881044979314"> los </span><span id="ouHighlight__93_98TO100_106">estilos</span><span id="noHighlight_0.7372463059156626"> </span><span id="ouHighlight__83_91TO108_109">de</span><span id="noHighlight_0.25672890219068567"> </span><span id="ouHighlight__80_81TO111_112">un</span><span id="noHighlight_0.5722843891711001"> </span><span id="ouHighlight__83_91TO114_121">elemento</span><span id="noHighlight_0.9651635901078331"> </span><span id="ouHighlight__100_103TO123_124">al</span><span id="noHighlight_0.6756293244240998"> </span><span id="ouHighlight__105_116TO126_134">manipular</span><span id="noHighlight_0.15856259142986695"> </span><span id="ouHighlight__118_120TO136_137">el</span><span id="noHighlight_0.17549086719617357"> </span><span id="ouHighlight__122_124TO139_147">árbol DOM</span>, porque cada vez que vuelve a leer un estilo que ha sido invalidado por una llamada de escritura anterior, se fuerza un reflujo síncrono.</div> + +<div></div> +</div> +</div> + +<h3 id="Security">Security</h3> + +<p>Security warnings and errors look like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7107/sec-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">The security messages shown in the Web Console help developers find potential or actual vulnerabilities in their sites. Additionally, many of these messages help educate developers because they end with a “Learn More” link that takes you to a page with background information and advice for mitigating the issue.</p> + +<p>The complete list of security messages is as follows:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <th scope="col">Message</th> + <th scope="col">Details</th> + </tr> + <tr> + <td>Blocked loading mixed active content</td> + <td>The page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser blocked this active content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> + </tr> + <tr> + <td>Blocked loading mixed display content</td> + <td>The page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser blocked this display content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> + </tr> + <tr> + <td>Loading mixed (insecure) active content on a secure page</td> + <td>The page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser loaded this active content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> + </tr> + <tr> + <td>Loading mixed (insecure) display content on a secure page</td> + <td>The page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser loaded this display content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> + </tr> + <tr> + <td>This site specified both an X-Content-Security-Policy/Report-Only header and a Content-Security-Policy/Report-Only header. The X-Content-Security-Policy/Report-Only header(s) will be ignored.</td> + <td>See <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td> + </tr> + <tr> + <td>The X-Content-Security-Policy and X-Content-Security-Report-Only headers will be deprecated in the future. Please use the Content-Security-Policy and Content-Security-Report-Only headers with CSP spec compliant syntax instead.</td> + <td>See <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td> + </tr> + <tr> + <td>Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.</td> + <td>Pages containing login forms must be served over HTTPS, not HTTP.</td> + </tr> + <tr> + <td>Password fields present in a form with an insecure (http://) form action. This is a security risk that allows user login credentials to be stolen.</td> + <td>Forms containing password fields must submit them over HTTPS, not HTTP.</td> + </tr> + <tr> + <td>Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen.</td> + <td>iframes containing login forms must be served over HTTPS, not HTTP.</td> + </tr> + <tr> + <td>The site specified an invalid Strict-Transport-Security header.</td> + <td>See <a href="/en-US/docs/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a> for more details.</td> + </tr> + <tr> + <td> + <p>This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.</p> + </td> + <td> + <p>The site uses a certificate whose signature uses the SHA-1 hash algorithm.</p> + + <p>SHA-1 is still still widely used in certificates, but it is starting to show its age. Web sites and Certification Authorities are encouraged to switch to stronger hash algorithms in future. See the <a href="/en-US/docs/Security/Weak_Signature_Algorithm">Weak Signature Algorithm</a> article for more details.</p> + + <p>Note that the SHA-1 certificate may not be your site's own certificate, but may be the certificate belonging to a Certification Authority that was used to sign your site's certificate.</p> + </td> + </tr> + </tbody> +</table> + +<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Bug 863874</a> is the meta-bug for logging relevant security messages to the Web Console. If you have more ideas for useful features like the ones discussed here, or are interested in contributing, check out the metabug and its dependencies.</p> + +<h3 id="Logging">Logging</h3> + +<div class="note"> +<p>Messages logged from <a href="/en-US/docs/Web/API/SharedWorker">Shared Workers</a>, <a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a>, add-ons, and <a href="/en-US/docs/Mozilla/ChromeWorkers">Chrome Workers</a> are not shown by default. Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p> +</div> + +<p>The Logging category includes messages logged using the <a href="/en-US/docs/Web/API/Console">Console</a> API.<br> + <img alt="" src="https://mdn.mozillademos.org/files/7105/console-api-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>The Web console supports the following Console messages:</p> + +<ul> + <li>Error messages + <ul> + <li><a href="/en-US/docs/Web/API/Console.error"><code>error()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.exception"><code>exception()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.assert"><code>assert()</code></a> (when the assertion fails)</li> + </ul> + </li> + <li>Warning messages + <ul> + <li><a href="/en-US/docs/Web/API/Console.warn"><code>warn()</code></a></li> + </ul> + </li> + <li>Informational messages + <ul> + <li><a href="/en-US/docs/Web/API/Console.count"><code>count()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.dir"><code>dir()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.dirxml"><code>dirxml()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.info"><code>info()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.log"><code>log()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.table"><code>table()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.time"><code>time()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.timeEnd"><code>timeEnd()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.trace"><code>trace()</code></a></li> + </ul> + </li> +</ul> + +<p>The console prints a stack trace for all error messages, like this:</p> + +<pre class="brush: js notranslate">function foo() { + console.error("it explodes"); +} + +function bar() { + foo(); +} + +function doStuff() { + bar(); +} + +doStuff();</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11665/error-stack.png" style="display: block; height: 92px; margin-left: auto; margin-right: auto; width: 465px;"></p> + +<h3 id="Server">Server</h3> + +<div class="geckoVersionNote"> +<p>New in Firefox 43</p> +</div> + +<div class="note"> +<p>Server-side log messages are not shown by default. Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p> +</div> + +<p>From Firefox 43, the Web Console can display messages sent from the server. This enables you to use the Web Console to debug server-side code.</p> + +<p>It uses the <a href="https://craig.is/writing/chrome-logger">Chrome Logger</a> protocol. Briefly, the way it works is:</p> + +<ul> + <li>your server-side code - Python, PHP, Node.js, ... - includes a library that provides a console API</li> + <li>your server-side code uses this API to log messages</li> + <li>the server-side library creates JSON objects from the messages and encodes them for transmission</li> + <li>the messages are transmitted to the client as a response header named <code>X-ChromeLogger-Data</code></li> + <li>the Web Console decodes these headers and displays them</li> +</ul> + +<p>To find a suitable library for your server code, see the <a href="https://craig.is/writing/chrome-logger">Chrome Logger documentation</a>.</p> + +<h3 id="Command_line_inputoutput">Command line input/output</h3> + +<p>Commands sent to the browser using the <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">Web Console's command line</a>, and the corresponding responses, are logged using lines like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5587/web-console-message-input-output.png" style="display: block; height: 68px; margin-left: auto; margin-right: auto; width: 554px;">The dark gray bar indicates that these are input/output messages, while the direction of the arrow discriminates between input and output.</p> + +<h2 id="Filtro_y_búsqueda"><a name="filtering-and-searching">Filtro y búsqueda</a></h2> + +<h3 id="Filtrando_por_categoría">Filtrando por categoría</h3> + +<p>You can use the toolbar along the top to constrain the results displayed.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11667/message-filters.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 952px;">To see only messages of particular categories, click the button labeled with that category ("Net", "CSS", and so on). Clicking the main part of the button toggles that category on or off, while clicking the arrow on the right gives you more fine-grained filter options within that category:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Category</th> + <th scope="col">Options</th> + </tr> + </thead> + <tbody> + <tr> + <td>Net</td> + <td>Errors<br> + Warnings<br> + XHR<br> + Log</td> + </tr> + <tr> + <td>CSS</td> + <td>Errors<br> + Warnings<br> + Reflows</td> + </tr> + <tr> + <td>JS</td> + <td>Errors<br> + Warnings</td> + </tr> + <tr> + <td>Security</td> + <td>Errors<br> + Warnings</td> + </tr> + <tr> + <td>Logging</td> + <td>Errors<br> + Warnings<br> + Info<br> + Log<br> + Shared Worker<br> + Service Workers<br> + Add-on or Chrome Workers</td> + </tr> + <tr> + <td>Server</td> + <td>Errors<br> + Warnings<br> + Info<br> + Log</td> + </tr> + </tbody> +</table> + +<h3 id="Filtering_by_text">Filtering by text</h3> + +<p>To see only messages that contain a specific string, type in the text box labeled "Filter output".</p> + +<h3 id="Clearing_the_log">Clearing the log</h3> + +<p>Finally, you can use this toolbar to clear the log.</p> diff --git a/files/es/tools/web_console/index.html b/files/es/tools/web_console/index.html new file mode 100644 index 0000000000..d328e31365 --- /dev/null +++ b/files/es/tools/web_console/index.html @@ -0,0 +1,349 @@ +--- +title: Consola Web +slug: Tools/Web_Console +tags: + - Debugging + - Guide + - NeedsTranslation + - Security + - Tools + - TopicStub + - Web Development + - 'Web Development:Tools' + - web console +translation_of: Tools/Web_Console +--- +<p>La Consola Web:</p> + +<ol> + <li>Muestra la informacion asociada con los Logs de la pagina Web: cualquier solicitud de red, JavaScript, CSS, y errores de seguridad y advertencias, asi como tambien, advertencias, mensajes informativos explicitamente generados por Javascripten tiempo de ejecucion dentro del contexto de la pagina.</li> + <li>te permite interactuar con la pagina ejecutando expresiones Javascript en el contexto de la página.</li> +</ol> + +<p>It's part of the replacement for the old <a href="/en/Error_Console" title="en/Error Console">Error Console</a> built into Firefox: but the Error Console showed errors, warnings, and messages from all web pages, from the browser's own code, and from add-ons. This makes it much more difficult to see which messages are relevant to a specific page. The Web Console is always associated with a specific web page and only shows information associated with that page.</p> + +<p>The other half of the replacement for the Error console is the <a href="/en-US/docs/Tools/Browser_Console" title="/en-US/docs/Tools/Browser_Console">Browser Console</a>, which shows errors, warnings, and messages from the browser's code and from add-ons.</p> + +<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p> + +<h2 id="Abriendo_la_Consola_WEB">Abriendo la Consola WEB</h2> + +<p>To open the Web Console select "Web Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X), or by pressing its Control-Shift-K (Command-Option-K on the Mac) keyboard shortcut.</p> + +<p>The <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> will appear at the bottom of the browser window, with the Web Console activated (it's just called "Console" in the <a href="/en-US/docs/Tools/DevTools_Window#Toolbar" title="/en-US/docs/Tools/DevTools_Window#Toolbar">DevTools toolbar</a>):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5581/web-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Underneath the <a href="/en-US/docs/Tools/DevTools_Window#Toolbar" title="/en-US/docs/Tools/DevTools_Window#Toolbar">DevTools Window's own toolbar</a>, the Web Console's interface is split into three sections:</p> + +<ul> + <li><a href="#filtering-and-searching" title="#filtering-and-searching">Toolbar</a>: along the top is a toolbar containing buttons with labels like "Net", "CSS", and "JS". This toolbar is used to filter which messages are displayed</li> + <li><a href="#command-line" title="#command-line">Command Line</a>: along the bottom is a command line that you can use to enter JavaScript expressions</li> + <li><a href="#message-display-pane" title="#message-display-pane">Message Display Pane</a>: in between the toolbar and the command line, and occupying most of the window, is the space in which the Web Console displays messages</li> +</ul> + +<h2 id="Message_Display_Pane"><a name="message-display-pane">Message Display Pane</a></h2> + +<p>Most of the Web Console is occupied by the message display pane:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5599/web-console-messages-highlighted.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>The message display pane displays the following sorts of messages:</p> + +<ul> + <li>HTTP requests</li> + <li>Warnings and errors (including JavaScript, CSS, security warnings and errors, and messages explicitly logged by JavaScript code using the <a href="/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">console</a> API)</li> + <li>Input/output messages: commands send to the browser via the Web Console's command line, and the result of executing them.</li> +</ul> + +<p>Each message is displayed as a single row in the pane.</p> + +<h3 id="HTTP_requests">HTTP requests</h3> + +<p>HTTP requests are logged with a line that looks like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5593/web-console-message-request-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<ul> + <li><strong>Time</strong>: the time the message was recorded</li> + <li><strong>Category</strong>: this indicates that the message is an HTTP request</li> + <li><strong>Method</strong>: the specific HTTP request method</li> + <li><strong>URI</strong>: the target URI</li> + <li><strong>Summary</strong>: the HTTP version, status code, and time taken to complete</li> +</ul> + +<p>By default, the Web Console does not log request and response bodies: to do this, activate the context menu in the Web Console and select "Log Request and Response Bodies".</p> + +<p>If you click on the message, you'll see a window like this, containing more details about the request and response:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/3148/detailspanel.png" style="display: block; height: 502px; margin-left: auto; margin-right: auto; width: 430px;">Scrolling down reveals the response headers. By default, the Web Console does not log request and response bodies: to do this, activate the context menu in the Web Console and select "Log Request and Response Bodies", reload the page, and you'll then see them in the "Inspect Network Request" window.</p> + +<p>Only the first megabyte of data is logged for each request or response body, so very large requests and responses will be truncated.</p> + +<h3 id="Warnings_and_errors">Warnings and errors</h3> + +<p>Warnings and errors are logged with a line looking something like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<ul> + <li><strong>Time</strong>: the time the message was recorded. From Firefox 28 onwards this is not shown by default, and you can opt to see timestamps using a <a href="/en-US/docs/Tools_Toolbox#Settings">setting in the Toolbox</a>.</li> + <li><strong>Category</strong>: this indicates what sort of message this is: + <ul style="margin-left: 40px;"> + <li><span style="color: #0099ff;"><strong>Blue</strong></span>: CSS warning/error</li> + <li><strong><span style="color: #ff8c00;">Orange</span></strong>: JavaScript warning/error</li> + <li><span style="color: #ff0000;"><strong>Red</strong></span>: security warning/error</li> + <li><span style="color: #a9a9a9;"><strong>Light Gray</strong></span>: message explicitly logged from JavaScript code using the <a href="/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">console</a> API</li> + </ul> + </li> + <li><strong>Type</strong>: an icon indicating whether it is an error(☓) or a warning(⚠).</li> + <li><strong>Message</strong>: the message itself</li> + <li><strong>Number of occurrences</strong>: if a line that generates a warning or error is executed more than once, it is only logged once, and this counter appears to indicate how many times it was encountered.</li> + <li><strong>Filename and line number</strong>: a link to the filename and line number that generated the message</li> +</ul> + +<h4 id="Security_messages">Security messages</h4> + +<p>The security messages shown in the Web Console help developers find potential or actual vulnerabilities in their sites. Additionally, many of these messages help educate developers because they end with a “Learn More” link that takes you to a page with background information and advice for mitigating the issue.</p> + +<p>The complete list of security messages is as follows:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <th scope="col">Message</th> + <th scope="col">Details</th> + </tr> + <tr> + <td>Blocked loading mixed active content</td> + <td>The page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser blocked this active content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> + </tr> + <tr> + <td>Blocked loading mixed display content</td> + <td>The page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser blocked this display content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> + </tr> + <tr> + <td>Loading mixed (insecure) active content on a secure page + <div class="geckoVersionNote"> + <p>Introduced in Firefox 26</p> + </div> + </td> + <td>The page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser loaded this active content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> + </tr> + <tr> + <td>Loading mixed (insecure) display content on a secure page + <div class="geckoVersionNote"> + <p>Introduced in Firefox 26</p> + </div> + </td> + <td>The page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser loaded this display content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> + </tr> + <tr> + <td>This site specified both an X-Content-Security-Policy/Report-Only header and a Content-Security-Policy/Report-Only header. The X-Content-Security-Policy/Report-Only header(s) will be ignored.</td> + <td>See <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td> + </tr> + <tr> + <td>The X-Content-Security-Policy and X-Content-Security-Report-Only headers will be deprecated in the future. Please use the Content-Security-Policy and Content-Security-Report-Only headers with CSP spec compliant syntax instead.</td> + <td>See <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td> + </tr> + <tr> + <td>Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen. + <div class="geckoVersionNote"> + <p>Introduced in Firefox 26</p> + </div> + </td> + <td>Pages containing login forms must be served over HTTPS, not HTTP.</td> + </tr> + <tr> + <td>Password fields present in a form with an insecure (http://) form action. This is a security risk that allows user login credentials to be stolen. + <div class="geckoVersionNote"> + <p>Introduced in Firefox 26</p> + </div> + </td> + <td>Forms containing password fields must submit them over HTTPS, not HTTP.</td> + </tr> + <tr> + <td>Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen. + <div class="geckoVersionNote"> + <p>Introduced in Firefox 26</p> + </div> + </td> + <td>iframes containing login forms must be served over HTTPS, not HTTP.</td> + </tr> + <tr> + <td>The site specified an invalid Strict-Transport-Security header.</td> + <td>See <a href="/en-US/docs/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a> for more details.</td> + </tr> + </tbody> +</table> + +<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Bug 863874</a> is the meta-bug for logging relevant security messages to the Web Console. If you have more ideas for useful features like the ones discussed here, or are interested in contributing, check out the metabug and its dependencies.</p> + +<h3 id="Reflow_events">Reflow events</h3> + +<div class="geckoVersionNote"> +<p>Reflow events are only logged from Firefox Desktop 27+ and Firefox OS 1.3+.</p> +</div> + +<p>The Web Console also logs reflow events. A reflow is the name given to the operation in which the browser calculates the layout of all or part of the page. Reflows occur when a change has happened to a page that the browser thinks affects the layout. Many events can trigger reflows, including: resizing the browser window, activating pseudoclasses like <a href="/en-US/docs/Web/CSS/:hover">:hover</a>, or manipulating the DOM in JavaScript.</p> + +<p>Because reflows can be computationally expensive and directly affect the user interface, they can have a big impact on the responsiveness of a website or web app. By logging reflow events the Web Console can give you insight into when reflow events are being triggered, how long they take to execute and, if the reflows are <a href="#synchronous-and-asynchronous-reflows">synchronous reflows</a> triggered from JavaScript, which code triggered them.</p> + +<p>Reflow events are logged under the CSS category, as "Log" messages, as distinct from CSS errors or warnings. By default, they are disabled. You can enable them by clicking the "CSS" button in the <a href="#filtering-and-searching">toolbar</a> and selecting "Log".</p> + +<p>Each message is labeled "reflow" and shows the time taken to execute the reflow:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6365/web-console-reflow-asynch.png" style="display: block; height: 53px; margin-left: auto; margin-right: auto; width: 554px;">If the reflow is a synchronous reflow triggered from JavaScript, it also shows a link to the line of code that triggered the reflow:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6367/web-console-reflow-synch.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 554px;">Click the link to open the file in the <a href="/en-US/docs/Tools/Debugger">Debugger</a>.</p> + +<h4 id="Synchronous_and_asynchronous_reflows"><a name="synchronous-and-asynchronous-reflows">Synchronous and asynchronous reflows</a></h4> + +<p>If a change is made that invalidates the current layout - for example, the browser window is resized or some JavaScript modifies an element's CSS - the layout is not recalculated immediately. Instead, the reflow happens asynchronously, the next time the browser decides it needs to be done (generally, the next time the browser repaints). In this way the browser can save up a collection of invalidating changes and recalculate their effect at once.</p> + +<p>However, if some JavaScript code reads a style that has been modified, then the browser must perform a synchronous reflow in order to calculate the computed style to return. For example, code like this will cause an immediate, synchronous, reflow, when it calls <code>window.getComputedStyle(thing).height</code>:</p> + +<pre class="brush: js">var thing = document.getElementById("the-thing"); +thing.style.display = "inline-block"; +var thingHeight = window.getComputedStyle(thing).height;</pre> + +<p>Because of this, it's a good idea to avoid interleaving write and read calls to an element's styles when manipulating the DOM, because every time you read back a style that has been invalidated by a previous write call, you force a synchronous reflow.</p> + +<h3 id="Inputoutput_messages">Input/output messages</h3> + +<p>Commands sent to the browser using the <a href="#command-line" title="#command-line">Web Console's command line</a>, and the corresponding responses, are logged using lines like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5587/web-console-message-input-output.png" style="display: block; height: 68px; margin-left: auto; margin-right: auto; width: 554px;">The dark gray bar indicates that these are input/output messages, while the direction of the arrow discriminates between input and output.</p> + +<h3 id="Filtering_and_searching"><a name="filtering-and-searching">Filtering and searching</a></h3> + +<p>You can use the toolbar along the top to constrain the results displayed.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5601/web-console-toolbar-highlighted.png" style="display: block; margin-left: auto; margin-right: auto;">You can display only specific types of messages or only message containing specific strings.</p> + +<p>Finally, you can use this toolbar to clear the log.</p> + +<dl> +</dl> + +<h2 id="The_command_line_interpreter"><a name="command-line">The command line interpreter</a></h2> + +<p>You can interpret JavaScript expressions in real time using the command line provided by the Web Console.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5597/web-console-commandline-highlighted.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Basic_operation">Basic operation</h3> + +<h4 id="Entering_expressions">Entering expressions</h4> + +<p>To enter expressions just type into the command line and press "Enter". To enter multiline expressions, use "Shift+Enter" instead of "Enter".</p> + +<p>The expression you type is echoed in the message display window, followed by the result:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5615/web-console-commandline-simple.png" style="display: block; height: 92px; margin-left: auto; margin-right: auto; width: 632px;"></p> + +<h4 id="Accessing_variables">Accessing variables</h4> + +<p>You can access variables defined in the page, both built-in variables like <code>window</code> and variables added by JavaScript like <code>jQuery</code>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5609/web-console-commandline-href.png" style="display: block; height: 89px; margin-left: auto; margin-right: auto; width: 632px;"><img alt="" src="https://mdn.mozillademos.org/files/5611/web-console-commandline-jquery.png" style="display: block; height: 92px; margin-left: auto; margin-right: auto; width: 632px;"></p> + +<h4 id="Autocomplete">Autocomplete</h4> + +<p>The command line has autocomplete: enter the first few letters and a popup appears with possible completions:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5607/web-console-commandline-autocomplete.png" style="display: block; height: 125px; margin-left: auto; margin-right: auto; width: 632px;">Type "Enter" or "Tab" to accept the suggestion, use the up/down arrows to move to a different suggestion, or just keep typing if you don't like any of the suggestions.</p> + +<div class="geckoVersionNote"> +<p>New in Firefox 28</p> +</div> + +<p>Starting from Firefox 28, the console suggests completions from the scope of the currently executing stack frame. This means that if you've hit a breakpoint in a function you get autocomplete for objects local to the function.</p> + +<h4 id="Inspecting_objects">Inspecting objects</h4> + +<p>If the result object is an object it appears in square brackets and is underlined, like this: <code><u>[object Function]</u></code>. Click on it, and you'll see a new panel appear containing details of the object:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5613/web-console-commandline-object-details.png" style="display: block; margin-left: auto; margin-right: auto;">To dismiss this panel press "Escape".</p> + +<h4 id="Defining_variables">Defining variables</h4> + +<p>You can define your own variables, and then access them:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5605/web-console-commandline-addvariable.png" style="display: block; height: 125px; margin-left: auto; margin-right: auto; width: 632px;"><img alt="" src="https://mdn.mozillademos.org/files/5603/web-console-commandline-addfunction.png" style="display: block; height: 168px; margin-left: auto; margin-right: auto; width: 632px;"></p> + +<h4 id="Command_history">Command history</h4> + +<p>The command line remembers commands you've typed: to move back and forward through your history, use the up and down arrows.</p> + +<h3 id="Keyboard_shortcuts">Keyboard shortcuts</h3> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Shortcut</td> + <td class="header">Description</td> + </tr> + <tr> + <td>↑</td> + <td>Moves to the previous entry in the command history, or, if an autocomplete popup is open, highlights the previous suggestion.</td> + </tr> + <tr> + <td>↓</td> + <td>Moves to the next entry in the command history, or, if an autocomplete popup is open, highlights the next suggestion.</td> + </tr> + <tr> + <td>Ctrl-A</td> + <td>Moves the cursor to the beginning of the line. (Note: beginning with Firefox 22, this will select all text on Windows)</td> + </tr> + <tr> + <td>Ctrl-E</td> + <td>Moves the cursor to the end of the line.</td> + </tr> + <tr> + <td>Return</td> + <td>Executes the code typed on the command line, or, if an autocomplete popup is open, chooses the current suggestion.</td> + </tr> + <tr> + <td>Shift-Return</td> + <td>Expands the height of the text input box for the command line by a line.</td> + </tr> + <tr> + <td>Escape</td> + <td>Cancels the autocompletion popup.</td> + </tr> + <tr> + <td>Tab</td> + <td>Generates an autocomplete suggestion and accepts the first one.</td> + </tr> + </tbody> +</table> + +<h3 id="Helper_commands">Helper commands</h3> + +<p>{{ page("/en/Using_the_Web_Console/Helpers", "The commands") }}</p> + +<h2 id="The_split_console">The split console</h2> + +<div class="geckoVersionNote"> +<p>The split console is new in Firefox 28.</p> +</div> + +<p>{{EmbedYouTube("G2hyxhPHyXo")}}</p> + +<p>Starting in Firefox 28, you can use the console alongside other tools. While you're in another tool in the Toolbox, just press "Escape" or press the "Toggle split console" button in the <a href="/en-US/docs/Tools_Toolbox#Toolbar">Toolbar</a>. The toolbox will now appear split, with the original tool above and the web console underneath.</p> + +<p>As usual, <code>$0</code> works as a shorthand for the element currently selected in the Inspector:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6619/web-console-split-inspector.png" style="display: block; margin-left: auto; margin-right: auto;">When you use the split console with the debugger, the console's scope is the currently executing stack frame. So if you hit a breakpoint in a function, the scope will be the function's scope. You'll get autocomplete for objects defined in the function, and can easily modify them on the fly:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6621/web-console-split-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en/Tools/Web_Console/Helpers" title="en/Using the Web Console/Helpers">Web Console Helpers</a></li> + <li>{{ domxref("console") }}</li> +</ul> + +<p>{{ languages( { "ja": "ja/Tools/Web_Console"} ) }}</p> diff --git a/files/es/tools/web_console/iniciando_la_consola_web/index.html b/files/es/tools/web_console/iniciando_la_consola_web/index.html new file mode 100644 index 0000000000..59b0156a49 --- /dev/null +++ b/files/es/tools/web_console/iniciando_la_consola_web/index.html @@ -0,0 +1,23 @@ +--- +title: Iniciando la Consola Web +slug: Tools/Web_Console/Iniciando_la_Consola_Web +translation_of: Tools/Web_Console/UI_Tour +--- +<p>Para abrir la Consola Web:</p> + +<ul> + <li>Puedes seleccionar "Consola Web" desde el submenu Desarrollador Web en el menu de Firefox ( o menu Herramientas si despliegas la barra menu o estas utilizando Mac OS X)</li> + <li>o presionando el <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>K</kbd> (<kbd>Command</kbd><kbd>Option</kbd><kbd>K</kbd> en OS X) atajo de teclado.</li> +</ul> + +<p>La Caja de herramientas (<a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a>) aparecera en la parte baja de la ventana del navegador, con la Consola Web activada (solamente se le llama "Consola" en la barra de herramientas DevTools (<a href="/en-US/docs/Tools/DevTools_Window#Toolbar" title="/en-US/docs/Tools/DevTools_Window#Toolbar">DevTools toolbar</a>)):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11669/console.png" style="display: block; height: 324px; margin-left: auto; margin-right: auto; width: 952px;"></p> + +<p>La interfaz de la Consola Web esta dividida en tres secciones horizontales que son:</p> + +<ul> + <li>Barra de herramientas (<a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category" title="#filtering-and-searching">Toolbar</a>): A lo largo de la parte de arriba esta la barra de herramientas, contiene botones con etiquetas como "Net", "CSS", and "JS". Esta barra de herramientas se usa para filtrar cuales mensajes seran mostrados.</li> + <li>Linea de comando (<a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">Command Line</a>): A lo largo de la parte de abajo esta una linea de comando que se puede utilizar para ingresar expresiones en JavaScript </li> + <li>Panel de Mensaje (<a href="/en-US/docs/Tools/Web_Console/Console_messages" title="#message-display-pane">Message Display Pane</a>): se localiza en medio de la barra de herramientas y la linea de omando, ocupa la mayor parte de la ventana, es el espacio en el cual la Consola Web muestra los mensajes.</li> +</ul> diff --git a/files/es/tools/web_console/la_línea_de_comandos_del_intérprete/index.html b/files/es/tools/web_console/la_línea_de_comandos_del_intérprete/index.html new file mode 100644 index 0000000000..06e5922248 --- /dev/null +++ b/files/es/tools/web_console/la_línea_de_comandos_del_intérprete/index.html @@ -0,0 +1,188 @@ +--- +title: La línea de comandos del intérprete de JavaScript +slug: Tools/Web_Console/La_línea_de_comandos_del_intérprete +tags: + - Debugging + - Depuración + - Desarrollo web + - consola web +translation_of: Tools/Web_Console/The_command_line_interpreter +--- +<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>>></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"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + </head> + <body> + <iframe id="frame1" src="static/frame/my-frame1.html"></iframe> + </body> +</html></pre> + +<p>El <code>iframe</code> define una nueva función:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <script> + function whoAreYou() { + return "Yo soy el frame1"; + } + </script> + </head> + <body> + </body> +</html></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> |