Как использовать консоль Google Chrome на 100%

Большинство веб-разработчиков при отладке приложений используют Google Chrome — это уже ни для кого не секрет. Прежде всего в этом браузере привлекают продвинутые средства для разработчиков. Одним из элементов devtool является консоль, которая в свою очередь гораздо более продвинутая, чем думают о ней большинство разработчиков.

Консоль Google Chrome умеет гораздо больше, чем console.log(). Я опишу некоторые возможности, которые сам применяю чаще всего.

Производные console.log()

Вызов console.log() позволяет отобразить в консоли сообщение.

var e = { x: 5 };
console.log('Log message', e);

Вызовы info(), warn() и error() позволяют сделать то же самое, визуально выделив сообщение соответствующим стилем. Бывает очень полезно, когда в процессе отладки накапливается большое количество сообщений и трудно выделить какие-то ключевые сообщения.

var e = { x: 5 };
console.log('Hello! I`m a message', e);
console.info('Something happened...', e);
console.warn('Wow! You defenitely should pay attention here!', e);
console.error('Ooooooops....', e);
Результат работы console.info(), console.warn() и console.error().
Результат работы console.info(), console.warn() и console.error().

Вторым параметром я передал переменную e, содержимое которой также отобразилось в консоли. Chrome позволяет передавать сколько угодно параметров, если вам требуется отобразить не только сообщение, но и состояние каких-либо переменных.

Таблицы

По умолчанию консоль отображает содержимое объекта в виде дерева. Это очень удобно, т.к. вы можете скрывать/раскрывать нужные части объекта и отслеживать в них информацию. Неудобства возникают когда вам нужно отобразить, например, содержимое массива. В этом случае вы получите нечто подобное:

Результат работы console.log() для массива элементов.
Результат работы console.log() для массива элементов.

Вместо console.log() в этом случае удобнее использовать console.table(), вот как это выглядит:

var elements = [
  { id: 1, x: 'Lorem', y: 'ipsum'},
  { id: 2, x: 'dolor', y: 'sit'},
  { id: 3, x: 'amet', y: 'consectetur'},
  { id: 4, x: 'adipiscing', y: 'elit'},
  { id: 5, x: 'sed', y: 'do'}
];

console.table(elements);
Результат работы console.table().
Результат работы console.table().

Как видно из скриншота, вызов console.table() отображает массив не только в виде таблицы, но и в виде дерева, как при вызове console.log().

Группировка

Когда сообщения в консоли идут потоком друг за другом бывает полезно объединять их в группы. Делается это путем вызова методов console.group() и console.groupEnd().

console.group('Message processing');
console.log('Message processing started...')
console.warn('Error during processing list element.');
console.log('Done');
console.groupEnd();

console.group('Image processing');
console.log('Image processing started...')
console.info('Image size: 500Kb');
console.log('Done');
console.groupEnd();

Если вместо console.group() вызвать console.groupCollapsed(), то сообщения в консоли будут свернуты при отображении.

console.group('Message processing');
console.log('Message processing started...')
console.warn('Error during processing list element.');
console.log('Done');
console.groupEnd();

console.groupCollapsed('Some other stuff');
console.log('Blah');
console.info('Blah');
console.warn('Blah');
console.groupEnd();

console.group('Image processing');
console.log('Image processing started...')
console.info('Image size: 500Kb');
console.log('Done');
console.groupEnd();
Результат работы console.group().
Результат работы console.group().

Проверка утверждений

Ассерты — это распространенный метод проверки утверждения в разных языках программирования. Консоль Google Chrome также предоставляет такую возможность. Чтобы выполнить проверку, нужно вызвать console.assert() с двумя параметрами: первый — проверяемое условие, второй — сообщение об ошибке. Если проверяемое условие ложно, то в консоли появится сообщение об ошибке, иначе ничего не произойдет.

console.assert(1000 > 10, 'It`s true, so nothing will happen at console.');
console.assert(25 < 10, '25 is not less than 10!');
Результат работы console.assert().
Результат работы console.assert().

Подсчет количества вызовов

Когда одно и то же сообщение появляется в консоли несколько раз, бывает удобно вести подсчет сколько раз это произошло. С этим отлично справляется console.count().

console.count('Something happened');
console.count('Something happened');
console.count('Something happened');
console.count('Something happened');
console.count('Something happened');
console.count('Something happened');
console.count('Something happened');
console.count('Something happened');
Результат работы console.count().
Результат работы console.count().

Отображение стека вызовов

Когда при отладке приложения нужно посмотреть стек вызовов, часто используют точки останова и отладчик. Лично мне это неудобно, я предпочитаю отобразить стек в консоли. Я знаю, что для этого некоторые используют хак вроде такого:

console.log(new Error().stack);

Но на самом деле в Chrome для этого есть специальный метод console.trace().

function f1() {
  console.trace('f1');
}

function f2() {
  f1();
}

function f3() {
  f2();
}

f3();

В этом случае в консоли отобразится доступный стек вызовов. И никаких хаков :-)

Результат работы console.trace().
Результат работы console.trace().

Форматирование

Chrome позволяет использовать подстановки в выражениях аналогично тому, как это делается в string.Format() в C# или println() в C.

console.log('Current value: %d', 500);

В этом примере %d означает, что здесь подставляется число. Список доступных значений:

  • %s — строка
  • %i, %d — целое число
  • %f — дробное число
  • %o — DOM-элемент
  • %O — JavaScript-объекта

Отдельного внимания заслуживает %c — если указать его при вызове console.log(), то в параметрах можно передать набор CSS-стилей, которые будут использоваться при отображении.

Возможности форматирования сообщения.
Возможности форматирования сообщения.

Бонус — $0

Если во вкладке Elements выделить какой-либо элемент в DOM, то к нему можно обратиться через $0 в консоли. Это очень удобный способ, когда нужно быстро выполнить какие-нибудь манипуляции с DOM-элементом.

Пример работы с $0.
Пример работы с $0.