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);По материалам Command Line API Reference
