Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Console

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

L'objet console donne accès à la console de débogage du navigateur (e.g., la Console Web dans Firefox). Les spécificités de fonctionnement varient d'un navigateur à l'autre, mais il y a tout de même un ensemble de fonctionnalités qui sont fournies de base.

La console est accessible de n'importe quel objet global, Window du cadre de navigation, WorkerGlobalScope, et ses variantes spécifiques pour les workers.

Cette page documente les méthodes disponibles pour l'objet console et donne quelques exemples d'utilisation.

Méthodes

Console.assert()
Affiche un message et une trace d'appels dans la console si l'assertion en argument est à false.
Console.count()
Affiche le nombre de fois que la ligne a été appelée avec un label donné.
Console.debug()
Un alias de log(); Il fût ajouté pour des raisons de compatibilité avec des sites existants utilisant debug(). Préférer console.log() à la place puisque cette méthode est dépréciée.
Console.dir()
Affiche une liste interactive des propriétés d'un objet JavaScript donné. Cette liste vous permet d'examiner le contenu des enfants de l'objet en ouvrant les détails (petits triangles).
Console.dirxml()

Affiche si possible une représentation d'éléments XML/HTML d'un objet spécifié. Sinon, c'est une vue de l'objet JavaScript.

Console.error()
Affiche un message d'erreur. Vous pouvez utiliser les caractères de substitution et des arguments supplémentaires avec cette méthode.
Console._exception()
Un alias d'error();
Console.group()
Crée un nouveau niveau d'indentation. Toutes les sorties dans la console à compter de cet appel seront affichées sur ce niveau d'indentation. Pour revenir au niveau précédent, appeler groupEnd().
Console.groupCollapsed()
Crée un nouveau niveau d'indentation. Toutes les sorties dans la console à compter de cet appel seront affichées sur ce niveau d'indentation. Contrairement à group(), le contenu de ce niveau d'indentation n'est pas affiché directement ; Une action est nécessaire pour l'ouverture ou la fermeture de ce bloc (activer le bouton triangle). Pour revenir au niveau précédent, appeler groupEnd().
Console.groupEnd()
Quitte le groupe d'indentation courant.
Console.info()
Affiche un message d'information. Vous pouvez utiliser les caractères de substitution et des arguments supplémentaires avec cette méthode.
Console.log()
Permet d'afficher des messages dans la console. Vous pouvez utiliser les caractères de substitution et des arguments supplémentaires avec cette méthode.
Console.profile()
démarre le profilage du navigateur (par exemple, l'outil performances de Firefox). Vous pouvez spécifier un nom en option pour ce profilage.
Console.profileEnd()
Arrête le profilage. Vous pouvez voir le résultat de ce dernier dans l'outil « performance » du navigateur (par exemple, l'outil performance Firefox).
Console.table()
Affiche des données tabulaires comme un tableau.
Console.time()
Démarre un chronomètre que l'on peut nommer en le spécifiant en tant que paramètre. Jusqu'à 10 000 chronomètres simultanés peuvent tourner sur une page.
Console.timeEnd()
Arrête le chronomètre spécifié et affiche le temps écoulé en millisecondes depuis son démarrage.
Console.timeStamp()
Ajoute un marqueur dans la Timeline du navigateur ou l'outil Waterfall.
Console.trace()
Affiche une trace d'appels.
Console.warn()
Affiche un message d'avertissement. Vous pouvez utiliser les caractères de substitution et des arguments supplémentaires avec cette méthode.

Exemples d'utilisation

Afficher du texte dans la console

La fonction la plus utilisée de la console est d'afficher du texte ou autres données. Il y a quatre sortes d'affichages que vous pouvez générer, en utilisant les méthodes console.log(), console.info(), console.warn(), et console.error(). Chacune de ces méthodes génére un affichage différent dans la console, et vous pouvez utiliser les fonctions de filtrage du navigateur pour voir uniquement les types de sortie qui vous intéressent.

Il y a deux manières d'utiliser chacune de ces méthodes de sortie ; Vous pouvez passer une liste d'objets dont leur représentation sera concaténée dans une seule chaine et s'affichera dans la console, ou vous pouvez passer une chaîne de caractères contenant zéro et plus de caractères de substitution suivis d'une liste d'objets avec lesquels les remplacer.

