Consola de mensajes

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

 

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

Tiempo 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 barra de herramientas
Categoria

Categoria: Esta indicacion nos revela de que trata el mensaje:

  • Negro: Solicitud de red
  • Azul: CSS advertencia/error/registro
  • Naranja: JavaScript advertencia/error
  • Rojo: Advertencia de seguridad/error
  • Verde: Registro de servidor
  • Gris claro: Consola API mensajes
  • Gris Oscro: de entrada/salida desde el intérprete de línea de Comando
Tipo 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).
Mensaje El cuerpo del mensaje.
Número de apariciones 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ó.
Nombre y número de línea

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.

A partir de Firefox 36, esto incluye también el número de columna.

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

Los mensajes de registro de la red no se muestran por defecto. Utiliza la función de filtrar para mostrarlos

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

Time La hora a la que se registró el mensaje.
Category Indica que el mensaje es una solicitud HTTP.
Method

El método específico de la petición HTTP.

Si la petición se hizo como una XMLHttpRequest, hay una nota adicional que indica ésto:

URI El URI de destino.
Summary La versión de HTTP, código de estado, y el tiempo que tarda en completarse.

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

CSS warnings and reflow messages are not shown by default. Use the filtering feature to show them.

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;
Debido a esto, es una buena idea para evitar la interpolación de la escritura y leer llamadas a los estilos de un elemento al manipular el árbol DOM, 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.
 

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:

Message Details
Blocked loading mixed active content 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 Mixed Content for more details.
Blocked loading mixed display content 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 Mixed Content for more details.
Loading mixed (insecure) active content on a secure page 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 Mixed Content for more details.
Loading mixed (insecure) display content on a secure page 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 Mixed Content for more details.
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. See Content Security Policy for more details.
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. See Content Security Policy for more details.
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen. Pages containing login forms must be served over HTTPS, not HTTP.
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. Forms containing password fields must submit them over HTTPS, not HTTP.
Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen. iframes containing login forms must be served over HTTPS, not HTTP.
The site specified an invalid Strict-Transport-Security header. See HTTP Strict Transport Security for more details.

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.

The site uses a certificate whose signature uses the SHA-1 hash algorithm.

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 Weak Signature Algorithm article for more details.

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.

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

Messages logged from Shared Workers, Service Workers, add-ons, and Chrome Workers are not shown by default. Use the filtering feature to show them.

The Logging category includes messages logged using the Console API.

The Web console supports the following Console messages:

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

New in Firefox 43

Server-side log messages are not shown by default. Use the filtering feature to show them.

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:

Category Options
Net Errors
Warnings
XHR
Log
CSS Errors
Warnings
Reflows
JS Errors
Warnings
Security Errors
Warnings
Logging Errors
Warnings
Info
Log
Shared Worker
Service Workers
Add-on or Chrome Workers
Server Errors
Warnings
Info
Log

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.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: pacommozilla, JeidyVega
 Última actualización por: pacommozilla,