Консоль JavaScript в вашем браузере

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

Как открыть JavaScript консоль в браузере?

Если вы пользуетесь одним из популярных браузеров (Chrome, FireFox, Safari, Opera), то в них уже встроена консоль JavaScript, в которую можно выводить отладочную информацию во время разработки. Для этого откройте страницу сайта, на которой находится JS код для тотладки, и кликните на клавишу F12 на клавиатуре. Откроется панель разработчика. Теперь необходимо переключить вкладку вверху открывшегося окна на "Консоль". Кликните на эту вкладку с помощью курсора мыши: Разберёмся с иконоками и опциями, которые есть в этой закладке:

• Иконка корзины - очищает лог (лог - это список событий, строчки текстовых записи)
• Непрерывные логи - если поставить эту галочку, то при перезагрузки страницы лог не будет очищаться автоматически.
• "Ошибки", "Предупреждения", "Лог" ... - эти закладки отключают вывод сообщений. К примеру, кликните по пункту "Ошибки" и снимите выделение, тогда в консоль не будут записываться предупреждение об ошибках.

Как вывести переменную JavaScript в консоль?

Попробуем написать на странице JavaScript код и перезагрузить её, чтобы он выполнился. В коде используем функцию console.log( ), которая выводит значение содержимого в скобках. То есть если поставить в скобки переменную, то в консоли будет показано её значение:

var a = {'Мышь': 'Большая', 'Кот': 'Маленький', 'Сыр': 100};
console.log(a);

Заглянем в консоль и увидим значение объекта: Чтобы увидеть подробную информацию, кликните на иконку стрелочки слева на интересующей строчке: Таким способом можно выводить не только массивы и объекты, но и простые переменные. К сожалению, если выводить сразу несколько значений, то не будет понятно что к чему относится. Продемонстрируем это:

var a = 'Мышь';
var b = 'Сыр';
var c = 100;

console.log(a);
console.log(b);
console.log(c);

Результат выполнения этого кода будет таким: Такой вывод не слишком информативен. К счастью, внутри скобок функции console.log( ) можно использовать объединение строк. Поэтому предлагаем записать дополнительную отладочную информацию в выводимые строки:

var a = 'Мышь';
var b = 'Сыр';
var c = 100;

console.log('Значение переменной "a" = ' + a);
console.log('Значение переменной "b" = ' + b);
console.log('Значение переменной "c" = ' + c);

Теперь вывод в консоль будет более информативным. И можно использовать функцию console.log( ) десятки раз, не боясь запутаться в значениях, которые попадают в консоль: К сожалению, это можно делать только с простыми переменными (строки/числа) и массивами (в том числе многомерными), но с объектами так сделать не получится, потому что будет выведено "[object Object]" вместо значения: