Использование консоли 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");