JavaScript
Console

Introduction

Syntaxe

• void console.log (obj1 [, obj2, ..., objN]);
• void console.log (msg [, sub1, ..., subN]);

Paramètres

Remarques

if (typeof window.console !== 'undefined')
{
   console.log("Hello World");
}

if (!window.console)
{ 
    console = {log: function() {}}; 
}

Tabulation des valeurs - console.table ()

Dans la plupart des environnements, console.table() peut être utilisé pour afficher des objets et des tableaux dans un format tabulaire.

Par exemple:

console.table(['Hello', 'world']);

affiche comme:

console.table({foo: 'bar', bar: 'baz'});

affiche comme:

var personArr = [{"personId": 123, "name": "Jhon", "city": "Melbourne", "phoneNo": "1234567890"}, {"personId": 124, "name": "Amelia" , "ville": "Sydney", "phoneNo": "1234567890"}, {"personId": 125, "name": "Emily", "city": "Perth", "phoneNo": "1234567890"}, {"personId": 126, "name": "Abraham", "city": "Perth", "phoneNo": "1234567890"}];

console.table (personArr, ['name', 'personId']);

affiche comme:

Inclure une trace de pile lors de la connexion - console.trace ()

function foo() {
  console.trace('My log statement');
}

foo();

Affichera ceci dans la console:

My log statement       VM696:1
  foo                  @ VM696:1
  (anonymous function) @ (program):1

Remarque: Lorsque disponible, il est également utile de savoir que la même trace de pile est accessible en tant que propriété de l'objet Error. Cela peut être utile pour le post-traitement et la collecte de commentaires automatisés.

var e = new Error('foo');
console.log(e.stack);

Impression sur la console de débogage d'un navigateur

Une console de débogage de navigateur peut être utilisée pour imprimer des messages simples. Ce débogage ou la console Web peut être directement ouvert dans le navigateur (touche F12 dans la plupart des navigateurs - voir Remarques ci-dessous pour plus d'informations) et la méthode de log de l'objet Javascript de la console peut être appelée en tapant ce qui suit:

console.log('My message');

Ensuite, en appuyant sur Entrée , cela affichera My message dans la console de débogage.

console.log() peut être appelé avec n'importe quel nombre d'arguments et de variables disponibles dans la portée actuelle. Plusieurs arguments seront imprimés sur une seule ligne avec un petit espace entre eux.

var obj = { test: 1 };
console.log(['string'], 1, obj, window);

La méthode log affichera les éléments suivants dans la console de débogage:

['string']  1  Object { test: 1 }  Window { /* truncated */ }

Outre les chaînes simples, console.log() peut gérer d'autres types, tels que les tableaux, les objets, les dates, les fonctions, etc.

console.log([0, 3, 32, 'a string']);
console.log({ key1: 'value', key2: 'another value'});

Affiche:

Array [0, 3, 32, 'a string']
Object { key1: 'value', key2: 'another value'}

Les objets imbriqués peuvent être réduits:

console.log({ key1: 'val', key2: ['one', 'two'], key3: { a: 1, b: 2 } });

Affiche:

Object { key1: 'val', key2: Array[2], key3: Object }

Certains types tels que les objets Date et les function peuvent être affichés différemment:

console.log(new Date(0));
console.log(function test(a, b) { return c; });

Affiche:

Wed Dec 31 1969 19:00:00 GMT-0500 (Eastern Standard Time)
function test(a, b) { return c; }

Autres méthodes d'impression

Outre la méthode de log , les navigateurs modernes prennent également en charge des méthodes similaires:

• console.info - Une petite icône informative (ⓘ) apparaît sur le côté gauche de la chaîne ou des objets imprimés.

• console.warn - une petite icône d'avertissement (!) apparaît sur le côté gauche. Dans certains navigateurs, l'arrière-plan du journal est jaune.

• console.error - une petite icône de temps (⊗) apparaît sur le côté gauche. Dans certains navigateurs, l'arrière-plan du journal est rouge.

• console.timeStamp - console.timeStamp l'heure actuelle et une chaîne spécifiée, mais n'est pas standard:

  console.timeStamp('msg');
  

  Affiche:

  00:00:00.001 msg
  

• console.trace - console.trace la trace de pile actuelle ou affiche la même sortie que la méthode de log si elle est appelée dans la portée globale.

  function sec() {
     first();
  }
  function first() {
     console.trace();
  }
  sec();
  

  Affiche:

  first
  sec
  (anonymous function)
  

L'image ci-dessus montre toutes les fonctions, à l'exception de timeStamp , dans la version 56 de Chrome.

Ces méthodes se comportent de la même manière que la méthode de log et, dans différentes consoles de débogage, elles peuvent être affichées dans différents formats ou couleurs.

Dans certains débogueurs, les informations sur les objets individuels peuvent être étendues en cliquant sur le texte imprimé ou sur un petit triangle (►) qui fait référence aux propriétés de l'objet respectif. Ces propriétés d'objet réductibles peuvent être ouvertes ou fermées dans le journal. Voir la console.dir pour plus d'informations à ce sujet

Temps de mesure - console.time ()

console.time() peut être utilisé pour mesurer la durée d'exécution d'une tâche dans votre code.

L'appel de console.time([label]) lance un nouveau temporisateur. Lorsque console.timeEnd([label]) est appelé, le temps écoulé, en millisecondes, depuis le début de l'appel .time() est calculé et consigné. En raison de ce comportement, vous pouvez appeler .timeEnd() plusieurs reprises avec la même étiquette pour consigner le temps écoulé depuis l' .time() origine .time() .

Exemple 1:

console.time('response in');

alert('Click to continue');
console.timeEnd('response in');

alert('One more time');
console.timeEnd('response in');

va sortir:

response in: 774.967ms
response in: 1402.199ms

Exemple 2:

var elms = document.getElementsByTagName('*'); //select all elements on the page

console.time('Loop time');

for (var i = 0; i < 5000; i++) {
    for (var j = 0, length = elms.length; j < length; j++) {
        // nothing to do ...
    }
}

console.timeEnd('Loop time');

va sortir:

Loop time: 40.716ms

Compter - console.count ()

console.count([obj]) place un compteur sur la valeur de l'objet fournie en argument. Chaque fois que cette méthode est invoquée, le compteur est augmenté (à l'exception de la chaîne vide '' ). Une étiquette avec un numéro est affichée dans la console de débogage au format suivant:

