Recherche…


Introduction

La console de débogage ou la console Web d'un navigateur est généralement utilisée par les développeurs pour identifier les erreurs, comprendre le flux d'exécution, consigner les données et, à bien d'autres fins, à l'exécution. Cette information est accessible via l'objet console .

Syntaxe

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

Paramètres

Paramètre La description
obj1 ... objN Une liste d'objets JavaScript dont les représentations de chaîne sont sorties dans la console
msg Une chaîne JavaScript contenant zéro ou plusieurs chaînes de substitution.
sub1 ... subN Objets JavaScript avec lesquels remplacer les chaînes de substitution dans msg.

Remarques

Les informations affichées par une console de débogage / Web sont mises à disposition via les multiples méthodes de l’objet Javascript de la console consultables via console.dir(console) . Outre la propriété console.memory , les méthodes affichées sont généralement les suivantes (extraites de la sortie de Chrome):

Ouvrir la console

Dans la plupart des navigateurs actuels, la console JavaScript a été intégrée en tant qu'onglet dans Developer Tools. Les touches de raccourci répertoriées ci-dessous ouvrent les outils de développement, il peut être nécessaire de passer à l'onglet suivant.


Chrome

Ouverture du panneau “Console” des DevTools de Chrome:

  • Windows / Linux: l'une des options suivantes.

    • Ctrl + Maj + J
    • Ctrl + Shift + I , puis cliquez sur l'onglet "Web Console" ou appuyez sur ESC pour activer ou désactiver la console
    • F12 , puis cliquez sur l'onglet «Console» ou appuyez sur ESC pour activer ou désactiver la console.
  • Mac OS: Cmd + Opt + J


Firefox

Ouverture du panneau «Console» dans les outils de développement de Firefox:

  • Windows / Linux: l'une des options suivantes.

    • Ctrl + Maj + K
    • Ctrl + Shift + I , puis cliquez sur l'onglet "Web Console" ou appuyez sur ESC pour activer ou désactiver la console
    • F12 , puis cliquez sur l'onglet «Web Console» ou appuyez sur ESC pour activer ou désactiver la console.
  • Mac OS: Cmd + Opt + K


Edge et Internet Explorer

Ouvrir le panneau «Console» dans les outils de développement F12 :

  • F12 , puis cliquez sur l'onglet «Console»

Safari

En ouvrant le panneau «Console» dans l' inspecteur Web de Safari, vous devez d'abord activer le menu de développement dans les préférences de Safari.

préférences de safari

Ensuite, vous pouvez choisir "Développer-> Afficher la console d’erreur" dans les menus ou appuyer sur + Option + C


Opéra

Ouvrir la «console» dans l'opéra:

  • Ctrl + Maj + I , puis cliquez sur l'onglet "Console"

Compatibilité

Lorsque vous utilisez ou émule Internet Explorer 8 ou versions antérieures (par exemple par le biais d' affichage de compatibilité / mode Enterprise) la console sont uniquement définis lorsque les outils de développement sont actifs, donc console.log() déclarations peuvent provoquer une exception et empêcher le code d'exécution. Pour atténuer ce problème, vous pouvez vérifier si la console est disponible avant de vous connecter:

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

Ou, au début de votre script, vous pouvez identifier si la console est disponible et sinon, définissez une fonction null pour intercepter toutes vos références et empêcher les exceptions.

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

Notez que ce deuxième exemple arrête tous les journaux de la console même si la fenêtre du développeur a été ouverte.

L'utilisation de ce deuxième exemple empêchera l'utilisation d'autres fonctions telles que console.dir(obj) sauf si cela est spécifiquement ajouté.

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:

(indice) valeur
0 "Bonjour"
1 "monde"
console.table({foo: 'bar', bar: 'baz'});

affiche comme:

(indice) valeur
"foo" "bar"
"bar" "baz"

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:

entrer la description de l'image ici

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)
    

Fonctions de la console

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);

sortie

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 :

Assertion avec plusieurs objets en tant que paramètres

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:

Spécificateur Sortie
%s Formate la valeur sous forme de chaîne
%i ou %d Formate la valeur sous la forme d'un entier
%f Formate la valeur en tant que valeur à virgule flottante
%o Formate la valeur en tant qu'élément DOM extensible
%O Formate la valeur en tant qu'objet JavaScript extensible
%c Applique les règles de style CSS à la chaîne de sortie spécifiée par le deuxième paramètre

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:

sortie

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:

sortie de plusieurs spécificateurs CSS


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:

Groupe effondré = Collapsed group expanded => Groupe élargi

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:

entrer la description de l'image ici


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:

entrer la description de l'image ici

Exemple 2:

console.log(document)

affiche:

entrer la description de l'image ici

Exemple 3:

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

console.dirxml(myObject);

affiche:

entrer la description de l'image ici



Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow