Разница между console.log () и console.debug ()?

149

Google не помог мне, так как поиск по запросу console.debug просто вызывает кучу страниц, на которых есть слова «console» и «debug».

Мне интересно, в чем разница между console.log()и console.debug(). Есть ли способ использовать кучу console.debug()операторов, а затем просто щелкнуть переключателем, чтобы легко отключить отправку всех операторов отладки на консоль (например, после запуска сайта)?

CaptSaltyJack
источник
Вот как отключить вывод console.log stackoverflow.com/questions/1215392/…
frazras
Можно поставить цвета. console.log ('% c Образец текста', 'цвет: зеленый;'); Или добавьте VAR в текст, используя: console.log (`Sample $ {variable}`, 'color: green;');
Gilberto B. Terra Jr.

Ответы:

75

По крайней мере, для консолей IE, Firefox и Chrome .debug () - это просто псевдоним для .log (), добавленный для улучшения совместимости.

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

Пит TNT
источник
56
В Chrome debug()появляется синий и log()черный
Simon_Weaver
39
Серьезное улучшение по сравнению с log ().
Vael Victus
34
Из developer.mozilla.org/en-US/docs/Web/API/console : console.debug () - Примечание: Начиная с Chromium 58 этот метод появляется только в браузере Chromium консолях , когда выбран уровень «Verbose».
cilf
Использование отладки в Chrome: вызов отладки
запрещен
105

Технически console.log console.debugи console.infoидентичны , однако , как они отображаются данные мало чем отличается

console.log Текст черного цвета без значка

console.info Синий цвет текста со значком

console.debug Чистый черный цвет текста

console.warn Желтый цвет текста со значком

console.error Красный цвет текста со значком

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

введите описание изображения здесь

Прабхакар Ундурти
источник
В infoжурналах уровня браузера google chrome просто отображается значок (такой же, как на снимке), но текст ( console.infoтекст в вашем сообщении) имеет черный цвет, а цвет фона строки - белый. Возможно, ваш снимок для браузера Firefox.
RBT
3
Спасибо за ответ, очень понятно со скриншотом. Должен спросить, почему именно конкатенация строк? Почему не просто console.log("Console.log");вместо console.log("Console.log" + " " + playerOne);? Что делает " " + playerOne?
hofnarwillie
На моей консоли у меня такой же дисплей сconsole.log("Console.log"); console.debug("Console.debug"); console.warn("Console.warn"); console.info("Console.info"); console.error("Console.error");
kotchwane
38

Они почти идентичны - с той лишь разницей, что сообщения отладки по умолчанию скрыты в последних версиях Chrome (вы должны установить уровень журнала Verboseна верхней панели Devtools в консоли, чтобы видеть сообщения отладки; сообщения журнала отображаются по умолчанию).

user2486570
источник
2
Привет, это кажется правдой, но я не могу найти никакой информации об этом поведении. На сегодняшний день в документации Chrome об этом не упоминается.
oligofren
3
Теперь я, наконец, понял, что «установите уровень лога на Verbose поверх консоли». Вы имеете в виду, что в Dev Tools внизу есть консоль. В верхней части этого раздела, наряду с фильтром и селектором фреймов, есть раскрывающийся список для журналов (предварительно установлен «Информация»)
oligofren
1
Это наиболее актуальный ответ. Все упоминают цвета, но ИМО это важнее.
DurkoMatko 02
15

console.info, console.debugметоды идентичны console.log.

  • console.log Распечатка заявления
  • console.info Текст черного цвета со значком «i» синего цвета
  • console.debug Текст синего цвета

Документация:

Венкат
источник
Console.info печатает синим цветом, console.warn печатает желтым цветом, а console.error печатает красным цветом
shivgre
Я тестировал в Chrome 52.0.2743.82 Console.Info печатает черным цветом с синим значком, Console.warn печатает черным цветом с желтым значком console.error печатает красным цветом с красным значком
Venkat
пожалуйста, отредактируйте свой ответ соответствующим образом, чтобы я мог проголосовать за или убрать отрицательный, вы заметили синий значок «i» перед напечатанным текстом при использовании console.info ()
shivgre
4

Если вы хотите отключить ведение журнала после завершения работы над продуктом, вы можете переопределить эту console.debug()функцию или сделать другую настраиваемую.

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

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

Foo▸ {возраст: 41, имя: "Джон Доу"}

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

Нет вывода

Однако я не придумал, как раскрасить и выходы.

Эспен М.С.
источник
хорошо работает с использованием escape-кодов ANSI для раскраски: stackoverflow.com/a/41407246/1175053
CS,
1

Из документации браузеров методы log, debugа также infoидентичны по реализации, но различаются по цвету и значку.

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

Венкат
источник
1
Это должен быть комментарий или добавление дополнительных объяснений с ответом на то, как они идентичны или не имеют различий, чтобы понять OP и другие.
Спасибо