Console messages

La majorité de la Console Web est occupée par le panneau d'affichage des messages :

Chaque message est affiché sur une nouvelle ligne.

Par défaut, la console est effacée à chaque fois que vous naviguez sur une nouvelle page ou que vous rechargez la page courante. Pour modifier ce comportement, cochez "Activer les journaux persistants" dans les paramètres de la Boite à outils.

Requêtes HTTP

Les requêtes HTTP sont affichées sous cette forme :

Si vous cliquez sur le message, vous verrez une fenêtre contenant plus de détails sur la requête et la réponse :

Défiler vers le bas révèle les en-têtes de réponses. Par défaut, la Console Web n'enregistre pas les contenus de la requête et la réponse : pour le faire, activez le menu contextuel de la Console Web et choisissez "Journaliser le contenu des requêtes et des réponses". Rechargez la page, et vous les verrez dans cette fenêtre d'inspection.

Seul le premier méga-octet de données est enregistré pour le contenu de chaque requête ou réponse. Les requêtes et les réponses très lourdes seront tronquées.

Les logs de messages réseaux ne sont pas montrés par defaut. Utiliser la fonction filtre pour les afficher.

XHR

From Firefox 38 onwards, the Web Console indicates when a network request was made as an XMLHttpRequest:

Also from Firefox 38 onwards, you can filter the network requests so as to only see XMLHttpRequests.

Like normal network request log messages, logs of XMLHttpRequests are not shown by default. Use the filtering feature to show them.

Erreurs et avertissements JavaScript

Les messages JavaScript ressemblent à :

Erreurs CSS, avertissements et évènements de reflow

Les messages CSS ressemblent à ceci :

Par défaut, les avertissements CSS ne sont pas affichés.

Évènements de reflow

La Console Web logue aussi les évènements de reflow. Un reflow est le nom donné à une opération pendant laquelle le navigateur calcule la disposition de tout ou partie de la page.
Les reflows se produisent lorsqu'un changement est arrivé dans la page et que la navigateur pense qu'il en affecte la disposition. Plusieurs évènements peuvent déclencher des reflows, incluant : redimensionner la fenêtre du navigateur, activer des pseudo-classes comme :hover ou manipuler le DOM en JavaScript.

Parce que les reflows peuvent être très coûteux en calculs et affecter directement l'interface utilisateur, ils peuvent avoir un grand impact sur la réactivité d'un site ou d'une application web. En loguant les évènements de reflow, la Console Web peut vous donner une idée du moment auquel ces évènements sont déclenchés, combien de temps ils prennent à s'exécuter et si les reflows sont synchrones et déclenchés par du JavaScript, quel code les a déclenchés.

Les évènements de reflow sont affichés dans la catégorie CSS, en tant que messages "Log", bien séparés des erreurs et avertissements CSS. Par défaut, ils sont désactivés. Vous pouvez les activer en cliquant sur le bouton "CSS" dans la boite à outils et en sélectionnant "Log".

Chaque message porte une étiquette "reflow" et montre le temps qui a fallu pour exécuter le reflow :


Si le reflow est synchrone et a été déclenché par du JavaScript, un lien vers la ligne de code qui a déclenché le reflow est aussi affiché :

Cliquez sur le lien pour ouvrir le fichier dans le Débogueur.

Reflows synchrones et asynchrones

Si un changement est fait et qu'il invalide la disposition courante - par exemple, la fenêtre du navigateur est redimensionnée ou du JavaScript modifie le CSS d'un élément - la disposition n'est pas recalculée immédiatement. A la place, le reflow se produit de façon asynchrone, lorsque le navigateur décide que cela est nécessaire ; en général, lorsque le navigateur redessine ("repaint"). De cette façon, le navigateur peut enregistrer une série de changements invalidants et recalculer leurs effets en une seule fois. Cependant, si du code JavaScript lit un style qui a été modifié, alors le navigateur doit réaliser un reflow asynchrone pour calculer le style calculé ("computed style") à retourner.

Par exemple, le code suivant provoque un reflow immédiat et synchrone au moment de l'appel à window.getComputedStyle(thing).height :

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

A cause de cela, c'est une bonne idée d'éviter l'entrelacement des appels en écriture et en lecture des styles d'un élément lors de la manipulation du DOM, parce que chaque fois que vous relisez un style qui a été invalidé par un précédent appel en écriture, vous forcez un reflow synchrone.

Avertissements et erreurs de sécurité

Les avertissements et les erreurs de sécurité ressemblent à ceci :

Les messages de sécurité affichés dans la console web aident les développeurs à trouver les vulnérabilités de leur site qu’elles soient potentielles ou effectives. De plus, beaucoup de ces messages sont enrichissants pour les développeurs car ils finissent par un lien "En savoir plus" qui redirige sur une page contenant des informations et des conseils pour minimiser le problème.

La liste complète des messages de sécurité est la suivante :

Le Bug 863874 est le méta-bug pour l'affichage des messages d'erreurs de sécurité dans la console web. Si vous avez d'autres idées pour des fonctionnalités utiles comme celles décrites ici, ou si vous êtes intéressé pour contribuer, jetez un coup d'œil au méta-bug et à ses dépendances.

Message console API

Cette section décrit les messages web console des appels API qui affichent véritablement quelque chose. Pour des informations plus génériques sur la console API il est possible de se référer à sa page de documentation.

Messages d'erreurs

API	Contenu du message
error()	L'argument à  error(). console.error("an error"); A partir de Firefox 31, la console affiche la pile complète des erreurs : function error() { console.error("an error"); } function call_error() { error(); } call_error();
exception()	Un alias de error().
assert()	Si l'insertion fonctionne, rien. Si l'insertion ne fonctionne pas l'argument : console.assert(false, "My assertion always fails"); A partir de Firefox 31, la console affiche la pile complète des insertions : function assertion() { console.assert(false, "assertion failed"); } function call_assertion() { assertion(); } call_assertion();

Messages d'avertissement

API	Contenu du message
warn()	L'argument à warn(). console.warn("a warning");

Messages d'information

API	Contenu du message
info()	L'argument à info(). console.info("some info");

Message de log

API	Contenu du message
count()	Le label fourni, si présent, et le nombre d'occurrences que count() a appelé avec le label donné. console.count(user.value);
log()	L'argument à log(). console.log("logged");
trace()	Trace de la pile. console.trace();
dir()	Liste les propriétés d'un objet. var user = document.getElementById('user'); console.dir(user);
time()	Notifie que le timer a démarré. console.time("t");
timeEnd()	Durée du timer. console.timeEnd("t");
table()	Ce message est une des nouveautés de Firefox 34. Affiche des données de tableau comme un tableau.

Messages groupés

il est possible d'utiliser console.group() pour créer des groupes indentés dans la console. Voir Using groups in the console pour plus d'informations.

Personnalisation des messages

Depuis Firefox 31, il est possible d'utiliser le spécificateur de format "%c" pour personnaliser les messages console :

console.log("%cMy stylish message", "color: red; font-style: italic");

Messages d'entrée/sortie

Les commandes envoyées au navigateur en utilisant la ligne de commande de la Console Web, et les réponses correspondantes, sont affichés de cette façon :

La barre gris foncé indique qu'il s'agit de messages d'entrée/sortie, tandis que la direction de la flèche indique si il s’agit d'une entrée ou d'une sortie.

Filtrer et rechercher

Vous pouvez utiliser la barre d'outils en haut pour filtrer l'affichage :

To see only messages of particular types, click the button labeled with that type ("Net", "CSS", and so on). Clicking the main part of the button toggles that type on or off, while clicking the arrow on the right gives you more fine-grained filter options within that type (for example, whether to display errors and warnings).

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

Enfin, vous pouvez aussi vider la Console Web de tous ses messages.