Różnica między console.log () i console.debug ()?

143

Google nie jest dla mnie pomocne, ponieważ wyszukanie „console.debug” powoduje po prostu wyświetlenie kilku stron, które zawierają słowa „konsola” i „debugowanie”.

Zastanawiam się, jaka jest różnica między console.log()i console.debug(). Czy istnieje sposób na użycie zestawu console.debug()instrukcji, a następnie po prostu przestawienie przełącznika, aby łatwo wyłączyć wysyłanie wszystkich instrukcji debugowania do konsoli (np. Po uruchomieniu witryny)?

CaptSaltyJack
źródło
Oto jak wyłączyć wyjście console.log stackoverflow.com/questions/1215392/ ...
frazras
Możesz umieścić kolory. console.log ('% c Przykładowy tekst', 'kolor: zielony;'); Lub dodaj VAR do tekstu za pomocą: console.log (`Sample $ {zmienna}`, 'color: green;');
Gilberto B. Terra Jr.

Odpowiedzi:

74

Przynajmniej na konsolach IE, Firefox i Chrome .debug () to po prostu alias dla .log () dodany w celu zwiększenia kompatybilności

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
źródło
55
W Chrome debug()pojawia się na niebiesko i log()na czarno
Simon_Weaver
38
Poważna poprawa w porównaniu z log ().
Vael Victus
32
Od developer.mozilla.org/en-US/docs/Web/API/console : console.debug () - Uwaga: począwszy od Chromium 58 ta metoda pojawia się tylko w konsolach przeglądarki Chromium, gdy wybrany jest poziom „Pełen”.
cilf
Używanie debugowania w Chrome: wywoływanie debugowania jest
niedozwolone
103

Technicznie console.log console.debugi console.infosą identyczne Jednak sposób wyświetlania danych jest trochę inny

console.log Czarny tekst bez ikony

console.info Niebieski kolor tekstu z ikoną

console.debug Czysty czarny tekst

console.warn Żółty kolor tekstu z ikoną

console.error Kolor czerwony tekst z ikoną

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

wprowadź opis obrazu tutaj

Prabhakar Undurthi
źródło
W Google Chrome infodzienniki poziomu przeglądarki są po prostu wyświetlane z ikoną (tak samo jak na migawce), ale tekst ( console.infotekst w Twoim poście) jest w kolorze czarnym, a kolor tła wiersza jest biały. Prawdopodobnie twoja migawka dla przeglądarki Firefox.
RBT
3
Dzięki za odpowiedź, bardzo jasna ze zrzutem ekranu. Muszę jednak zapytać, dlaczego konkatenacja ciągów? Dlaczego nie console.log("Console.log");zamiast tego console.log("Console.log" + " " + playerOne);? Co to " " + playerOnerobi?
hofnarwillie
W mojej konsoli ten sam wyświetlacz console.log("Console.log"); console.debug("Console.debug"); console.warn("Console.warn"); console.info("Console.info"); console.error("Console.error");
pokazuje
36

Są prawie identyczne - jedyną różnicą jest to, że komunikaty debugowania są domyślnie ukryte w najnowszych wersjach Chrome (musisz ustawić poziom dziennika Verbosena pasku górnym Devtools w konsoli, aby zobaczyć komunikaty debugowania; komunikaty dziennika są domyślnie widoczne).

user2486570
źródło
2
Cześć, wydaje mi się, że to prawda, ale nie mogę znaleźć żadnych informacji na temat tego zachowania. Dokumenty Chrome nie wspominają o tym na dzień dzisiejszy.
oligofren
3
Teraz w końcu zrozumiałem „ustaw poziom dziennika na Verbose na górze konsoli”. Masz na myśli, że w Dev Tools jest konsola na dole. U góry tej sekcji, wraz z filtrem i selektorem ramek, znajduje się również lista rozwijana szczegółowości dzienników (wstępnie ustawiona na „Informacje”)
oligofren
1
To jest najbardziej trafna odpowiedź. Wszyscy wspominają o kolorach, ale to IMO jest ważniejsze.
DurkoMatko
15

console.info, console.debugmetody są takie same jak console.log.

  • console.log Oświadczenie o druku
  • console.info Czarny tekst z ikoną „i” w kolorze niebieskim
  • console.debug Tekst w kolorze niebieskim

Dokumentacja:

Venkat
źródło
Console.info drukuje na niebiesko, console.warn na żółto, a console.error na czerwono
shivgre
Przetestowałem w Chrome 52.0.2743.82 Console.Info drukuje w kolorze czarnym z niebieską ikoną, Console.warn drukuje w kolorze czarnym z żółtą ikoną console.error drukuje w kolorze czerwonym z czerwoną ikoną
Venkat
edytuj odpowiednio swoją odpowiedź, abym mógł zagłosować za lub usunąć głos przeciwny. Czy zauważyłeś niebieską ikonę „i” przed wydrukowanym tekstem podczas korzystania z console.info ()
shivgre
2

Jeśli chcesz mieć możliwość wyłączenia logowania po zakończeniu produktu, możesz zastąpić tę console.debug()funkcję lub utworzyć inną niestandardową.

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

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

Foo▸ {wiek: 41, imię: "Jhon Doe"}

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

Brak wyjścia

Jednak nie znalazłem sposobu na pokolorowanie również wyjść.

Espen MS
źródło
1

Z dokumentacji przeglądarek metody log, debuga także infosą identyczne pod względem implementacji, ale różnią się kolorem i ikoną

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

Venkat
źródło
1
To powinien być komentarz lub dodać więcej wyjaśnień wraz z odpowiedzią, że oba są identyczne lub nie ma różnicy, aby zrozumieć OP i inne. Dzięki
ρяσѕρєя K