Frontender Magazine

Использование консоли Google Chrome

Консоль предоставляет две функции для разработчиков для тестирования веб-страниц и приложений:

В статье мы рассмотрим наиболее распространённые способы использования Console API и Command Line API. Более подробно о них вы сможете узнать в документации.

Базовые операции

Открытие консоли

Консоль в Chrome DevTools доступна в двух вариантах: вкладка Console и в виде разделённой версии, доступной из любой другой вкладки.

Для того, чтобы открыть вкладку Console вы можете:

Скриншот

Для того, чтобы вызвать или скрыть разделённую версию консоли в других вкладках, нажмите клавишу Esc или кликните на иконку Show/Hide Console в нижнем левом углу DevTools. Скриншот показывает разделённый вариант консоли во вкладке Elements.

Скриншот

Очистка консоли

Для очистки консоли:

По умолчанию, история консоли очищается при переходе на другую страницу. Вы можете отменить очистку включив Preserve log upon navigation в разделе консоли в настройках DevTools (см. настройки Консоли).

Настройки консоли

Консоль имеет две главные опции, которые вы можете настраивать в главной вкладке настроек DevTools:

Вы можете поменять эти настройки в контекстном меню консоли, кликнув правой кнопкой мыши.

Скриншот

Использование API консоли

Console API — набор методов, доступных из объекта console, объявленного из DevTools. Одно из главных назначений API — логировать информацию (значение свойства, целый объект или DOM-элемент) в консоль во время работы вашего приложения. Вы также можете группировать вывод, чтобы избавиться от визуального мусора.

Вывод в консоль

Метод console.log() принимает один и более параметров и выводит их текущие значения на консоль. Например:

var a = document.createElement('p');
a.appendChild(document.createTextNode('foo'));
a.appendChild(document.createTextNode('bar'));
console.log("Количество дочерних элементов: " + a.childNodes.length);

Скриншот

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

console.log("Количество дочерних элементов: ", a.childNodes.length,  "; текущее время: ", Date.now() );

Скриншот

Ошибки и предупреждения

Метод console.error() выводит красную иконку рядом с сообщением красного цвета.

function connectToServer() {
    console.error("Ошибка: %s (%i)", "Сервер не отвечает",500);
}
connectToServer();

Скриншот

Метод console.warn() выводит жёлтую иконку рядом с текстом сообщения.

if(a.childNodes.length < 3 ) {
    console.warn('Внимание! Слишком мало дочерних элементов (%d)', a.childNodes.length);
}

Скриншот

Проверки

Метод console.assert() выводит сообщение об ошибке (это второй аргумент) только в том случае, если первый аргумент равен false. К примеру, в следующем примере сообщение об ошибке появится, только если количество дочерних элементов DOM-элемента list больше пятисот.

console.assert(list.childNodes.length < 500, "Количество дочерних элементов > 500");

Скриншот

Фильтрация вывода в консоли

Вы можете быстро фильтровать сообщения в консоли по их типу (уровню) — ошибки, предупреждения и стандартный лог — выбрав один из доступных опций внизу консоли:

Скриншот

Возможные фильтры:

Группирование вывода

Вы можете визуально группировать вывод в консоли с помощью команд console.group() и groupEnd().

var user = "Вася Пупкин", authenticated = false;
console.group("Этап аутентификации");
console.log("Аутентификация пользователя '%s'", user);
// Код авторизации…
if (!authenticated) {
    console.log("Пользователь '%s' не был аутентифицирован.", user)
}
console.groupEnd();

Скриншот

Также вы можете вкладывать группы логов друг в друга. В следующем примере группа логов создаётся для этапа аутентификации в процессе логина. Если пользователь аутентифицирован, то создаётся вложенная группа для этапа авторизации.

var user = "Вася Пупкин", authenticated = true, authorized = true;
// Внешняя группа
console.group("Аутентификация пользователя '%s'", user);
if (authenticated) {
    console.log("Пользователь '%s' был аутентифицирован.", user)
    // Начало вложенной группы
    console.group("Авторизация пользователя '%s'", user);
    if (authorized) {
        console.log("Пользователь '%s' был авторизован.", user)
    }
    // Конец вложенной группы
    console.groupEnd();
}
// Конец внешней группы
console.groupEnd();
console.log("Обычный вывод без групп.");

Скриншот

Для создания изначально свёрнутой группы используйте console.groupCollapsed() вместо console.group():

console.groupCollapsed("Аутентификация пользователя '%s'", user);
if (authenticated) {
    //…
}

Скриншот

Замена строк и их форматирование

