Consola de mensajes

La mayor parte de la Consola Web está ocupada por el panel de visualización de mensaje:

Cada mensaje se muestra como una fila separada

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  Configuración.

Categorías de los mensajes

Red

Las solicitudes de red están conectadas con una línea que tiene este aspecto:

Si hace clic en el mensaje, se le redirige al Panel de Red 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. En las versiones anteriores a Firefox 43 esta información se muestra en una ventana emergente separada.

JS

Los mensajes de JavaScript tienen el siguiente aspecto:

CSS

Los mensajes CSS tienen el siguiente aspecto:

Eventos de reflujo (Reflow events)

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: hover, o manipular el DOM en JavaScript.

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 reflujos sínronos activados desde JavaScript, cuyo código les dispara..

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 barra de herramientasr y seleccionar "Reflows".

Cada mensaje está marcado como "reflujo" y muestra el tiempo necesario para ejecutarse:

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

Haga clic en el enlace para abrir el archivo en el Debugger.

Reflujos síncronos y asíncronos

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.

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 window.getComputedStyle(thing).height:

var thing = document.getElementById("the-thing");
thing.style.display = "inline-block";
var thingHeight = window.getComputedStyle(thing).height;

Security

Security warnings and errors look like this:

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.

The complete list of security messages is as follows:

Bug 863874 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.

Logging

The Logging category includes messages logged using the Console API.

The Web console supports the following Console messages:

• Error messages
  • error()
  • exception()
  • assert() (when the assertion fails)
• Warning messages
  • warn()
• Informational messages
  • count()
  • dir()
  • dirxml()
  • info()
  • log()
  • table()
  • time()
  • timeEnd()
  • trace()

The console prints a stack trace for all error messages, like this:

function foo() {
  console.error("it explodes");
}

function bar() {
  foo();
}

function doStuff() {
 bar();
}

doStuff();

Server

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.

It uses the Chrome Logger protocol. Briefly, the way it works is:

• your server-side code - Python, PHP, Node.js, ... - includes a library that provides a console API
• your server-side code uses this API to log messages
• the server-side library creates JSON objects from the messages and encodes them for transmission
• the messages are transmitted to the client as a response header named X-ChromeLogger-Data
• the Web Console decodes these headers and displays them

To find a suitable library for your server code, see the Chrome Logger documentation.

Command line input/output

Commands sent to the browser using the Web Console's command line, and the corresponding responses, are logged using lines like this:

The dark gray bar indicates that these are input/output messages, while the direction of the arrow discriminates between input and output.

Filtering and searching

Filtering by category

You can use the toolbar along the top to constrain the results displayed.

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:

Filtering by text

To see only messages that contain a specific string, type in the text box labeled "Filter output".

Clearing the log

Finally, you can use this toolbar to clear the log.