Функции и селекторы средств консоли

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

• Выбор и проверка элементов DOM.
• Отображение данных в доступном для чтения формате.
• Остановка и запуск профилировщика.
• Мониторинг событий DOM.

Эти переменные и функции работают только путем ввода их непосредственно в консоль DevTools; Нельзя использовать переменные и вызывать функции из скриптов.

Сводка

Недавно оцененное выражение: $_

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

Синтаксис:

$_

Пример 1

1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

2. В средстве Консоль введите выражение 2+2и нажмите клавишу ВВОД.

   Выражение вычисляется и отображается результат. Переменная $_ также задается в качестве результата выражения.

3. Введите $_, а затем нажмите клавишу ВВОД:

   

Пример 2

1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

2. Вставьте следующий код в консоль и нажмите клавишу ВВОД:

   ["john", "paul", "george", "ringo"]
   

   Вычисляемое выражение представляет собой массив имен.

3. Введите следующий код в консоль и нажмите клавишу ВВОД:

   $_.length
   

   Выражение $_.length вычисляется и 4 отображается в консоли, так как $_ ссылается на ранее вычислившееся выражение, которое является массивом имен. $_.length — это длина массива имен.

4. Введите следующий код в консоль и нажмите клавишу ВВОД:

   $_
   

   $_ всегда ссылается на ранее вычислившееся выражение, которое теперь является числом 4.

   

Недавно выбранный элемент или объект JavaScript: $0–$4

$0, $1, $2, $3и $4 возвращают недавно выбранные элементы или объекты JavaScript.

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

Синтаксис

$0

Пример

1. Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.

2. В инструменте Элементы выберите элемент, например <input> элемент .

3. Откройте консоль на панели Быстрого просмотра в нижней части devTools.

4. Введите $0 в средстве Консоль и нажмите клавишу ВВОД.

   Переменная $0 возвращает выбранный <input> элемент:

   

5. Выберите другой элемент в инструменте Элементы , например <div> элемент .

6. В средстве Консоль введите $0и нажмите клавишу ВВОД.

   $0 ссылается на только что выбранный элемент, который является элементом <div> .

7. Введите $1, а затем нажмите клавишу ВВОД.

   $1 ссылается на ранее выбранный элемент, который является элементом <input> :

   

Селектор запросов: $(селектор)

$(selector) возвращает ссылку на первый элемент DOM, соответствующий указанному селектору selectorCSS .

Эта функция аналогична функции document.querySelector().

Если вы используете библиотеку, например jQuery, которая использует $, функция перезаписывается и $ соответствует реализации из этой библиотеки.

Синтаксис

$(selector, [parentElement])

Пример 1

1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

2. В средстве Консоль введите $('input'). Отображается первый элемент, соответствующий селектору input CSS:

   

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

Пример 2

Функция $() принимает второй параметр , который указывает родительский элемент, parentElementв котором выполняется поиск. Значение параметра по умолчанию — document, что означает, что по умолчанию выполняется поиск по всей веб-странице. Указав родительский элемент, можно искать элементы в определенной части веб-страницы.

1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

2. В средстве "Консоль" введите $('input', $('ul'))

   Первый элемент, соответствующий селектору input CSS, найденного в первом ul элементе, переизвонил:

   

Селектор запросов: $$(selector, [startNode])

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

Эта функция похожа на document.querySelectorAll(), но возвращает array из элемента вместо NodeList.

Синтаксис

$$(selector, [parentElement])

Пример 1

1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

2. В средстве Консоль введите $$('button'). <button> Отображаются все элементы веб-страницы:

   

Пример 2

Эта $$() функция также поддерживает второй параметр , parentElementкоторый указывает родительский элемент, в котором выполняется поиск. Значение параметра по умолчанию — document, что означает, что по умолчанию выполняется поиск по всей веб-странице. Указав родительский элемент, можно искать элементы в определенной части веб-страницы.

1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

2. В средстве Консоль введите $$('button', $('li.task')). <button> Отображаются все элементы, которые являются потомками первого <li class="task"> элемента:

   

XPath: $x(path, [startNode])

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

Синтаксис

$x(path, [parentElement])

Пример 1

1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

2. В средстве Консоль введите $x("//li"). <li> Отображаются все элементы веб-страницы:

   

Пример 2

1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

2. В средстве Консоль введите $x("//li[button]"). Отображаются <li> все элементы, содержащие <button> элементы:

   

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

clear()

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

Синтаксис

clear()

Пример

1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

