Справочник по 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(путь [, startNode])

$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(object) отображает список всех свойств указанного объекта в стиле объекта. Этот метод является ярлыком для метода console.dir() консольного API.

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

document.body;
dir(document.body);

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

дирхмл (объект)

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 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]) чтобы прекратить мониторинг.

профиль([имя]) и профильКонец([имя])

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

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

profile("Profile 1")

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

profileEnd("Profile 1")

Результат в Performance > Main track:

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

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(function) останавливает отладку указанной функции, поэтому при вызове функции отладчик больше не вызывается. Это используется совместно с debug(fn) .

undebug(getData);

отключить мониторинг (функция)

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

unmonitor(getData);

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

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

unmonitorEvents(window);

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

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

ценности (объект)

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

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

values(player);

Kayce Basques

Sofia Emelianova

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

Ищете console.log() , console.error() и остальные функции console.* ? См. Справочник по API консоли .

$_

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

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

В следующем примере вычисленное выражение изначально содержит массив имен. Оценивая $_.length для определения длины массива, значение, хранящееся в $_ изменяется и становится последним вычисленным выражением, 4:

0–4 доллара США

Команды $0 , $1 , $2 , $3 и $4 работают как историческая ссылка на последние пять элементов DOM, проверенных на панели «Элементы» , или на последние пять объектов кучи JavaScript, выбранных на панели «Профили». $0 возвращает последний выбранный элемент или объект JavaScript, $1 возвращает второй из последних выбранных и т. д.

В следующем примере на панели «Элементы» выбран элемент img . В ящике консоли $0 был оценен и отображает тот же элемент:

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

$(селектор [, startNode])

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

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

Щелкните правой кнопкой мыши возвращенный результат и выберите «Показать на панели элементов», чтобы найти его в DOM, или прокрутите до пункта «Просмотр» , чтобы отобразить его на странице.

Следующий пример возвращает ссылку на текущий выбранный элемент и отображает его свойство src :

Эта функция также поддерживает второй параметр, startNode , который указывает «элемент» или узел, из которого нужно искать элементы. Значение этого параметра по умолчанию — document .

В следующем примере возвращается ссылка на первый элемент img , который является потомком devsite-header-background , и отображается его свойство src :

$$(selector [, startNode])

$$(селектор) возвращает массив элементов, соответствующих данному селектору CSS. Эта команда эквивалентна вызову Array.from( document.querySelectorAll() ) .

В следующем примере используется $$() to create an array of all <img> elements in the current document and displays the value of each element's src property:

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

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

$x("//p")

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

clear();

copy($0);

debug(getData);

document.body;
dir(document.body);

inspect(document.body);

getEventListeners(document);

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

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

monitorEvents(window, "resize");

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

monitorEvents($0, "key");

profile("Profile 1")

profileEnd("Profile 1")

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

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

undebug(getData);

unmonitor(getData);

unmonitorEvents(window);

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

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

values(player);