Unterschied zwischen console.log () und console.debug ()?

143

Google war für mich nicht hilfreich, da bei der Suche nach "console.debug" nur eine Reihe von Seiten mit den Wörtern "console" und "debug" angezeigt werden.

Ich frage mich, was der Unterschied zwischen console.log()und ist console.debug(). Gibt es eine Möglichkeit, eine Reihe von console.debug()Anweisungen zu verwenden und dann einfach einen Schalter zu betätigen, um zu verhindern, dass alle Debug-Anweisungen an die Konsole gesendet werden (wie nach dem Start einer Site)?

javascript console console.log web-developer-toolbar CaptSaltyJack
quelle
Hier ist, wie man die console.log-Ausgaben deaktiviert stackoverflow.com/questions/1215392/…
frazras
Sie können Farben setzen. console.log ('% c Beispieltext', 'Farbe: grün;'); Oder fügen Sie dem Text eine VAR hinzu, indem Sie: console.log (`Sample $ {variable}`, 'color: green;');
Gilberto B. Terra Jr.

Antworten:

74

Für mindestens IE-, Firefox- und Chrome-Konsolen ist .debug () nur ein Alias ​​für .log (), der zur Verbesserung der Kompatibilität hinzugefügt wurde

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
quelle
55
In Chrome erscheint debug()in blau und log()in schwarz
Simon_Weaver
38
Eine ernsthafte Verbesserung gegenüber log ().
Vael Victus
32
Von developer.mozilla.org/en-US/docs/Web/API/console : console.debug () - Hinweis: Ab Chromium 58 wird diese Methode nur in Chromium-Browserkonsolen angezeigt, wenn die Stufe "Verbose" ausgewählt ist.
cilf
Verwenden von Debug in Chrome: Das Aufrufen von Debug ist nicht erlaubt
Masoud Bimar
103

Technisch console.log console.debugund console.infoidentisch. Die Art und Weise, wie sie die Daten anzeigen, unterscheidet sich jedoch kaum

console.log Schwarzer Text ohne Symbol

console.info Blauer Text mit Symbol

console.debug Reiner schwarzer Text

console.warn Gelber Farbtext mit Symbol

console.error Rote Farbe Text mit Symbol

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

Geben Sie hier die Bildbeschreibung ein

Prabhakar Undurthi
quelle
In Google Chrome infowerden Protokolle auf Browserebene einfach mit einem Symbol angezeigt (wie im Schnappschuss), aber der Text ( console.infoText in Ihrem Beitrag) ist schwarz und die Hintergrundfarbe der Zeile ist weiß. Möglicherweise Ihr Schnappschuss für den Firefox-Browser.
RBT
3
Danke für die Antwort, sehr klar mit dem Screenshot. Muss ich aber fragen, warum die String-Verkettung? Warum nicht einfach console.log("Console.log");statt console.log("Console.log" + " " + playerOne);? Was macht das " " + playerOne?
Hofnarwillie
In meiner Konsole bekomme ich das gleiche Display mitconsole.log("Console.log"); console.debug("Console.debug"); console.warn("Console.warn"); console.info("Console.info"); console.error("Console.error");
kotchwane
36

Sie sind fast identisch - der einzige Unterschied besteht darin, dass Debug-Meldungen in neueren Versionen von Chrome standardmäßig ausgeblendet sind (Sie müssen die Protokollstufe Verbosein der Devtools-Oberleiste in der Konsole festlegen, um Debug-Meldungen anzuzeigen; Protokollmeldungen werden standardmäßig angezeigt).

user2486570
quelle
2
Hallo, das scheint wahr zu sein, aber ich kann keine Informationen zu diesem Verhalten finden. In den Chrome-Dokumenten wird dies bis heute nicht erwähnt.
Oligofren
3
Jetzt verstand ich endlich "Setze Log Level auf Verbose oben auf der Konsole". Sie meinen, in Dev Tools befindet sich die Konsole unten. Oben in diesem Abschnitt gibt es zusammen mit Filter und der Rahmenauswahl auch ein Dropdown-
Menü
1
Dies ist die relevanteste Antwort. Jeder erwähnt Farben, aber das ist IMO wichtiger.
DurkoMatko
15

console.info, console.debugMethoden sind identisch mit console.log.

  • console.log Druckanweisung
  • console.info Schwarzer Text mit "i" -Symbol in blauer Farbe
  • console.debug Blauer Farbtext

Dokumentation:

Venkat
quelle
Console.info druckt blaue Farbe, console.warn druckt gelbe Farbe und console.error druckt rote Farbe
shivgre
Ich habe in der Chrome 52.0.2743.82 Console.Info-Drucke in schwarzer Farbe mit blauem Symbol getestet, Console.warn-Drucke in schwarzer Farbe mit gelbem Symbol console.error-Drucke in roter Farbe mit rotem Symbol
Venkat
Bitte bearbeiten Sie Ihre Antwort entsprechend, damit ich abstimmen oder ablehnen kann. Haben Sie das blau gefärbte "i" -Symbol vor dem gedruckten Text bemerkt, während Sie console.info ()
shivgre
2

Wenn Sie die Protokollierung nach Fertigstellung eines Produkts deaktivieren möchten, können Sie die console.debug()Funktion überschreiben oder eine andere benutzerdefinierte Funktion erstellen.

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

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

Foo▸ {Alter: 41, Name: "Jhon Doe"}

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

Keine Leistung

Ich habe jedoch keine Möglichkeit gefunden, auch die Ausgänge einzufärben.

Espen MS
quelle
1

Von Dokumentation von Browsern, die log, debugund auch infoMethoden sind identisch in der Umsetzung wiese , sondern variieren in Farbe und Symbol

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

Venkat
quelle
1
Dies sollte ein Kommentar sein oder eine weitere Erklärung mit Antwort darauf hinzufügen, wie beide identisch sind oder keinen Unterschied, um OP und andere zu verstehen.
Danke