Властелин консоли: познай тайны дебаггинга

Умеешь только в простейшие консольные заклинания типа console.log? Мы сделаем тебя великим мастером консоли!

Давайте начистоту – как вы дебажите код? Ну не отрицайте, конечно же, логируете сообщения в консоль браузера – все мы так делаем. Console.log отлично работает, он быстрый, удобный – но не оптимальный. Раз уж мы идем по легкому пути, давайте делать это с шиком!

Еще больше информации об отладке в JavaScript вы найдете здесь:

1. Использование выражения debugger
2. Подробный гайд по отладке кода на JavaScript в Chrome Devtools  
   

Объект console в JavaScript открывает нам практически безграничный доступ в браузерную консоль. А вы знаете, сколько у него методов? Около 20! Все они нам, конечно, не нужны, но очень полезно знать парочку самых удобных.

Для самых маленьких

Кажется, консоль – это первое, с чем знакомится начинающий JavaScript-разработчик, поэтому нет нужды разъяснять, как до нее добраться. Но на всякий случай вот вам коротенькое руководство.

1. Использовать объект console в браузере можно только из JavaScript кода на стороне клиента (не сервера). 
2. Для вывода самого простого сообщения используйте метод console.log("Message").
3. Чтобы прочитать это сообщение, откройте в браузере панель разработчика (F12 в Google Chrome) и перейдите на вкладку Console.

Считаем количества вызовов с console.count

Создадим простенькую функцию для переклички сотрудников. Она будет просто получать имя и выводить его в консоль.

function iAmHere(name) {
  console.log(name);
}

iAmHere('Зоя Пална');
iAmHere('Сергей Петрович');
iAmHere('Иван Иванович');

Запустим этот код и получим в консоли список имен присутствующих:

Теперь давайте посчитаем, сколько человек сегодня на рабочих местах:

function iAmHere(name) {
  console.count();
  console.log(name);
}

iAmHere('Зоя Пална');
iAmHere('Сергей Петрович');
iAmHere('Иван Иванович');

Метод console.count() выводит число, соответствующее количеству его вызовов. Ему можно передать метку для подсчета или ничего не передавать, тогда он будет считать вызовы для метки по умолчанию (default);

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

function iAmHere(name) {
  console.count(name);
}

iAmHere('Зоя Пална');
iAmHere('Сергей Петрович');
iAmHere('Иван Иванович');
iAmHere('Зоя Пална');

Зоя Пална, мы уже знаем, что вы пришли на работу, не нужно повторять дважды.

Резюме

Используйте console.count, чтобы не вводить лишние переменные для счетчиков вызовов.

Привлекаем внимание с console.warn

Разработчики могут быть очень невнимательными. Там параметр пропустят, тут опечатаются. Если ошибка некритичная, код продолжает нормально работать, но после одного неосторожного движения все может рухнуть. Чтобы сразу предупреждать о подобных промахах, используйте метод warn объекта console.

Warn – этот тот же log, только оранжевый и с иконкой. Если простой лог вы можете не заметить в хаосе консоли, то warn сразу бросится в глаза.

function iAmHere(name) {
  if (!name) {
    console.warn("Вы не указали свое имя, будьте внимательны, иначе получите прогул");
  } else {
    console.count(name);
  }
}

iAmHere();

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

Резюме

Используйте console.warn для разнообразных инструментов и API, чтобы предупреждать разработчиков о возможных ошибках.

Структурируем данные с console.table

JavaScript разработчики очень часто имеют дело с массивами и объектами. 

let employees = ['Зоя Пална', 'Сергей Петрович', 'Иван Иванович'];
let chiefs = {
  'бухгалтерия': 'Ефим Олегович',
  'юристы': 'Ольга Семеновна',
  'отдел закупок': 'Анатолий Борисович'
}

console.log(employees);
console.log(chiefs);

Если выводить их в консоль "как есть", читать будет не очень удобно:

На помощь спешит метод console.table. Он умеет переводить сложные структуры данных в таблицы для более легкого восприятия:

console.table(employees); 
console.table(chiefs);

На выходе имеем таблицу с двумя колонками – index и value. В индекс помещается ключ элемента (для объектов) или его порядковый номер (для массивов).

Особенно это удобно при работе с большими коллекциями данных.

Главная фишка метода – наглядный вывод объектов с одинаковой структурой. Предположим, у нас есть отдельные объекты для различных подразделений компании. Чтобы красиво отобразить их в консоли, соберем все в один массив:

let accountsDepartment = {
  chief: 'Ефим Олегович',
  employeesNumber: 22
};

let legalDepartment = {
  chief: 'Ольга Семеновна',
  employeesNumber: 11
};

console.table([accountsDepartment, legalDepartment]);

И наконец, киллер-фича – столбцы можно сортировать!

Резюме

Используйте console.table, если необходимо вывести в консоль сложные структуры данных: объекты или массивы. 

Группируем сообщения с console.group

Зачем группировать консольные сообщения? Чтобы их легче было читать, конечно же.

Например, у вас десяток сообщений, касающихся одного метода. Объедините их в одну группу с понятным заголовком, которую легко свернуть.

Или появляется необходимость вывести в консоль много информации, например, длинное описание ошибки или какие-то дополнительные данные. Чтобы не загромождать небольшое пространство простынями текста, поместите его в группу.

Метод console.group() открывает группу сообщений. Вы можете передать ему какой-нибудь заголовок. Обычно он выделяется жирным текстом. Все, что идет дальше, будет выведено с отступом.

Чтобы закрыть группу и убрать отступ, используйте console.groupEnd().

Группы можно вкладывать в другие группы – вот так:

console.group('Общий заголовок');
console.log('Первое сообщение');

console.group('Группа второго уровня');
console.log('Второе сообщение');
console.groupEnd();

console.log('Третье сообщение');
console.groupEnd();

В консоли будет вот такая конструкция:

Группы, создаваемые методом console.group() по умолчанию развернуты. Если вы хотите, чтобы они были свернуты, используйте аналогичный метод console.groupCollapsed().

Резюме

Используйте console.group(), чтобы объединять несколько сообщений в одну логическую группу.

Обретение силы

Чтобы стать настоящим мастером, нужно использовать все доступные инструменты для работы с языком. Разумеется только тогда, когда они вам действительно нужны :)

Теперь вы – властелин консоли. Чтобы проверить новую силу, пройдите наш небольшой тест.