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

Кейси Баски
София Емельянова
Sofia Emelianova
GitHub

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.

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

Пример 1 доллара.

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

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

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

Пример $('img').

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

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

Пример $('img').src.

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

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

Пример $('img', div).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); }

Пример использования <span class= l10n-placeholder3() для создания массива всех элементов <img> , которые появляются в текущем документе после выбранного узла:

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

Пример использования $() для выбора всех изображений, появляющихся после элемента select div в документе, и отображения их источников.

$x(путь [, startNode])

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

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

$x("//p")

Пример использования селектора XPath.

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

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

Пример использования более сложного селектора XPath.

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

Пример использования селектора XPath с startNode.

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

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

clear();

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

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

copy($0);

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

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

debug(getData);

Взлом внутри функции с помощью debug().

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

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

каталог (объект)

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

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

document.body;
dir(document.body);

Регистрация document.body с функцией dir() и без нее.

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

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

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

проверить (объект/функция)

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

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

inspect(document.body);

Проверка элемента с помощью Inspect().

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

getEventListeners (объект)

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

getEventListeners(document);

Результат использования getEventListeners().

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

Несколько слушателей.

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

Расширенное представление объекта слушателя.

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

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

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

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

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

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

Пример методовkey() иvalue().

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

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

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

Пример метода монитора().

Используйте unmonitor(function) , чтобы остановить мониторинг.

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

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

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

monitorEvents(window, "resize");

Мониторинг событий изменения размера окна.

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

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

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

Тип события и соответствующие сопоставленные события
мышь «mousedown», «mouseup», «click», «dblclick», «mousemove», «mouseover», «mouseout», «mousewheel»
ключ «keydown», «keyup», «keypress», «textInput»
трогать «touchstart», «touchmove», «touchend», «touchcancel»
контроль «изменение размера», «прокрутка», «масштаб», «фокус», «размытие», «выбрать», «изменить», «отправить», «сбросить»

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

monitorEvents($0, "key");

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

Мониторинг ключевых событий.

Используйте unmonitorEvents(object[, events]) , чтобы остановить мониторинг.

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

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

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

profile("Profile 1")

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

profileEnd("Profile 1")

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

Основной путь." width="800" height="606">

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

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);

Пример метода table().

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

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);

Результат значений(игрок).