Первый параметр, передаваемый в любой метод консоли (например, log() или error()), может содержать модификаторы форматирования. Модификатор вывода состоит из символа %, сразу за которым следует буква, сообщающая о том, какое форматирование должно быть применено (например, %s — для строк). Модификатор форматирования определяет, куда подставить значение, переданное из следующих параметров функции.

В следующем примере используется строчный и числовой модификаторы %s (string) и %d (decimal) для замены значений в выводимой строке.

console.log("%s купил %d бочонков мёда", "Саша", "100");

Результатом будет «Саша купил 100 бочонков мёда».

Приведённая таблица содержит поддерживаемые модификаторы форматирования и их значения:

Модификатор форматирования Описание
%s Форматирует значение как строку.
%d или %i Форматирует значение как целое число (decimal и integer).
%f Форматирует объект как число с плавающей точкой.
%o Форматирует значение как DOM-элемент (также как в панели Elements).
%O Форматирует значение как JavaScript-объект.
%c Применяет переданные в качестве второго аргумента CSS-стили к выводимой строке.

В следующем примере модификатор форматирования %d заменяется на значение document.childNodes.length и форматируется как целое число; модификатор %f заменяется на значение, возвращаемое Date.now() и форматируется как число с плавающей точкой.

console.log("Количество дочерних элементов: %d; текущее время: %f", a.childNodes.length, Date.now() );

Скриншот

Представление DOM-элементов как JavaScript-объекты

По умолчанию, когда вы логируете DOM-элемент в консоль, он выводится в XML- формате, как в панели Elements:

console.log(document.body.firstElementChild);

Скриншот

Вы можете вывести DOM-элемент в JavaScript-представлении с помощью метода console.dir():

console.dir(document.body.firstElementChild);

Скриншот

Точно также вы можете использовать модификатор вывода %0 в методе console.log():

console.log("%O", document.body.firstElementChild);

Стилизация вывода консоли с помощью CSS

Можно использовать модификатор %c, чтобы применить СSS-правила, к любой строке, выводимой с помощью console.log() или похожих методов.

console.log("%cЭта надпись будет отформатирована крупным голубым текстом", "color: blue; font-size: x-large");

Скриншот

Измерение временных затрат

Методы console.time() и console.timeEnd() используются для измерения того, как много времени потребовалось для выполнения скрипта. console.time() вызывается для запуска таймера, а console.timeEnd() — для его остановки. Время, прошедшее между вызовами этих функций, будет выведено в консоль.

console.time("Инициализация массива");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};
console.timeEnd("Инициализация массива");

Скриншот

Внимание: необходимо использовать одинаковые строки в параметрах console.time() и timeEnd() для ожидаемой работы таймера — считайте эту строку его уникальным идентификатором.

Корреляция с панелью Timeline

Панель Timeline предоставляет подробный обзор того, куда было потрачено время работы вашего приложения. Метод console.timeStamp() создаёт отдельную отметку в момент своего исполнения. Это помогает легко и непринуждённо соотносить события в приложении с браузерными событиями reflow и repaint.

Внимание: метод console.timeStamp() выполняется только при записи событий в панели Timeline.

В следующем примере в панели Timeline появляется отметка «Adding result» в тот момент, когда поток выполнения программы доходит до console.timeStamp("Adding result")

function AddResult(name, result) {
    console.timeStamp("Добавление результатов");
    var text = name + ': ' + result;
    var results = document.getElementById("results");
    results.innerHTML += (text + "<br>");
}

Как проиллюстрировано в скриншоте, вызов timeStamp() отмечен в следующих местах:

Скриншот

Создание точек останова

Вы можете начать отладку вашего кода, вызвав команду debugger. К примеру, в следующем коде отладка начинается сразу после вызова метода brightness():

function brightness() {
    debugger;
    var r = Math.floor(this.red*255);
    var g = Math.floor(this.green*255);
    var b = Math.floor(this.blue*255);
    return (r * 77 + g * 150 + b * 29) >> 8;
}

Скриншот

Использование Command Line API

Кроме того, что консоль — это место вывода логов вашего приложения, вы можете вводить в нее команды, определенные в Command Line API. Это API дает следующие возможности:

Выполнение выражений

Консоль выполнит любой JavaScript-код, который вы в неё введёте, сразу после нажатия кнопки Return или Enter. В консоли действует автодополнение и дополнение по табу. По мере ввода выражений и свойств вам предлагают возможные варианты. Если существуют несколько одинаково начинающихся свойств, вы можете выбирать между ними с помощью кнопки Tab. Нажав стрелку вправо вы выберете текущую подсказку. Если подсказка одна, то нажатие Tab тоже приведет к ее выбору.

Скриншот

Для того, чтобы вводить многострочные JavaScript-выражения, используйте сочетание клавиш Shift+Enter для перевода строки.

Скриншот

Выделение элементов

