Справочник по Console Utilities API

let images = $$('img');
for (let each of images) {
  console.log(each.src);
}
.
Элементы<img>, которые появляются в текущем документе после выбранного узла:
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}





$x(path [, startNode])

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

Например, следующий код возвращает все элементы <p> на странице:
$x("//p")



В следующем примере возвращаются все элементы <p>, содержащие элементы <a>:
$x("//p[a]")



Как и у других функций селектора, у $x(path) есть необязательный второй параметр startNode, который указывает элемент или узел, с которого нужно начать поиск элементов.



clear()

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

copy(object)

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

debug(function)

Когда вызывается указанная функция, отладчик запускается и останавливается внутри функции на панели Источники, позволяя пошагово выполнять код и отлаживать его.
debug(getData);



Чтобы остановить прерывание функции, используйте undebug(fn) или отключите все точки останова в интерфейсе.

Подробнее о точках останова…

dir(object)

dir(object) показывает список всех свойств указанного объекта в стиле объекта. Этот метод является сокращением для метода console.dir() Console API.

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



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

dirxml(object)

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

inspect(объект/функция)

inspect(object/function) открывает и выбирает указанный элемент или объект на соответствующей панели: Элементы для элементов DOM или "Профили" для объектов кучи JavaScript.

В следующем примере элемент document.body открывается на панели Элементы:
inspect(document.body);



Если вы передадите функцию для проверки, документ откроется на панели Источники.

getEventListeners(object)

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



Если для указанного объекта зарегистрировано несколько прослушивателей, то массив содержит по одному элементу для каждого из них. В следующем примере для события click в элементе документа зарегистрировано два прослушивателя событий:



Вы можете развернуть каждый из этих объектов, чтобы изучить их свойства:



Подробнее о том, как проверить свойства объекта…

keys(object)

Функция keys(object) возвращает массив, содержащий названия свойств, принадлежащих указанному объекту. Чтобы получить связанные значения тех же свойств, используйте values().

Например, предположим, что в вашем приложении определен следующий объект:
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

Предположим, что player определен в глобальном пространстве имен (для простоты). Ввод keys(player) и values(player) в консоли приведет к следующему:



monitor(function)

При вызове указанной функции в консоль записывается сообщение с ее названием и аргументами, которые передаются ей при вызове.
function sum(x, y) {
  return x + y;
}
monitor(sum);



Чтобы прекратить отслеживание, используйте unmonitor(function).

monitorEvents(object [, events])

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

Ниже приведен пример кода, который отслеживает все события изменения размера объекта window.
monitorEvents(window, "resize");



Ниже приведен массив, который позволяет отслеживать события resize и scroll в объекте window:
monitorEvents(window, ["resize", "scroll"])

Вы также можете указать один из доступных типов событий – строки, которые сопоставляются с предопределенными наборами событий. В таблице ниже перечислены доступные типы событий и связанные с ними сопоставления событий.

Тип события и сопоставленные события
мышь
mousedown, mouseup, click, dblclick, mousemove, mouseover, mouseout, mousewheel;
клавиша
"keydown", "keyup", "keypress", "textInput"
сенсорный ввод
"touchstart", "touchmove", "touchend", "touchcancel"
контроль
resize, scroll, zoom, focus, blur, select, change, submit, reset

Например, в следующем примере используется тип события key для всех соответствующих ключевых событий в текстовом поле ввода, выбранном на панели Элементы.
monitorEvents($0, "key");

Ниже приведен пример результата после ввода символов в текстовое поле:



Чтобы прекратить отслеживание, используйте unmonitorEvents(object[, events]).

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

profile() запускает сеанс профилирования ЦП JavaScript с необязательным названием. profileEnd()
завершает профилирование, автоматически открывает панель Производительность и показывает результаты на дорожке Основной.



Чтобы начать профилирование:
profile("Profile 1")

Чтобы остановить профилирование и посмотреть результаты в разделе Эффективность > Основной:
profileEnd("Profile 1")

Результат в разделе Эффективность > Основное:



Профили также могут быть вложенными. Например, в любом порядке будут работать следующие варианты:
profile('A');
profile('B');
profileEnd('A');
profileEnd('B');



queryObjects(Constructor)

Вызовите queryObjects(Constructor) из консоли, чтобы вернуть массив объектов, созданных с помощью указанного конструктора. Пример:


queryObjects(Promise). Возвращает все экземпляры Promise.
queryObjects(HTMLElement) – возвращает все элементы HTML.
queryObjects(foo), где foo – название класса. Возвращает все объекты, экземпляры которых были созданы с помощью new foo().


Область действия queryObjects() – это выбранный в консоли контекст выполнения.

table(data [, columns])

Регистрируйте данные объекта с форматированием таблицы, передавая объект данных с необязательными заголовками столбцов.
Это ярлык для console.table().

Например, чтобы отобразить список имен в виде таблицы в консоли, нужно выполнить следующие действия:
let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



Чтобы скопировать таблицу из журнала в буфер обмена в виде отформатированной таблицы Markdown или данных CSV, нажмите на таблицу в консоли правой кнопкой мыши и выберите нужный вариант копирования в контекстном меню.

undebug(function)

undebug(function) останавливает отладку указанной функции, чтобы при ее вызове отладчик больше не запускался. Используется вместе с debug(fn).
undebug(getData);

unmonitor(function)

unmonitor(function) прекращает отслеживание указанной функции. Используется вместе с monitor(fn).
unmonitor(getData);

unmonitorEvents(object [, events])

unmonitorEvents(object[, events]) прекращает отслеживать события для указанного объекта и события. Например, следующая команда останавливает отслеживание всех событий в объекте window:
unmonitorEvents(window);

Вы также можете выборочно прекратить отслеживание определенных событий объекта. Например, следующий код начинает отслеживать все события мыши на выбранном элементе, а затем прекращает отслеживать события "mousemove" (возможно, чтобы уменьшить количество сообщений в консоли):
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");

values(object)

values(object) возвращает массив, содержащий значения всех свойств, принадлежащих указанному объекту.
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);