Différence entre console.log () et console.debug ()?

144

Google ne m'a pas été utile, car la recherche de "console.debug" ne fait que faire apparaître un tas de pages contenant les mots "console" et "debug".

Je me demande quelle est la différence entre console.log()et console.debug(). Existe-t-il un moyen d'utiliser un tas d' console.debug()instructions puis de simplement basculer un commutateur pour désactiver facilement toutes les instructions de débogage envoyées à la console (comme après le lancement d'un site)?

— CaptSaltyJack
source

Voici comment désactiver les sorties console.log stackoverflow.com/questions/1215392/…

— frazras

Vous pouvez mettre des couleurs. console.log ('% c Exemple de texte', 'couleur: vert;'); Ou ajoutez un VAR dans le texte en utilisant: console.log (`Sample $ {variable}`, 'color: green;');

— Gilberto B.Terra Jr.29

74

Pour au moins les consoles IE, Firefox et Chrome, .debug () est juste un alias pour .log () ajouté pour une meilleure compatibilité

https://developer.mozilla.org/en-US/docs/Web/API/console

https://developers.google.com/chrome-developer-tools/docs/console-api#consoledebugobject_object

https://msdn.microsoft.com/en-us/library/ie/hh772183(v=vs.85).aspx

— Pete TNT
source

55

Dans Chrome debug()apparaît en bleu et log()en noir

— Simon_Weaver

38

Une sérieuse amélioration par rapport à log ().

— Vael Victus

32

Depuis developer.mozilla.org/en-US/docs/Web/API/console : console.debug () - Remarque: à partir de Chromium 58, cette méthode n'apparaît que dans les consoles de navigateur Chromium lorsque le niveau "Verbose" est sélectionné.

— cilf

Utilisation du débogage dans Chrome: les appels au débogage ne sont pas autorisés

— Masoud Bimar

103

Techniquement console.log console.debuget console.infosont identiques Cependant la façon dont ils affichent les données est peu différente

console.log Texte de couleur noire sans icône

console.info Texte de couleur bleue avec icône

console.debug Texte de couleur noire pure

console.warn Texte de couleur jaune avec icône

console.error Texte de couleur rouge avec icône

var playerOne = 120;
var playerTwo = 130;
var playerThree = 140;
var playerFour = 150;
var playerFive = 160;

console.log("Console.log" + " " +  playerOne);
console.debug("Console.debug" + " " +playerTwo);
console.warn("Console.warn" + " " + playerThree);
console.info("Console.info" + " " + playerFour);
console.error("Console.error" + " " + playerFive);

— Prabhakar Undurthi
source

Dans Google Chrome info, les journaux de niveau du navigateur sont simplement affichés avec une icône (identique à celle de l'instantané), mais le texte ( console.infotexte de votre message) est de couleur noire et la couleur d'arrière-plan de la ligne est blanche. Peut-être votre instantané pour le navigateur Firefox.

— RBT

3

Merci pour la réponse, très claire avec la capture d'écran. Je dois demander cependant, pourquoi la concaténation de chaînes? Pourquoi pas juste console.log("Console.log");au lieu de console.log("Console.log" + " " + playerOne);? Que fait le " " + playerOne?

— hofnarwillie

Dans ma console, j'obtiens le même affichage avec

console.log("Console.log"); console.debug("Console.debug"); console.warn("Console.warn");  console.info("Console.info");  console.error("Console.error");

— kotchwane

36

Ils sont presque identiques - la seule différence est que les messages de débogage sont masqués par défaut dans les versions récentes de Chrome (vous devez définir le niveau de journal sur Verbosedans la barre supérieure Devtools lorsque vous êtes dans la console pour voir les messages de débogage; les messages de journal sont visibles par défaut).

— user2486570
source

2

Salut, cela semble vrai, mais je ne trouve aucune information sur ce comportement. Les documents Chrome ne le mentionnent pas à ce jour.

— oligofren

3

Maintenant, j'ai finalement compris "définir le niveau de journalisation sur Verbose sur la console". Vous voulez dire que dans Dev Tools, il y a la console en bas. En haut de cette section, avec le filtre et le sélecteur de cadre, il y a aussi une liste déroulante de verbosité pour les journaux (prédéfinis sur "Info")

— oligofren

1

C'est la réponse la plus pertinente. Tout le monde mentionne les couleurs mais c'est l'OMI le plus important.

— DurkoMatko

15

console.info, les console.debugméthodes sont identiques à console.log.

console.log Relevé d'impression
console.info Texte de couleur noire avec icône "i" de couleur bleue
console.debug Texte de couleur bleue

Documentation:

— Venkat
source

Console.info imprime la couleur bleue, console.warn imprime la couleur jaune et console.error imprime la couleur rouge

— shivgre

J'ai testé dans Chrome 52.0.2743.82 Console.Info imprime en couleur noire avec icône bleue, Console.warn imprime en noir avec icône jaune console.error imprime en couleur rouge avec icône rouge

— Venkat

veuillez modifier votre réponse en conséquence afin que je puisse voter pour ou supprimer un vote défavorable, avez-vous remarqué l'icône "i" de couleur bleue avant le texte imprimé en utilisant console.info ()

— shivgre

2

Si vous souhaitez pouvoir désactiver la journalisation une fois le produit terminé, vous pouvez remplacer la console.debug()fonction ou en créer une autre personnalisée.

console.debug = function() {
    if(!console.debugging) return;
    console.log.apply(this, arguments);
};

console.debugging = true;
console.debug('Foo', {age:41, name:'Jhon Doe'});

Foo▸ {âge: 41 ans, nom: "Jhon Doe"}

console.debugging = false;
console.debug('Foo', {age:26, name:'Jane Doe'});

Pas de sortie

Cependant, je n'ai pas trouvé de moyen de colorer les sorties également.

— Espen MS
source

1

De la documentation des navigateurs, le log, debuget aussiinfo les méthodes sont identiques dans la mise en œuvre , mais sage varie en couleur et icône

https://jsfiddle.net/yp4z76gg/1/

— Venkat
source

1

Cela devrait être un commentaire ou ajouter plus d'explications avec une réponse sur la façon dont les deux sont identiques ou aucune différence pour comprendre OP et les autres.Merci

— ρяσѕρєя K