Afficher un seul objet

La manière la plus simple d'utiliser les méthodes de « log » est d'afficher un seul objet :

var someObject = { str: "Some text", id: 5 };
console.log(someObject);

L'affichage ressemblera à ceci :

[09:27:13.475] ({str:"Some text", id:5})

Afficher plusieurs objets

Vous pouvez aussi afficher plusieurs objets, en les séparant par une virgule, comme ceci :

var car = "Dodge Charger";
var someObject = {str:"Some text", id:5}; 
console.info("My first car was a", car, ". The object is: ", someObject);

L'affichage ressemblera à ceci :

[09:28:22.711] My first car was a Dodge Charger . The object is:  ({str:"Some text", id:5})

Utiliser les caractères de substitution

Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) a amené le support des caractères de substitution. Lorsque l'on passe en argument une chaîne à l'une des méthodes qui acceptent des chaînes de caractère, on peut utiliser ces caractères de substitution :

caractère de substitution description
%o Affiche un lien hypertexte sur un objet JavaScript. Cliquer le lien ouvre l'inspecteur.
%d or %i Affiche un entier. Le formater n'est pas encore supporté.
%s Affiche une chaîne de caractères.
%f Affiche un nombre réél. Le formater n'est pas encore supporté.

Chacun de ceux-ci ira chercher l'argument qui suit la chaîne à formater. Par exemple :

for (var i=0; i<5; i++) {
  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
}

L'affichage ressemblera à ceci :

[13:14:13.481] Hello, Bob. You've called me 1 times.
[13:14:13.483] Hello, Bob. You've called me 2 times.
[13:14:13.485] Hello, Bob. You've called me 3 times.
[13:14:13.487] Hello, Bob. You've called me 4 times.
[13:14:13.488] Hello, Bob. You've called me 5 times.

Styler l'affichage de la console

Vous pouvez utiliser l'instruction "%c" pour appliquer du style CSS à l'affichage de la console :

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

Using groups in the console

(Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6)

Vous pouvez utiliser des groupes imbriqués pour vous aider à vous repérer dans l'affichage. Pour créer un nouveau bloc, appelez console.group(). La méthode console.groupCollapsed() est similaire, mais elle crée un bloc qui sera réduit.

Note: Collapsed groups ne sont pas supportés pour l'instant dans Gecko; La méthode groupCollapsed() est la même que group() en ce moment.

Pour quitter le groupe imbriqué dans lequel on est, appeler console.groupEnd().

Par exemple, examinez ce code :

console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.debug("Back to the outer level");

L'affichage ressemblera à ceci :

nesting.png

Timers

(Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7)

Pour calculer la durée d'une opération spécifique, Gecko 10 a amené le supports des chronomètres dans l'objet console. To start a timer, call the console.time() method, giving it a name as the only parameter. To stop the timer, and to get the elapsed time in milliseconds, just call the console.timeEnd() method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.

Par exemple, voici ce code :

console.time("answer time");
alert("Click to continue");
console.timeEnd("answer time");

affichera le temps pour l'utilisateur dont il a eu besoin pour faire disparaitre la fenêtre d'alerte :

timerresult.png

Notice that the timer's name is displayed both when the timer is started and when it's stopped.

Note: It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.

Traces d'appel

L'objet console supporte aussi l'affichage d'une trace d'appels ; Cela montre le chemin pris pour atteindre l'endroit auquel vous avez fait appel à la fonction console.trace(). Ce qui donne avec ce code :

foo();

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

L'affichage dans la console ressemblera à ceci :

Spécification

Console Object API

Notes

  • At least in Firefox, if a page defines a console object, that object overrides the one built into Firefox.
  • Prior to Gecko 12.0, the console object's methods only work when the Web Console is open. Starting with Gecko 12.0, output is cached until the Web Console is opened, then displayed at that time.
  • It's worth noting that the Firefox's built-in console object is compatible with the one provided by Firebug.

See also

Other implementations

 

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : P45QU10U, fscholz
 Dernière mise à jour par : P45QU10U,