Command Line API предоставляет набор методов для доступа к DOM-элементам в вашем приложении. К примеру, метод $() возвращает первый элемент, соответствующий объявленному CSS-селектору, идентично с document.querySelector(). Следующий код вернёт первый элемент с ID «loginBtn».

$('#loginBtn');

Скриншот

Метод $$() возвращает массив элементов, соответствующих указанному CSS- селектору, идентично document.querySelectorAll(). Чтобы получить все кнопки с классом loginBtn, нужно ввести:

$$('button.loginBtn');

Скриншот

И, наконец, метод x() принимает XPath-путь в качестве параметра и возвращает массив элементов, соответствующих этому пути. Например, этот код вернёт все элементы <script>, являющиеся дочерними по отношению к элементу <body>:

$x('/html/body/script');

Инспектирование DOM-элементов и объектов

Метод inspect() принимает ссылку на DOM-элемент (или объект) в качестве параметра и отображает элемент или объект в соответствующей панели: DOM-элемент в панели Elements и JavaScript-объект в панели Profile.

К примеру, в следующем скриншоте функция $() использована, чтобы получить ссылку на элемент <li>. Затем последнее исполненное выражение ($_) передаётся в inspect(), чтобы открыть этот элемент в панели Elements.

Скриншот

Доступ к недавно вызванным DOM-элементам или объектам

Часто во время тестирования вы выбираете DOM-элементы либо непосредственно в панели Elements, либо используя соответствующий инструмент (иконка — увеличительное стекло), чтобы работать с этими элементами. Также вы можете выбрать снимок использования памяти в панели Profiles для дальнейшего изучения этого объекта.

Консоль запоминает последние пять элементов (или объектов), которые вы выбирали, и к ним можно обратиться используя свойства $0, $1, $2, $3 и $4. Последний выбранный элемент или объект доступен как $0, второй — $1 и так далее.

Следующий скриншот показывает значения этих свойств после выбора трех различных элементов подряд из панели Elements:

Скриншот

Внимание: В любом случае вы можете кликнуть правой кнопкой мыши или кликнуть с зажатой клавишей Control в консоли и выбрать пункт «Reveal in Elements Panel»

Отслеживание событий

Метод monitorEvents() позволяет отслеживать определенные события объекта. При возникновении события оно выводится в консоль. Вы определяете объект и отслеживаемые события. Например, следующий код позволяет отслеживать событие "resize" объекта окна.

monitorEvents(window, "resize");

Скриншот

Чтобы отслеживать несколько событий одновременно, можно передать в качестве второго аргумента массив имен событий. Следующий код отслеживает одновременно события "mousedown" и "mouseup" элемента body:

monitorEvents(document.body, ["mousedown", "mouseup"]);

Кроме того, вы можете передать один из поддерживаемых «типов событий», которые DevTools сами преобразуют в реальные имена событий. Например, тип события touch позволит отслеживать события touchstart, touchend, touchmove, и touchcancel.

monitorEvents($('#scrollBar'), "touch");

Чтобы узнать, какие типы событий поддерживаются — ознакомьтесь с monitorEvents() из Console API.

Чтобы прекратить отслеживать событие вызовите unmonitorEvents() с объектом в качестве аргумента.

unmonitorEvents(window);

Контроль за CPU-профайлером

С помощью методов profile() и profileEnd() можно создавать JavaScript профили CPU. По желанию можно задать профилю имя.

Ниже вы видите пример создания нового профиля с именем назначенным по умолчанию:

Скриншот

Новый профиль появляется в панели Profiles с именем Profile 1:

Скриншот

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

Скриншот

Результат в панели Profiles:

Скриншот

Профили CPU могут быть вложенными, например:

profile("A");profile("B");profileEnd("B")profileEnd("A")

Вызовы методов остановки и запуска профилирования не обязательно должны быть корректно вложены друг в друга. Например, этот пример будет работать так же, как и предыдущий:

profile("A");profile("B"); profileEnd("A");profileEnd("B");

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Tim Statler
Автор:
Tim Statler
Twitter:
@tstatz
GitHub:
tstatler
LinkedIn:
tstatler
Владимир Старков
Переводчик:
Владимир Старков
Сaйт:
http://iamstarkov.com
Twitter:
@iamstarkov
GitHub:
iamstarkov

Комментарии (2 комментария, если быть точным)

Автар пользователя
fAra0N21

Отличная статья, спасибо! Побольше бы таких, вообще у вас отличный сайт, удачи вам!

Автар пользователя
fliptheweb

Владимир, спасибо за перевод. Хотелось бы еще добавить, что на Code School есть отличный бесплатный курс devTools, рекомендую, отлично разжевана часть про js debug http://discover-devtools.codeschool.com/