[label]: X

label représente la valeur de l'objet passé en argument et X représente la valeur du compteur.

La valeur d'un objet est toujours prise en compte, même si les variables sont fournies comme arguments:

var o1 = 1, o2 = '2', o3 = "";
console.count(o1);
console.count(o2);
console.count(o3);

console.count(1);
console.count('2');
console.count('');

Affiche:

1: 1
2: 1
: 1
1: 2
2: 2
: 1

Les chaînes avec des nombres sont converties en objets Number :

console.count(42.3);
console.count(Number('42.3'));
console.count('42.3');

Affiche:

42.3: 1
42.3: 2
42.3: 3

Les fonctions pointent toujours vers l'objet Function global:

console.count(console.constructor);
console.count(function(){});
console.count(Object);
var fn1 = function myfn(){};
console.count(fn1);
console.count(Number);

Affiche:

[object Function]: 1
[object Function]: 2
[object Function]: 3
[object Function]: 4
[object Function]: 5

Certains objets reçoivent des compteurs spécifiques associés au type d'objet auquel ils se réfèrent:

console.count(undefined);
console.count(document.Batman);
var obj;
console.count(obj);
console.count(Number(undefined));
console.count(NaN);
console.count(NaN+3);
console.count(1/0);
console.count(String(1/0));
console.count(window);
console.count(document);
console.count(console);
console.count(console.__proto__);
console.count(console.constructor.prototype);
console.count(console.__proto__.constructor.prototype);
console.count(Object.getPrototypeOf(console));
console.count(null);

Affiche:

undefined: 1
undefined: 2
undefined: 3
NaN: 1
NaN: 2
NaN: 3
Infinity: 1
Infinity: 2
[object Window]: 1
[object HTMLDocument]: 1
[object Object]: 1
[object Object]: 2
[object Object]: 3
[object Object]: 4
[object Object]: 5
null: 1

Chaîne vide ou absence d'argument

Si aucun argument n'est fourni lors de la saisie séquentielle de la méthode count dans la console de débogage , une chaîne vide est considérée comme paramètre, à savoir:

> console.count();
  : 1
> console.count('');
  : 2
> console.count("");
  : 3

Déboguer avec des assertions - console.assert ()

