Справочник по API консольных утилит

let images = $$( 'img' ); for ( let each of images ) {  console . log ( each .​​​ 

Элементы <img>, которые появляются в текущем документе после выбранного узла:

let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}

$x(путь [, начальный_узел])

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

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

$x("//p")

Следующий пример возвращает все элементы <p> содержащие элементы <a> :

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

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

прозрачный()

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

clear();

копия(объект)

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

copy($0);

отладка(функция)

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

debug(getData);

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

Дополнительную информацию о точках останова см. в разделе Приостановка кода с помощью точек останова .

dir(объект)

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

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

document.body;
dir(document.body);

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

dirxml(объект)

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

осмотреть(объект/функцию)

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

В следующем примере document.body открывается на панели «Элементы» :

inspect(document.body);

При передаче функции для проверки функция открывает документ на панели «Источники» , чтобы вы могли его просмотреть.

getEventListeners(объект)

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

getEventListeners(document);

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

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

Для получения дополнительной информации см. раздел Проверка свойств объекта .

ключи(объект)

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

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

let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

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

монитор(функция)

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

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

Используйте unmonitor(function) для остановки мониторинга.

monitorEvents(объект [, события])

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

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

monitorEvents(window, "resize");

Ниже определяется массив для отслеживания событий «изменения размера» и «прокрутки» объекта окна:

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

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

Например, в следующем примере используются все соответствующие события клавиши типа «клавиша» в поле ввода текста, выбранном в данный момент на панели «Элементы» .

monitorEvents($0, "key");

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

Для остановки мониторинга используйте unmonitorEvents(object[, events]) .

профиль([имя]) и профильEnd([имя])

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

Чтобы начать профилирование:

profile("Profile 1")

Чтобы остановить профилирование и просмотреть результаты в разделе «Производительность» > «Основной трек»:

profileEnd("Profile 1")

Результат в номинации «Выступление» > «Основной трек»:

Профили также могут быть вложенными. Например, это будет работать в любом порядке:

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

queryObjects(Конструктор)

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

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

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

таблица(данные [, столбцы])

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

Например, чтобы отобразить список имен с помощью таблицы в консоли, нужно сделать следующее:

let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);

undebug(функция)

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

undebug(getData);

unmonitor(функция)

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

unmonitor(getData);

unmonitorEvents(объект [, события])

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

unmonitorEvents(window);

Вы также можете выборочно остановить отслеживание определённых событий объекта. Например, следующий код начинает отслеживать все события мыши на выбранном элементе, а затем останавливает отслеживание событий «mousemove» (возможно, для уменьшения шума в выводе консоли):

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

значения(объект)

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

let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);