Chrome Developer Tools — на мой взгляд, самый удобный инструмент веб-разработки. Он содержит в себе весь необходимый функционал для создания и отладки полноценных веб-приложений. Но с ним, как и с любым другим инструментом, нужно научиться работать. Начнем с основ.

Консоль играет роль интерактивного JavaScript-интерпретатора. В ней также отображаются ошибки, возникающие в процессе работы веб-приложения. Помимо отдельной вкладки, консоль доступна на всех других вкладках по нажатию на Esc либо на иконку консоли в левом нижнем углу экрана.

Консоль дает разработчику доступ к ряду удобных и полезных функций. Рассмотрим основные из них:

console.log(), console.error(), console.warn() и console.debug()

Базовые функции вывода в консоль, позволяют выводить в консоль произвольные сообщения. Отличаются классификацией выводимых сообщений: error() помечает сообщения как ошибки, warn() помечает сообщения как предупреждения, debug() помечает сообщения как отладочные.

Эти функции принимают неограниченное количество параметров, что позволяет выводить несколько переменных подряд и даже склеивать их в целые предложения:

console.log('Время регистрации:', 1121102802);

Также есть поддержка форматирования:

console.log('Время регистрации: %d', 1121102802);

Поддерживаемые указатели формата:

Указатель Описание Альтернатива
%s выводит значение как строку  
%d, %i выводит значение как целое число  
%f выводит значение как число с плавающей запятой  
%o выводит значение как элемент DOM console.dirxml()
%O выводит значение как объект JavaScript console.dir()
%c применяет к значению заданные CSS стили  
// %s — строка
console.log('%s', 'Привет');

// %d, %i — целое число
console.log('%d', 1337 / 42);

// %f — число с плавающей запятой
console.log('%f', 1337 / 42);

// %o — элемент DOM
console.log('%o', document.body);
// либо
console.dirxml(document.body);

// %O — элемент JavaScript
console.log('%O', document.body);
// либо
console.dir(document.body);

// %c — вывод с заданием CSS стилей
console.log('%cпривет %cмир', 'color: red', 'color: blue');

console.trace()

Выводит стек вызовов из точки в коде, где был вызван метод. Стек вызовов включает имена файлов и номера строк плюс счетчик вызовов метода trace() из одной и той-же точки.

console.assert()

Функция assert проверяет выражение, переданное первым параметром, и если выражение ложно, записывает в консоль ошибку вместе со стеком вызовов:

var two = 3;
var three = 2;
console.assert(two < three, 'два меньше трех');

console.group(), console.groupCollapsed() и console.groupEnd()

Функции для группировки вывода. Функция group() открывает группу сообщений, в качестве параметра принимает название группы (поддерживается форматирование, как в console.log()), а функция groupEnd() закрывает последнюю открытую группу. Функция groupCollapsed() аналогична функции group(), но создаваемая группа сообщений свернута по умолчанию.

console.time() и console.timeEnd()

Функции для вычисления времени исполнения кода. Функция time() запускает таймер, а функция timeEnd() останавливает таймер и выводит его значение. Обе функции принимают название таймера в качестве обязательного параметра.

Фильтр сообщений

В правом нижнем углу на вкладке консоли расположен фильтр сообщений по типу. All соответствует всем сообщениям, Errors — ошибкам и выводу функции console.error(), Warnings — предупреждениям и выводу функции console.warn(), Logs — выводу функции console.log(), Debug — выводу функций console.debug(), console.timeEnd() и прочей информации.

Взаимодействие с другими вкладками

debugger;

Когда браузер достигает строчки debugger; в любом коде, он автоматически останавливает выполнение скрипта в этой точке и переходит на вкладку Скриптов (Sources).

$(), $$() и $x()

Функции, упрощающие выборку элементов, работают только в консоли. Функция $() возвращает первый элемент, соответствующий переданному селектору. Вторым параметром можно передать контекст поиска:

$('head') // возвращает элемент head
$('head', document.body) // возвращает null, потому что body не содержит элементов head

Функция $$() аналогична $(), но возвращает все найденные элементы:

$$('script') // возвращает все элементы script
$$('script', document.body) // возвращает все элементы script, содержащиеся в body

Функция $x() возвращает все элементы, соответствующие выражению XPath. Вторым параметром можно передать контекст:

$x('//script') // возвращает все элементы script
$x('script', document.body); // возвращает все элементы script, содержащиеся непосредственно в body

Многие JavaScript фреймворки определяют свою функцию $(), в связи с чем значение функций в консоли также меняется.

$0$4

Консоль хранит в памяти ссылки на последние пять элементов, выделенных во вкладке Элементов (Elements). Для доступа к ним используются переменные $0, $1, $2, $3 и $4. $0 хранит ссылку на текущий выделенный элемент, $1 — на предыдущий и так далее.

$_

Переменная $_ хранит результат отработки последней команды в консоли. Это позволяет использовать результат выполнения одной команды в другой команде. Попробуйте выполнить эти команды по очереди:

1337 / 42;
console.log('%d', $_);

inspect()

Функция inspect() открывает переданный объект или элемент на соответствующей ему вкладке:

inspect($('head script')) // откроет вкладку Elements и выделит первый тег script найденный внутри head

 

На сегодня все, в следующий раз я расскажу о точках остановки в Chrome Developer Tools.