Что такое console.log?

Question

Какая польза от console.log?

Пожалуйста, объясните, как использовать его в JavaScript, с примером кода.

Answer 1

Это не функция jQuery, а функция для отладки.Например, вы можете записать что-то на консоль, когда что-то произойдет.Например:

$('#someButton').click(function() {
  console.log('#someButton was clicked');
  // do something
});

Вы увидите #someButton was clicked на вкладке «Консоль» Firebug (или консоли другого инструмента, например, веб-инспектора Chrome), когда вы нажмете кнопку.

По некоторым причинам консольный объект может быть недоступен.Затем вы можете проверить, если это так - это полезно, так как вам не нужно удалять код отладки при развертывании в производство:

if (window.console && window.console.log) {
  // console is available
}

Answer 2

Места, которые вы можете просматривать на консоли! Просто чтобы они все были в одном ответе.

Firefox

http://getfirebug.com/

(теперь вы также можете использовать встроенные в Firefox инструменты разработчика Ctrl + Shift + J (Инструменты> Веб-разработчик> Консоль ошибок), но Firebug намного лучше; используйте Firebug)

Safari and Chrome

В основном то же самое.

https://developers.google.com/chrome-developer-tools/docs/overview

https://developer.apple.com/technologies/safari/developer-tools.html

Internet Explorer

Не забудьте, что вы можете использовать режимы совместимости для отладки IE7 и IE8 в IE9 или IE10

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

http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx

Если вам необходим доступ к консоли в IE6 для IE7, используйте букмарклет Firebug Lite

http://getfirebug.com/firebuglite/ ищите стабильный букмарклет

http://en.wikipedia.org/wiki/Bookmarklet

Opera

http://www.opera.com/dragonfly/

IOS

Работает для всех iPhone, iPod touch и iPad.

http://developer.apple.com/library/ios/ipad/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html

Теперь с iOS 6 вы можете просматривать консоль через Safari в OS X, если подключите свое устройство. Или вы можете сделать это с помощью эмулятора, просто откройте окно браузера Safari и перейдите на вкладку «Разработка». Там вы найдете параметры, позволяющие инспектору Safari взаимодействовать с вашим устройством.

Windows Phone, Android

Оба они не имеют встроенной консоли и не имеют возможности закладки. Итак, мы используем http://jsconsole.com/ type: listen, и он даст вам скрипт-тег для размещения в вашем HTML. С этого момента вы можете просматривать свою консоль на веб-сайте jsconsole.

iOS и Android

Вы также можете использовать http://html.adobe.com/edge/inspect/ для доступа к инструментам веб-инспектора и консоли на любом устройстве, используя их удобный плагин для браузера.

---

Старые проблемы с браузером

Наконец, более старые версии IE будут аварийно завершать работу, если вы используете в своем коде console.log и не открываете инструменты разработчика одновременно. К счастью, это легко исправить. Используйте приведенный ниже фрагмент кода вверху кода:

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

Это проверяет, присутствует ли консоль, и если нет, устанавливает ее для объекта с пустой функцией с именем log. Таким образом, window.console и window.console.log никогда не будут действительно undefined.

Answer 3

Вы можете просматривать любые сообщения, зарегистрированные на консоли, если вы используете инструмент, такой как Firebug, для проверки вашего кода.Допустим, вы делаете это:

console.log('Testing console');

Когда вы заходите на консоль в Firebug (или какой-либо другой инструмент, который вы решите использовать для проверки вашего кода), вы увидите любое сообщение, которое вы сказали функции для регистрации.Это особенно полезно, когда вы хотите увидеть, выполняется ли функция или передается / назначается ли переменная правильно.На самом деле это довольно ценно для выяснения того, что пошло не так с вашим кодом.

Answer 4

Он отправит сообщение журнала на консоль javascript браузера, например, Firebug или Developer Tools (Chrome / Safari), и покажет строку и файл, из которого он был выполнен.

Более того, когда вы выводитеjQuery Object будет включать ссылку на этот элемент в DOM, и щелкнув по нему, вы перейдете к этому на вкладке Elements / HTML.

Вы можете использовать различные методы, но будьте осторожны, чтобы он работал в Firefox,у вас должен быть открыт Firebug, иначе вся страница потерпит крах.Является ли то, что вы регистрируете, переменной, массивом, объектом или элементом DOM, это даст вам полную разбивку, включая и прототип для объекта (всегда интересно разобраться).Вы также можете включить столько аргументов, сколько хотите, и они будут заменены пробелами.

console.log(  myvar, "Logged!");
console.info( myvar, "Logged!");
console.warn( myvar, "Logged!");
console.debug(myvar, "Logged!");
console.error(myvar, "Logged!");

Они отображаются с разными логотипами для каждой команды.

Вы также можете использовать console.profile(profileName);, чтобы начать профилирование функции, сценария и т. Д. А затем завершите его с помощью console.profileEnd(profileName);, и он появится на вкладке «Профили» в Chrome (не знаю с FF).

Для полной справки перейдите к http://getfirebug.com/logging , и я предлагаю вам прочитать его. (Следы, группы, профилирование, проверка объектов).

Надеюсь, это поможет!

Answer 5

Нет никакого отношения к jQuery, и если вы хотите его использовать, я советую вам сделать

if (window.console) {
    console.log("your message")
}

Так что вы не нарушаете свой код, когда он недоступен.

Как предлагается в комментарии, вы также можете выполнить это в одном месте и затем использовать console.log как обычно

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

Answer 6

console.log не имеет ничего общего с jQuery. Это общий объект / метод, предоставляемый отладчиками (включая отладчик Chrome и Firebug), который позволяет сценарию регистрировать данные (или объекты в большинстве случаев) в консоли JavaScript.

Answer 7

console.log записывает отладочную информацию на консоль в некоторых браузерах (Firefox с установленным Firebug, Chrome, IE8, все с установленным Firebug Lite). В Firefox это очень мощный инструмент, позволяющий вам проверять объекты или проверять макет или другие свойства элементов HTML. Он не связан с jQuery, но есть две вещи, которые обычно делают при использовании его с jQuery:

• установите расширение FireQuery для Firebug. Это, помимо других преимуществ, делает регистрацию объектов jQuery более приятной.

• создайте оболочку, которая будет в большей степени соответствовать соглашениям о кодировании цепочек jQuery.

Обычно это означает что-то вроде этого:

$.fn.log = function() {
    if (window.console && console.log) {
        console.log(this);
    }
    return this;
}

который вы можете затем вызвать как

$('foo.bar').find(':baz').log().hide();

для простой проверки внутри цепочек jQuery.

Answer 8

console.log не имеет ничего общего с jQuery.

Он записывает сообщение на консоль отладки, например Firebug.

Answer 9

Иногда путаница заключается в том, что для регистрации текстового сообщения вместе с содержимым одного из ваших объектов с помощью console.log вы должны передать каждый из двух в качестве отдельного аргумента. Это означает, что вы должны разделить их запятыми, потому что если бы вы использовали оператор + для объединения выходных данных, это неявно вызвало бы метод .toString() вашего объекта. В большинстве случаев это явно не переопределяется, и реализация по умолчанию, унаследованная Object, не предоставляет никакой полезной информации.

Пример попытки в консоли:

>>> var myObj = {foo: 'bar'}
undefined
>>> console.log('myObj is: ', myObj);
myObj is: Object { foo= "bar"}

тогда как, если вы попытаетесь объединить информативное текстовое сообщение с содержимым объекта, вы получите:

>>> console.log('myObj is: ' + myObj);
myObj is: [object Object]

Имейте в виду, что console.log на самом деле принимает столько аргументов, сколько вам нужно.

Answer 10

Используйте console.log, чтобы добавить отладочную информацию на свою страницу.

Многие люди используют alert(hasNinjas) для этой цели, но с console.log(hasNinjas) легче работать. При использовании предупреждения появляется модальное диалоговое окно, которое блокирует пользовательский интерфейс.

Редактировать: Я согласен с Baptiste Pernet и Ян Ханчич , что очень хорошая идея проверить, определен ли сначала window.console, чтобы ваш код не ломался нет доступной консоли.