Що таке console.log?


414

В чому користь console.log?

Поясніть, будь ласка, як його використовувати в JavaScript, на прикладі коду.

Відповіді:


454

Це не функція 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
}

17
Інструменти для розробників Google Chrome також мають вбудовану консоль.
РобертПітт

8
"Це корисно, оскільки вам не потрібно видаляти код налагодження під час розгортання у виробництві" <- Що робити, якщо кінцевий користувач відкриє Firebug?
AbdullahC

6
також корисно, щоб IE не кидав помилку, щоб консоль не була визначена
Alan Whitelaw

4
Імхо, краще, ніж щоразу перевіряти, чи доступний console.log, краще мати щось подібне: якщо (typeof (console) == 'undefined') {console = {'log': function () {return}}} В У такому випадку ви можете писати console.log кожен раз, коли вам потрібно, не перевіряючи його наявність!
Енріко Карлессо

12
if (console.log)(або навіть if (console && console.log)) все одно видасть помилку, якщо консоль недоступна. Ви повинні використовувати window.console(як windowгарантовано, що існує) і перевіряти лише один рівень глибини за один раз.
Тгр

226

Місця, де можна переглянути консоль! Просто, щоб вони всі мали одну відповідь.

Firefox

http://getfirebug.com/

(тепер ви також можете використовувати вбудовані Firefox в інструменти для розробників Ctrl + Shift + J (Інструменти> Веб-розробник> Консоль помилок), але Firebug набагато краще; використовуйте Firebug)

Сафарі та 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

Опера

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: прослуховуйте, і він дасть вам тег сценарію, який слід розмістити у вашому 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.


26
Виправте мене, якщо не так, але я думаю, що для перегляду консолі Firebug у Firefox не потрібно, просто натисніть Ctrl + Shift + J (Інструменти> Веб-розробник> Консоль помилок)
Dane411

4
@ Dane411 це правда, але краще використовувати та firebug.
Fresheyeball

3
@Fresheyeball Хтось повинен очистити всі мотлохи, але я думаю, що в якийсь момент стає менш цікавим збирати ті повтори і фактично підтримувати громаду в чистоті.
andlrc

2
Хто не спричинив цю відповідь, будь ласка, прокоментуйте. downvotes без коментарів марні
Fresheyeball

був window.dump перед window.console.log. Це краще, ніж функція порожнього журналу
OCTAGRAM

100

Ви можете переглядати будь-які повідомлення, зафіксовані на консолі, якщо ви використовуєте такий інструмент, як Firebug, щоб перевірити свій код. Скажімо, ви робите це:

console.log('Testing console');

Коли ви отримаєте доступ до консолі в Firebug (або будь-який інструмент, який ви вирішите використовувати для перевірки свого коду), ви побачите, яке повідомлення ви повідомили функції для реєстрації. Це особливо корисно, коли ви хочете перевірити, чи виконується функція, або чи змінна передається / призначається належним чином. Це насправді досить цінно для з'ясування того, що помилилося з вашим кодом.


10
Не забудьте визначити його перших помилок слід уникати в IE: stackoverflow.com/a/7585409/318765
mgutt

83

Він опублікує повідомлення журналу на консолі JavaScript браузера, наприклад Firebug або Інструменти для розробників (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);і він буде відображатися в вас Profiles вкладки в Chrome (не знаю , з FF).

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

Сподіваюся, це допомагає!


1
Чому console.log("x:", x)краще console.log("x:" + x)? Чи менш схильний до помилок, оскільки A ,легше читати, ніж +?
Кевін Мередіт

На мою думку, читати трохи простіше, коли ви випускаєте багато різних речей. У цьому випадку, ймовірно, слід використовувати +суворо, але я хотів показати, що ви також можете використовувати коми в функціях консолі. Крім того, це дозволяє уникнути проблем, якщо обидві змінні є цілими чи масивами.
Фред

5
console.log("x:", x)значно краще, тому що, коли xоб'єкт або масив (або що-небудь, крім рядка), він відображається правильно, без перетворення в рядок.
Йозеф Куфнер

34

Немає нічого спільного з jQuery, і якщо ви хочете ним користуватися, я радимо вам це зробити

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

Таким чином, ви не порушите свій код, коли він недоступний.

Як запропоновано в коментарі, ви також можете виконати це в одному місці, а потім використовувати console.logяк звичайне

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

18
Можна рекомендувати замість цього робити if(!window.console){ window.console = function(){}; }в одному місці, а потім використовувати console.log як звичайне.
Fresheyeball

23

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


19

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.


16

console.log не має нічого спільного з jQuery.

Він записує повідомлення до консолі налагодження, наприклад Firebug.


16

Точка плутанини іноді полягає в тому, що для того, щоб записати текстове повідомлення разом із вмістом одного з ваших об'єктів за допомогою 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 насправді бере стільки аргументів, скільки вам подобається.


13

Використовуйте console.log для додавання інформації про налагодження на вашу сторінку.

Багато людей використовують alert(hasNinjas)для цієї мети, алеconsole.log(hasNinjas) легше працювати. Використовуючи сповіщення спливаючих вікон, відкрийте модальне діалогове вікно, яке блокує інтерфейс користувача.

Редагувати: Я погоджуюсь з Baptiste Pernet та Яном Ханчичем, що це дуже гарна ідея перевірити, чи window.consoleвизначено спочатку, щоб ваш код не зламався, якщо консолі немає.


12

Приклад - припустимо, ви хочете знати, у якому рядку коду ви змогли запустити свою програму (до її виходу з ладу!), Просто введіть

console.log("You made it to line 26. But then something went very, very wrong.")

11

Ви використовуєте його для налагодження коду JavaScript за допомогою Firebug для Firefox або консолі JavaScript у браузерах WebKit .

var variable;

console.log(variable);

Він буде відображати вміст змінної, навіть якщо це масив або об'єкт.

Він схожий print_r($var);на PHP .


3
Зручний наконечник ... Я завжди включають в себе наступне в глобально доступному файлі JavaScript: if (!window.console) { window.console = { log : function() {} }; }. Це дозволяє уникнути, забувши видалити випадковий випадок налагодження.
roufamatic

@roufamatic Я не знаю ... додавання коду для обробки коду, який не належить, здається досить жахливим рішенням ... особливо коли знайти / замінити так просто ...
jondavidjohn

10

Остерігайтеся: залишення дзвінків на консолі у виробничому коді призведе до порушення вашого веб-сайту в Internet Explorer. Ніколи не тримайте його розкрученим. Дивіться: https://web.archive.org/web/20150908041020/blog.patspam.com/2009/the-curse-of-consolelog


2
Це не те, що журнал консолі буде зламаний, якщо ви використовуєте машину Windows, але він порушить ваш сайт, якщо ви використовуєте Internet Explorer.
Кріс Голленбек

Я думаю, що блогу, на який посилається у відповіді, більше не існує.
Цундоку

Оригінальна посилання мертва. Я знайшов копію веб-архіву.
Олексій

8

У перші дні налагодження JS здійснювалося через alert()функцію - тепер це застаріла практика.

Це console.log()функція, яка записує повідомлення для входу в консоль налагодження, наприклад Webkit або Firebug. У браузері ви нічого не побачите на екрані. Він записує повідомлення до консолі налагодження. Він доступний лише у Firefox з Firebug та в браузерах на базі Webkit (Chrome і Safari). Це не добре працює у всіх версіях IE .

Об'єкт консолі - це розширення до DOM.

Це console.log()слід використовувати в коді лише під час розробки та налагодження.

Вважається поганою практикою, що хтось залишає console.log()у файлі javascript на виробничому сервері.


5

Якщо ваш браузер підтримує налагодження, ви можете використовувати метод console.log () для відображення значень JavaScript.

Активуйте налагодження у вашому браузері за допомогою F12та виберіть "Консоль" у меню налагодження.

Консоль у JavaScript. Спробуйте виправити або «налагодити» непрацюючу програму JavaScript та практикуйте за допомогою команди console.log (). Є ярлики, які допоможуть вам отримати доступ до консолі JavaScript на основі браузера, який ви використовуєте:

Ярлики клавіатури консолі Chrome

Windows: Ctrl+ Shift+ J
Mac: Cmd+ Option+J

Ярлики клавіатури консолі Firefox

Windows: Ctrl+ Shift+ K
Mac: Cmd+ Option+K

Ярлики клавіатури консолі Internet Explorer

F12 ключ

Комбінації клавіш консолі Safari

Cmd+ Option+C


4

console.logконкретно, це метод для розробників, щоб написати код, щоб непомітно повідомити розробників, що робить код. З його допомогою можна попередити, що виникла проблема, але не слід замінювати інтерактивний налагоджувач, коли настане час для налагодження коду. Його асинхронна природа означає, що зареєстровані значення не обов'язково представляють значення, коли метод викликався.

Коротше кажучи: помилки журналу за допомогою console.log(якщо вони доступні), а потім виправляйте помилки, використовуючи ваш налагоджувач на вибір: Firebug , WebKit Developer Tools (вбудований до Safari та Chrome ), IE Developer Tools або Visual Studio.


4

Мені дуже зручно веб-програмування, коли я починаю console.logналагоджувати.

var i;

Якщо я хочу перевірити значення iчасу виконання.

console.log(i);

ви можете перевірити поточне значення iна вкладці консолі firebug. Він спеціально використовується для налагодження.


4

Він використовується для реєстрації (все, що ви передаєте) на консоль Firebug . Основне використання - налагодження вашого коду JavaScript.


4

Крім згаданих вище звичаїв, console.logможна також друкувати на терміналі в node.js. Сервер, створений з експресом (наприклад,), може використовувати console.logдля запису у вихідний файл реєстратора.


2

У сценаріях Java немає функцій вводу та виводу. Тож для налагодження використовується метод console.log () коду. Це метод для ведення журналу. Він буде надрукований під консольним журналом (інструменти розробки).

Його немає в IE8 і нижче, поки ви не відкриєте інструмент розробки IE.


2

Це нічого не стосується jQuery. Це console.log()посилання на функцію журналу об'єкта консолі, яка забезпечує способи реєстрації інформації на консолі браузера. Ці методи призначені лише для налагодження, і на них не слід покладатися, щоб представити інформацію кінцевим користувачам.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.