Удобные возможности консоли разработчика Chrome, о которых вы можете не знать

Обложка поста

По материалам Command Line API Reference

API командной строки Chrome DevTools содержит большое количество удобных функций для выполнения простых задач: выбора и проверки элементов DOM, отображения данных в читаемом формате, запуска и проверки профилировщика и мониторинга событий DOM. 

Примечание: этот API доступен только внутри консоли. Получить доступ к командной строке API из скриптов на странице нельзя.

$_

$_ возвращает значение последнего выполненного выражения.

В примере ниже выполняется простое выражение (2 + 2). Затем выполняется $_, которому присваивается то же самое значение:

В этом примере выполненное выражение содержало массив имён. Выполнение $_.length даст длину массива, а само выражение $_ примет значение последнего выполненного выражения, то есть 4:

$0$4

Команды $0, $1, $2, $3 и $4 работают как ссылки на последние 5 элементов DOM, которые были просмотрены в панели Elements, или на последние 5 JS-объектов из кучи, которые были выбраны в панели Profiles. $0 возвращает элемент или объект, выбранный позже всех, $1 возвращает тот, что был перед ним, и так далее.

В примере ниже в панели Elements выбран элемент класса medium. В консоли $0 принял такое же значение:

На картинке ниже выбран другой элемент на той же странице. $0 теперь относится к этому элементу, а $1 — к предыдущему:

$(selector)

$(selector) возвращает ссылку на первый элемент DOM с указанным CSS-селектором. Эта функция — сокращение для функции document.querySelector().

Этот пример возвращает ссылку на первый элемент <img> в документе:

Кликните правой кнопкой мыши по результату и выберите “Reveal in Elements Panel” для поиска элемента в DOM или “Scroll in to View” для того, чтобы увидеть его на странице.

Пример ниже возвращает ссылку на только что выбранный элемент и отображает его свойство src:

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

$$(selector)

$$(selector) возвращает массив элементов, содержащих указанный селектор. Эта команда эквивалентна вызову document.querySelectorAll().

Следующий пример использует $$() для создания массива из всех элементов <img> в документе и возвращает свойство src каждого элемента:

var images = $$('img');
for (each in images) {
    console.log(images[each].src);
}

Примечание: Нажмите в консоли Shift + Enter для перехода на новую строку без выполнения скрипта.

$x(path)

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

Этот пример вернёт все элементы <p>:

$x("//p")

А этот — все элементы <p>, содержащие элемент <a>:

$x("//p[a]")

clear()

clear() очищает историю консоли.

clear();

copy(object)

copy(object) копирует строковое представление указанного объекта в буфер обмена.

copy($0);

debug(function)

При вызове данной функции вызывается отладчик, который позволяет пошагово исполнить её в панели Sources.

debug(getData);

Используйте undebug(fn) для завершения отладки или интерфейс для удаления всех точек останова.

Для получения более подробной информации о точках останова прочитайте статью Debug with Breakpoints.

dir(object)

dir(object) отображает листинг всех свойств указанного объекта. Этот метод — замена метода console.dir().

Следующий пример показывает разницу между вызовом document.body в командной строке и использованием dir() для отображения того же элемента:

document.body;
dir(document.body);

Для получения дополнительной информации ознакомьтесь с разделом console.dir() в API консоли.

dirxml(object)

dirxml(object) выводит XML-представление указанного объекта. Этот метод эквивалентен методу console.dirxml().

inspect(object/function)

inspect(object/function) открывает и выбирает указанный элемент или объект в соответствующей панели: Elements или Profiles.

Этот пример открывает document.body в панели Elements:

inspect(document.body);

При передаче функции она открывает документ в панели Sources.

getEventListeners(object)

getEventListeners(object) возвращает все слушатели событий, привязанные к указанному объекту. Возвращаемое значение — объект, содержащий массивы для всех найденных типов событий (например, "click" или "keydown"). Элементы каждого массива — это объекты, которые описывают слушатель каждого типа. Например, следующий пример выведет все слушатели событий объекта document:

getEventListeners(document);

Если к объекту привязано более одного слушателя, то массив содержит элементы для каждого из них. Например, здесь к элементу #scrollingList привязаны два слушателя события "mousedown":

Можно просмотреть свойства каждого из этих объектов:

keys(object)

keys(object) возвращает массив имён свойств объекта. Для получения значения свойств используйте values().

Предположим, в вашем приложении объявлен следующий объект:

var player1 = { "name": "Ted", "level": 42 }

Пусть player1 объявлен глобально, тогда keys(player1) и values(player1) выведет следующее:

monitor(function)

При вызове указанной функции в консоль выводится сообщение о том, что что эта функция была вызвана с соответствующими аргументами.

function sum(x, y) {
    return x + y;
}
monitor(sum);

Для отмены используйте unmonitor(function).

monitorEvents(object, [events])

Когда одно из указанных событий происходит с указанным объектом, объект Event записывается в консоль. Можно указать конкретное событие, массив событий или один из “типов” событий. Примеры ниже.

Следующий запрос мониторит все изменения размера объекта window.

monitorEvents(window, "resize");

Этот запрос мониторит все события "resize" and "scroll" в объекте window:

monitorEvents(window, ["resize", "scroll"])

Вы также можете задать один из доступных “типов” событий из таблицы ниже:

Тип события / соответствующие события
mouse “mousedown”, “mouseup”, “click”, “dblclick”, “mousemove”, “mouseover”, “mouseout”, “mousewheel”
key “keydown”, “keyup”, “keypress”, “textInput”
touch “touchstart”, “touchmove”, “touchend”, “touchcancel”
control “resize”, “scroll”, “zoom”, “focus”, “blur”, “select”, “change”, “submit”, “reset”

Например, в этом запросе мониторятся все события типа "key" в выбранном элементе в панели Elements:

monitorEvents($0, "key");

Вот пример вывода после набора символов в текстовом поле:

profile([name]) и profileEnd([name])

profile() запускает JS-профилировщик. profileEnd() завершает профилирование и отображает результаты в панели Profile (подробности — в статье Speed Up JavaScript Execution).

Для запуска профилирования:

profile("My profile")

Для окончания:

profileEnd("My profile")

Профили ткже могут быть вложенными:

profile('A');
profile('B');
profileEnd('A');
profileEnd('B');

Результат:

Примечание: Профилировщики могут работать одновременно, и их необязательно закрывать в порядке создания.

table(data, [columns])

Вывод данных объекта в формате таблицы. Например, для вывода списка имён нужно сделать следующее:

var names = {
    0: { firstName: "John", lastName: "Smith" },
    1: { firstName: "Jane", lastName: "Doe" }
};
table(names);

undebug(function)

undebug(function) прекращает отладку заданной функции.

undebug(getData);

unmonitor(function)

unmonitor(function) прекращает мониторинг заданной функции.

unmonitor(getData);

unmonitorEvents(object, [events])

unmonitorEvents(object, [events]) прекращает мониторинг указанного объекта и событий:

unmonitorEvents(window);

Также можно прекращать мониторинг отдельных событий:

monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");

values(object)

values(object) возвращает массив, содержащий значения все свойств указанного объекта.

values(object);

Не смешно? А здесь смешно: @ithumor