2. Чтобы создать журнал в средстве Консоли , введите несколько выражений JavaScript. Например:

   for (let i = 0; i < 10; i++) {
       console.log(i);
   }
   

3. Чтобы очистить журнал, введите clear() в средстве Консоль и нажмите клавишу ВВОД:

   

copy(object)

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

Синтаксис

copy(object)

Пример

1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

2. Введите следующий код в консольном инструменте и нажмите клавишу ВВОД:

   copy($$('*').map(element => element.tagName));
   

   Фрагмент кода выбирает все элементы веб-страницы с помощью $$(selector) функции, а затем сопоставляет tagName свойство каждого элемента с массивом. Затем массив копируется в буфер обмена с помощью copy() функции .

3. Вставьте содержимое буфера обмена в текстовый редактор. Содержимое буфера обмена — это список всех html-тегов на веб-странице, например:

   ["HTML", "HEAD", "META", "TITLE", "LINK", "BODY", "H1", "FORM", "DIV", "LABEL", ...]
   

debug(function)

debug(function) приостанавливает работу в указанной функции function в средстве Источники при вызове этой функции.

После приостановки отладчика можно выполнить пошаговое выполнение кода и выполнить его отладку.

Синтаксис

debug(function)

Пример

1. Откройте новую вкладку или окно, а затем перейдите на страницу, содержащую функцию JavaScript, которую требуется отладить. Например, перейдите на демонстрационную страницу приложения TODO .

2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

3. В средстве Консоль введите debug(updateList).

4. На отображаемой веб-странице добавьте в список новый элемент TODO, введя тест в текстовое поле Добавление задачи и нажав клавишу ВВОД.

   Отладчик приостанавливает работу updateList() функции в средстве "Источники ":

   

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

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

dir(object)

dir(object) Отображает список всех свойств указанного объекта в стиле объекта, например console.dir().

Эта функция является псевдонимом для console.dir().

Синтаксис

dir(object)

Пример

1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

2. В средстве Консоль введите document.head и нажмите клавишу ВВОД.

   Отображается HTML-представление <head> элемента.

3. Введите dir(document.head) и нажмите клавишу ВВОД.

   Отображается список всех свойств элемента в <head> стиле объекта:

   

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

dirxml(object)

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

Эта функция эквивалентна console.dirxml().

Синтаксис

dirxml(object)

inspect(object/function)

inspect(element/function) открывается и выбирает указанный элемент DOM в средстве Элементы или указанную функцию JavaScript в средстве Источники .

• Для элемента DOM эта функция открывается и выбирает указанный элемент DOM в инструменте Элементы .
• Для функции JavaScript эта функция открывает указанную функцию JavaScript в средстве Источники .

Синтаксис

inspect(element/function)

Пример

1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

2. В средстве Консоль введите inspect(document.body) и нажмите клавишу ВВОД.

   Откроется инструмент Элементы и <body> выбран элемент:

   

При передаче функции для проверки функция открывает веб-страницу в средстве "Источники" для проверки.

getEventListeners(object)

getEventListeners(object) возвращает прослушиватели событий, зарегистрированные в указанном объекте.

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

Синтаксис

getEventListeners(object)

Пример

1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

2. В средстве Консоль введите getEventListeners($('form')) и нажмите клавишу ВВОД.

   Отображаются прослушиватели событий, зарегистрированные в первом <form> элементе:

   

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

keys(object)

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

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

Синтаксис

keys(object)

Пример

1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

2. В средстве Консоль введите следующий код и нажмите клавишу ВВОД:

   var player1 = {"name": "Ted", "level": 42}
   

   Приведенный выше фрагмент кода определяет объект в глобальном пространстве имен с именем player1, который содержит два свойства.

3. Чтобы получить имена свойств, принадлежащих объекту player1 , введите keys(player1) в средстве Консоль и нажмите клавишу ВВОД:

   

4. Чтобы получить значения свойств, принадлежащих объекту player1 , введите values(player1) в средстве Консоль и нажмите клавишу ВВОД:

   

monitor(function)

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

Синтаксис

monitor(function)

Пример

1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

2. В средстве Консоль введите следующий код и нажмите клавишу ВВОД:

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

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

3. Чтобы начать мониторинг sum функции, введите monitor(sum) в средстве Консоли и нажмите клавишу ВВОД:

4. Чтобы вызвать функцию, введите sum(1, 2) и нажмите клавишу ВВОД. Появится сообщение, указывающее, что sum функция была вызвана, и аргументы, переданные функции:

   

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

monitorEvents(object[, events])

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

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

Синтаксис

monitorEvents(object[, events])

Пример 1

Чтобы отслеживать одно событие, выполните приведенные далее действия.

1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

2. В средстве Консоль введите следующий код и нажмите клавишу ВВОД:

   monitorEvents(window, "resize");
   

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

3. Измените размер окна, например, сделав Средства разработки больше или меньше. События изменения размера отображаются в средстве "Консоль ":

   

Пример 2

Чтобы отслеживать несколько событий, выполните приведенные далее действия.

1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

2. В средстве Консоль введите следующий код и нажмите клавишу ВВОД:

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

   Предыдущий фрагмент кода определяет массив имен событий для отслеживания событий resize и scroll событий в объекте окна.

3. Измените размер окна, например, сделав его короче, а затем прокрутите страницу, отображаемую для просмотра. События изменения размера и прокрутки отображаются в средстве консоли :

   

Пример 3

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

1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

2. В средстве Консоль введите следующий код и нажмите клавишу ВВОД:

   monitorEvents(window, "key");
   

   Предыдущий фрагмент кода отслеживает все события клавиатуры в объекте окна.

3. На отображаемой веб-странице нажмите любые клавиши. События клавиатуры отображаются в средстве консоли :

   

profile([name])

profile([name]) запускает сеанс профилирования ЦП JavaScript с необязательным именем.

Чтобы заполнить профиль и отобразить результаты в средстве Производительность , вызовите profileEnd([name])).

Синтаксис

profile([name])

Пример

1. Откройте страницу, которую вы хотите профилировать, на новой вкладке или окне. Например, перейдите на демонстрационную страницу Вялые анимации .

2. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

3. Чтобы начать профилирование, в средстве Консоли введите profile("My profile)и нажмите клавишу ВВОД.

4. Чтобы остановить профилирование, через некоторое время введите profileEnd("My profile")и нажмите клавишу ВВОД.

   Результаты профиля отображаются в средстве производительности :

   

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

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

profileEnd([name])

profileEnd([name]) завершает сеанс профилирования ЦП JavaScript и отображает результаты в средстве производительности .

Чтобы вызвать эту функцию, необходимо запустить функцию profile([name]).

Синтаксис

profileEnd([name])

Дополнительные сведения см. в разделе profile([name]) выше.

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

queryObjects(constructor) возвращает массив объектов, созданных указанным конструктором.

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

Синтаксис

queryObjects(constructor)

Пример

1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

2. Чтобы вернуть все экземпляры элементов HTML, введите queryObjects(HTMLElement) в средстве Консоль и нажмите клавишу ВВОД:

   

Другие примеры:

• Используйте queryObjects(Promise) для возврата всех экземпляров объектов, Promise если веб-страница использует Promise объекты.
• Используйте queryObjects(ClassName) для возврата всех экземпляров класса , ClassName если на веб-странице используются классы JavaScript.

table(data[, columns])

table(data[, columns]) регистрирует данные объекта в формате таблицы с заголовками столбцов для указанного объекта данных.

Эта функция является псевдонимом для console.table().

Синтаксис

table(data[, columns])

Пример

Чтобы отобразить список имен людей в виде таблицы, в консоли:

1. Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" откроется в средствах разработки рядом с веб-страницей.

2. Введите следующий код в консоли и нажмите клавишу ВВОД:

   var names = {
     0: {
       firstName: "John",
       lastName: "Smith"
     },
     1:  {
       firstName: "Jane",
       lastName: "Doe"
     }
   };
   

   Приведенный выше фрагмент кода определяет объект в глобальном пространстве имен с именем names, который содержит два свойства.

3. Чтобы отобразить объект в names виде таблицы, введите table(names) в консоли и нажмите клавишу ВВОД:

   

undebug(function)

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

Дополнительные сведения см. в разделе debug(function) выше.

Синтаксис

undebug(function)

unmonitor(function)

unmonitor(function) останавливает мониторинг указанной функции.

Дополнительные сведения см. в разделе monitor(function) выше.

Синтаксис

unmonitor(function)

unmonitorEvents(object[, events])

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

Дополнительные сведения см. в разделе monitorEvents(object[, events]) выше.

Синтаксис

unmonitorEvents(object[, events])

values(object)

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

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

Синтаксис

values(object)

Пример

См. пример в разделе ключи(объект) выше.

См. также

• Справочник по функциям консоли
• Справочник по - console.* API объектов консоли функции, такие как console.log() и console.error().

Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.