Ecrit un message d'erreur sur la console si l'assertion est false . Sinon, si l'assertion est true , cela ne fait rien.

console.assert('one' === 1);

Plusieurs arguments peuvent être fournis après l'assertion - il peut s'agir de chaînes ou d'autres objets - qui ne seront imprimés que si l'assertion est false :

console.assert ne lance pas une AssertionError (sauf dans Node.js ), ce qui signifie que cette méthode est incompatible avec la plupart des frameworks de test et que l'exécution du code ne sera pas interrompue lors d'une assertion échouée.

Formatage de la sortie de la console

De nombreuses méthodes d'impression de la console peuvent également gérer le formatage des chaînes de type C , en utilisant les jetons % :

console.log('%s has %d points', 'Sam', 100);

Affiche Sam has 100 points .

La liste complète des spécificateurs de format dans Javascript est:

Style avancé

Lorsque le spécificateur de format CSS ( %c ) est placé à gauche de la chaîne, la méthode print accepte un second paramètre avec des règles CSS qui permettent un contrôle précis de la mise en forme de cette chaîne:

console.log('%cHello world!', 'color: blue; font-size: xx-large');

Affiche:

Il est possible d'utiliser plusieurs spécificateurs de format %c :

• toute sous-chaîne à droite d'un %c a un paramètre correspondant dans la méthode d'impression;
• ce paramètre peut être une chaîne emtpy, s'il n'est pas nécessaire d'appliquer des règles CSS à cette même sous-chaîne;
• Si deux spécificateurs de format %c sont trouvés, les règles du 1 ^er (encapsulé dans %c ) et de la 2 ^ème sous-chaîne seront définies respectivement dans les 2 ^ème et 3 ^ème paramètres de la méthode d'impression.
• si trois %c formats de type se trouvent, le 1 ^er, 2 ^e et 3 ^e sous - chaînes auront leurs règles définies dans le 2 ^ème, 3 ^ème et 4 ^ème paramètre respectivement, et ainsi de suite ...

console.log("%cHello %cWorld%c!!", // string to be printed
            "color: blue;", // applies color formatting to the 1st substring
            "font-size: xx-large;", // applies font formatting to the 2nd substring
            "/* no CSS rule*/" // does not apply any rule to the remaing substring
);

Affiche:

Utiliser des groupes pour indenter une sortie

La sortie peut être identifiée et incluse dans un groupe réduit dans la console de débogage à l'aide des méthodes suivantes:

• console.groupCollapsed() : crée un groupe réduit d'entrées pouvant être développé via le bouton de divulgation afin de révéler toutes les entrées effectuées après l'appel de cette méthode;
• console.group() : crée un groupe d'entrées étendu pouvant être réduit afin de masquer les entrées après l'appel de cette méthode.

L'identification peut être supprimée pour les entrées postérieures en utilisant la méthode suivante:

• console.groupEnd () : quitte le groupe actuel, permettant aux nouvelles entrées d'être imprimées dans le groupe parent après l'appel de cette méthode.

Les groupes peuvent être mis en cascade pour permettre plusieurs couches de sortie identifiées ou réductibles:

= Collapsed group expanded =>

Effacer la console - console.clear ()

Vous pouvez effacer la fenêtre de la console en utilisant la méthode console.clear() . Cela supprime tous les messages précédemment imprimés dans la console et peut imprimer un message comme "La console a été effacée" dans certains environnements.

Affichage interactif d'objets et de XML - console.dir (), console.dirxml ()

console.dir(object) affiche une liste interactive des propriétés de l'objet JavaScript spécifié. La sortie est présentée sous la forme d'une liste hiérarchique avec des triangles de divulgation qui vous permettent de voir le contenu des objets enfants.

var myObject = {
    "foo":{
        "bar":"data"
    }
};

console.dir(myObject);

affiche:

console.dirxml(object) imprime une représentation XML des éléments descendants de l'objet si possible, ou la représentation JavaScript si ce n'est pas le cas. L'appel de console.dirxml() sur les éléments HTML et XML équivaut à appeler console.log() .

Exemple 1:

console.dirxml(document)

affiche:

Exemple 2:

console.log(document)

affiche:

Exemple 3:

var myObject = {
    "foo":{
        "bar":"data"
    }
};

console.dirxml(myObject);

affiche: