Примечание.
Для доступа к этой странице требуется авторизация. Вы можете попробовать войти или изменить каталоги.
Для доступа к этой странице требуется авторизация. Вы можете попробовать изменить каталоги.
API служебных программ консоли содержит набор переменных удобства и функций для выполнения общих задач, таких как:
- Выбор и проверка элементов DOM с помощью селекторов CSS.
- Отображение данных в удобочитаемом формате.
- Остановка и запуск профилировщика.
- Мониторинг событий DOM.
Эти переменные и функции работают только при вводе их непосредственно в консоли средств разработчика; Нельзя использовать переменные и вызывать функции из скриптов.
Сводка
| Переменная или функция | Описание |
|---|---|
| Недавно оцененное выражение: $_ | Возвращает значение последнего вычисленного выражения. |
| Недавно выбранный элемент или объект JavaScript: $0-$4 | Возвращает недавно выбранный элемент или объект JavaScript. |
| Селектор запроса: $(selector) | Селектор запросов; возвращает ссылку на первый элемент DOM с указанным селектором CSS, например document.querySelector(). |
| Запрос selector all: $$(selector, [startNode]) | Запрос selector all; возвращает массив элементов, соответствующих указанному селектору CSS, например document.querySelectorAll(). |
| XPath: $x(путь, [начальный узел]) | Возвращает массив элементов DOM, соответствующих указанному выражению XPath. |
| clear() | Очищает консоль от журнала. |
| COPY(объект) | Копирует строковое представление указанного объекта в буфер обмена. |
| debug(функция) | При вызове указанной функции отладчик вызывается и прерывается внутри функции на панели Sources. |
| dir(объект) | Отображает список всех свойств указанного объекта в объектном стиле, например console.dir(). |
| dirxml(object) | Печатает XML-представление указанного объекта, отображаемое в средстве "Элементы ", например console.dirxml(). |
| inspect(объект/функция) | Открывает и выбирает указанный элемент DOM в средстве "Элементы " или указанный объект кучи JavaScript в средстве "Память ". |
| getEventListeners(объект) | Возвращает прослушиватели событий, зарегистрированные в указанном объекте. |
| keys(объект) | Возвращает массив, содержащий имена свойств, принадлежащих указанному объекту. |
| monitor(function) | Записывает в консоль сообщение, в котором указывается имя функции, а также аргументы, передаваемые функции в рамках запроса. |
| monitorEvents(object[, events]) | Когда одно из указанных событий происходит на указанном объекте, объект события регистрируется на консоли. |
| profile([name]) | Запускает сеанс профилирования ЦП JavaScript с необязательным именем. |
| profileEnd([название]) | Завершает сеанс профилирования ЦП JavaScript и отображает результаты в средстве "Производительность ". |
| queryObjects(конструктор) | Возвращает массив объектов, которые были созданы указанным конструктором. |
| table(data[, columns]) | Записывает данные объекта в формате таблицы с заголовками столбцов для указанного объекта данных. |
| undebug(function) | Останавливает отладку указанной функции, так что при запросе функции отладчик больше не вызывается. |
| unmonitor(function) | Прекращает мониторинг указанной функции. |
| unmonitorEvents(object[, events]) | Прекращает мониторинг событий для указанного объекта и событий. |
| values(объект) | Возвращает массив, содержащий значения всех свойств, принадлежащих указанному объекту. |
Недавно оцененное выражение: $_
$_ Возвращает значение последнего оцениваемого выражения.
Синтаксис:
$_
Пример 1
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" открывается в средствах разработчика рядом с веб-страницей.
В средстве "Консоль" введите выражение
2+2, а затем нажмите клавишу ВВОД.Выражение вычисляется, и результат отображается. Переменная
$_также имеет значение результата выражения.Введите
$_, а затем нажмите клавишу ВВОД:
Пример 2
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" открывается в средствах разработчика рядом с веб-страницей.
Вставьте в консоль следующий код и нажмите клавишу ВВОД:
["john", "paul", "george", "ringo"]Оцениваемое выражение представляет собой массив имен.
Введите следующий код в консоль и нажмите клавишу ВВОД:
$_.lengthВыражение
$_.lengthвычисляется и4отображается в консоли , так как$_ссылается на ранее оцененное выражение, которое является массивом имен.$_.length— длина массива имен.Введите следующий код в консоль и нажмите клавишу ВВОД:
$_$_Всегда ссылается на ранее вычисленное выражение, которое теперь является числом 4.
Недавно выбранный элемент или объект JavaScript: $0-$4
$0, $1, , $3$2, и $4 вернуть недавно выбранные элементы или объекты JavaScript.
$0 возвращает последний выбранный элемент или объект JavaScript, $1 возвращает второй по величине выбранный элемент и т. д.
$3
$2
$1, $0и $4 переменные работают как историческая ссылка на последние пять элементов DOM, которые были проверены в средстве Elements, или на последние пять объектов кучи JavaScript, которые были выбраны в средстве "Память".
Синтаксис
$0
Пример
Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите "Проверить". Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроются средства разработчика.
В средстве "Элементы" выберите элемент, например элемент.
<input>Откройте средство "Консоль" на панели быстрого просмотра в нижней части средств разработчика.
Введите
$0текст в средстве "Консоль " и нажмите клавишу ВВОД.Переменная
$0возвращает выбранный<input>элемент:
Выберите другой элемент в инструменте "Элементы", например элемент.
<div>В средстве "Консоль" введите
$0, а затем нажмите клавишу ВВОД.$0ссылается на вновь выбранный элемент, которым является элемент.<div>Введите
$1, а затем нажмите клавишу ВВОД.$1ссылается на ранее выбранный элемент, который является элементом<input>:
Селектор запроса: $(selector)
$(selector) возвращает ссылку на первый элемент DOM, соответствующий указанному селектору selectorCSS.
Эта функция аналогична функции document.querySelector().
Если вы используете библиотеку, такую как jQuery, которая использует $, функциональность перезаписывается и $ соответствует реализации из этой библиотеки.
Синтаксис
$(selector, [parentElement])
Пример 1
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" открывается в средствах разработчика рядом с веб-страницей.
В средстве "Консоль" введите
$('input'). Отображается первый элемент, соответствующий селекторуinputCSS:
Щелкните правой кнопкой мыши возвращенный результат, а затем выберите "Показать на панели элементов ", чтобы найти его в DOM, или прокрутите до пункта "Вид ", чтобы отобразить его на странице.
Пример 2
Функция $() принимает второй параметр, , который указывает родительский элемент, parentElementв котором будет выполняться поиск. Значение параметра по умолчанию — document, что означает, что по умолчанию поиск выполняется на всей веб-странице. Указав родительский элемент, вы можете искать элементы в определенной части веб-страницы.
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" открывается в средствах разработчика рядом с веб-страницей.
В средстве "Консоль " введите
$('input', $('ul'))Первый элемент, соответствующий селектору
inputCSS, найденному в первомulэлементе, возвращается назад:
Запрос selector all: $$(selector, [startNode])
$$() возвращает список элементов, соответствующих указанному селектору CSS, например document.querySelectorAll().
Эта функция похожа на document.querySelectorAll(), но возвращает array элемент of вместо NodeList.
Синтаксис
$$(selector, [parentElement])
Пример 1
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" открывается в средствах разработчика рядом с веб-страницей.
В средстве "Консоль" введите
$$('button').<button>Отображаются все элементы веб-страницы:
Пример 2
Эта $$() функция также поддерживает второй параметр , который указывает родительский элемент, parentElementв котором будет выполняться поиск. Значение параметра по умолчанию — document, что означает, что по умолчанию поиск выполняется на всей веб-странице. Указав родительский элемент, вы можете искать элементы в определенной части веб-страницы.
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" открывается в средствах разработчика рядом с веб-страницей.
В средстве "Консоль" введите
$$('button', $('li.task')).<button>Отображаются все элементы, являющиеся потомками первого<li class="task">элемента:
XPath: $x(путь, [начальный узел])
$x(path) возвращает массив элементов DOM, соответствующих указанному выражению pathXPath.
Синтаксис
$x(path, [parentElement])
Пример 1
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" открывается в средствах разработчика рядом с веб-страницей.
В средстве "Консоль" введите
$x("//li").<li>Отображаются все элементы веб-страницы:
Пример 2
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" открывается в средствах разработчика рядом с веб-страницей.
В средстве "Консоль" введите
$x("//li[button]").<li>Отображаются все элементы, содержащие<button>элементы:
Как и другие команды селектора, $x(path)parentElementимеет необязательный второй параметр , который указывает элемент или узел для поиска элементов.
clear()
clear() очищает консоль от ее журнала.
Синтаксис
clear()
Пример
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" открывается в средствах разработчика рядом с веб-страницей.
Чтобы создать историю в средстве " Консоль ", введите несколько выражений JavaScript. Например, вы можете:
for (let i = 0; i < 10; i++) { console.log(i); }Чтобы очистить журнал, введите
clear()в средстве "Консоль " и нажмите клавишу ВВОД:
COPY(объект)
copy(object) Копирует строковое представление указанного объекта в буфер обмена.
Синтаксис
copy(object)
Пример
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" открывается в средствах разработчика рядом с веб-страницей.
Введите следующий код в средстве "Консоль " и нажмите клавишу ВВОД:
copy($$('*').map(element => element.tagName));Фрагмент кода выбирает все элементы на веб-странице с помощью
$$(selector)функции, а затем сопоставляет свойствоtagNameкаждого элемента с массивом. Затем массив копируется в буфер обмена с помощьюcopy()функции.Вставьте содержимое буфера обмена в текстовый редактор. Содержимое буфера обмена — это список всех тегов HTML на веб-странице, например:
["HTML", "HEAD", "META", "TITLE", "LINK", "BODY", "H1", "FORM", "DIV", "LABEL", ...]
debug(функция)
debug(function) паузы внутри указанной функции function в средстве "Источники " при вызове этой функции.
После приостановки отладчика можно выполнить пошаговое выполнение кода и его отладку.
Синтаксис
debug(function)
Пример
Откройте новую вкладку или окно, а затем перейдите на страницу, содержащую функцию JavaScript, которую вы хотите отладить. Например, перейдите на страницу демонстрации приложения TODO .
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" открывается в средствах разработчика рядом с веб-страницей.
В средстве "Консоль" введите
debug(updateList).На отрисованной веб-странице добавьте новый элемент TODO в список, введя команду test в текстовом поле Добавить задачу и нажав клавишу ВВОД.
Отладчик приостанавливается внутри
updateList()функции в средстве "Источники ".
Используйте undebug(function) эту функцию, чтобы остановить остановку, или используйте пользовательский интерфейс для отключения всех точек останова.
Дополнительные сведения о точках останова см. в статье Приостановка кода с точками останова.
dir(объект)
dir(object) отображает объектный список всех свойств указанного объекта, например console.dir().
Эта функция является псевдонимом для console.dir().
Синтаксис
dir(object)
Пример
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" открывается в средствах разработчика рядом с веб-страницей.
В средстве "Консоль " введите и
document.headнажмите клавишу ВВОД.Отображается HTML-представление
<head>элемента.Введите и
dir(document.head)нажмите клавишу ВВОД.Отображается список всех свойств
<head>элемента в объектном стиле:
Дополнительные сведения см. в разделе console.dir() в API консоли.
dirxml(object)
dirxml(object) печатает XML-представление указанного объекта, отображаемое в средстве Elements , например console.dirxml().
Эта функция эквивалентна console.dirxml().
Синтаксис
dirxml(object)
inspect(объект/функция)
inspect(element/function) открывает и выбирает указанный элемент DOM в средстве "Элементы " или указанную функцию JavaScript в средстве "Источники ".
- Для элемента DOM эта функция открывает и выбирает указанный элемент DOM в средстве "Элементы ".
- Для функции JavaScript эта функция открывает указанную функцию JavaScript в средстве "Источники ".
Синтаксис
inspect(element/function)
Пример
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" открывается в средствах разработчика рядом с веб-страницей.
В средстве "Консоль " введите и
inspect(document.body)нажмите клавишу ВВОД.Откроется средство "Элементы" и будет выбран элемент:
<body>
При передаче функции для проверки она открывает веб-страницу в средстве "Источники " для проверки.
getEventListeners(объект)
getEventListeners(object) Возвращает прослушиватели событий, зарегистрированные в указанном объекте.
Возвращаемое значение — это объект, содержащий массив для каждого зарегистрированного типа события (например, click или keydown). Элементы в каждом массиве являются объектами, описывающими прослушивателя, зарегистрированного для каждого типа.
Синтаксис
getEventListeners(object)
Пример
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" открывается в средствах разработчика рядом с веб-страницей.
В средстве "Консоль " введите и
getEventListeners($('form'))нажмите клавишу ВВОД.Отображаются прослушиватели событий, зарегистрированные на первом
<form>элементе:
Если в указанном объекте зарегистрировано несколько прослушивателей, массив содержит член для каждого прослушивателя. На следующем рисунке в элементе document события click зарегистрированы два прослушивателя:
keys(объект)
keys(object) Возвращает массив, содержащий имена свойств, принадлежащих указанному объекту.
Чтобы получить связанные значения тех же свойств, см. values(object) ниже.
Синтаксис
keys(object)
Пример
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" открывается в средствах разработчика рядом с веб-страницей.
В средстве "Консоль" введите следующий код и нажмите клавишу ВВОД:
var player1 = {"name": "Ted", "level": 42}Приведенный выше фрагмент кода определяет объект в глобальном пространстве имен с именем
player1, который содержит два свойства.Чтобы получить имена свойств, принадлежащих объекту
player1, введите вkeys(player1)средстве "Консоль " и нажмите клавишу ВВОД:
Чтобы получить значения свойств, принадлежащих объекту
player1, введитеvalues(player1)в средстве Консоль и нажмите клавишу ВВОД:
monitor(function)
monitor(function) Записывает сообщение в консоль каждый раз, когда вызывается указанная функция. В сообщении указывается имя функции и аргументы, передаваемые функции.
Синтаксис
monitor(function)
Пример
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" открывается в средствах разработчика рядом с веб-страницей.
В средстве "Консоль" введите следующий код и нажмите клавишу ВВОД:
function sum(x, y) { return x + y; }Приведенный выше фрагмент кода определяет функцию с именем
sum, которая принимает два аргумента.Чтобы начать мониторинг
sumфункции, введитеmonitor(sum)в средстве "Консоль " и нажмите клавишу ВВОД:Чтобы вызвать функцию, введите
sum(1, 2)и нажмите клавишу ВВОД. Появится сообщение, указывающее, чтоsumфункция была вызвана, и аргументы, переданные функции:
Чтобы завершить мониторинг, используйте unmonitor(function).
monitorEvents(object[, events])
monitorEvents(object[, events]) Регистрирует объект события в консоли каждый раз, когда указанные события происходят в указанном объекте.
Можно указать одно событие для отслеживания, массив событий или один из универсальных типов событий, сопоставленных с предопределенной коллекцией событий.
Синтаксис
monitorEvents(object[, events])
Пример 1
Чтобы отследить отдельное событие:
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" открывается в средствах разработчика рядом с веб-страницей.
В средстве "Консоль" введите следующий код и нажмите клавишу ВВОД:
monitorEvents(window, "resize");Предыдущий фрагмент кода отслеживает все события изменения размера в объекте window.
Измените размер окна, например увеличив или уменьшив DevTools. События изменения размера отображаются в средстве "Консоль ":
Пример 2
Чтобы отслеживать несколько событий, выполните следующие действия.
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" открывается в средствах разработчика рядом с веб-страницей.
В средстве "Консоль" введите следующий код и нажмите клавишу ВВОД:
monitorEvents(window, ["resize", "scroll"]);Предыдущий фрагмент кода определяет массив имен событий для отслеживания событий обоих
resizeтипов иscrolleсобытий в объекте window.Измените размер окна, например укоротив его, а затем прокрутите отрисованную веб-страницу. События изменения размера и прокрутки отображаются в средстве "Консоль ":
Пример 3
Можно также указать коллекцию событий с помощью одного из готовых наборов событий. В следующей таблице показаны доступные типы событий и связанные с ними сопоставления событий.
| Тип события | Соответствующие сопоставленные события |
|---|---|
mouse |
"щелчок", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "mousewheel" |
key |
"keydown", "keypress", "keyup", "textInput" |
touch |
"TouchCancel", "Touchend", "TouchMove", "TouchStart" |
control |
"размытие", "изменение", "фокус", "сброс", "изменение размера", "прокрутка", "выбор", "отправка", "увеличение" |
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" открывается в средствах разработчика рядом с веб-страницей.
В средстве "Консоль" введите следующий код и нажмите клавишу ВВОД:
monitorEvents(window, "key");Предыдущий фрагмент кода отслеживает все события клавиатуры в объекте window.
На отрисованной веб-странице нажмите любые клавиши. События клавиатуры отображаются в средстве "Консоль ":
profile([name])
profile([name]) запускает сеанс профилирования ЦП JavaScript с необязательным именем.
Чтобы завершить профилирование и отобразить результаты в средстве "Производительность ", вызовите profileEnd([name]).
Синтаксис
profile([name])
Пример
Откройте страницу, которую вы хотите профилировать, в новой вкладке или окне. Например, перейдите на страницу демонстрации медленной анимации .
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" открывается в средствах разработчика рядом с веб-страницей.
Чтобы начать профилирование, в средстве " Консоль " введите
profile("My profile), а затем нажмите клавишу ВВОД.Чтобы остановить профилирование, через некоторое время введите
profileEnd("My profile"), а затем нажмите клавишу ВВОД.Результаты профиля отображаются в средстве "Производительность ":
Вы можете создать несколько профилей одновременно, и вам не обязательно завершать каждый профиль в порядке создания. Например, следующий код создает два профиля, а затем заканчивает их в обратном порядке:
profile('A');
profile('B');
profileEnd('B');
profileEnd('A');
profileEnd([название])
profileEnd([name]) завершает сеанс профилирования ЦП JavaScript и отображает результаты в средстве "Производительность ".
Чтобы вызвать эту функцию, необходимо выполнить функцию profile([name] ).
Синтаксис
profileEnd([name])
Дополнительные сведения см. в разделе profile([name]) выше.
queryObjects(конструктор)
queryObjects(constructor) Возвращает массив объектов, которые были созданы указанным конструктором.
Область queryObjects() - это выбранный в данный момент контекст среды выполнения в консоли.
Синтаксис
queryObjects(constructor)
Пример
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" открывается в средствах разработчика рядом с веб-страницей.
Чтобы вернуть все экземпляры элементов HTML, введите
queryObjects(HTMLElement)в средстве "Консоль " и нажмите клавишу ВВОД:
Другие примеры:
- Используется
queryObjects(Promise)для возврата всех экземпляровPromiseобъектов, если ваша веб-страница используетPromiseобъекты. - Используется
queryObjects(ClassName)для возврата всех экземпляров класса,ClassNameесли ваша веб-страница использует классы JavaScript.
table(data[, columns])
table(data[, columns]) Записывает данные объекта в формате таблицы с заголовками столбцов для указанного объекта данных.
Эта функция является псевдонимом для console.table().
Синтаксис
table(data[, columns])
Пример
Чтобы отобразить список имен людей в виде таблицы, в разделе "Консоль":
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль" открывается в средствах разработчика рядом с веб-страницей.
Введите следующий код в консоли и нажмите клавишу ВВОД:
var names = { 0: { firstName: "John", lastName: "Smith" }, 1: { firstName: "Jane", lastName: "Doe" } };Приведенный выше фрагмент кода определяет объект в глобальном пространстве имен с именем
names, который содержит два свойства.Чтобы отобразить
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(объект)
values(object) Возвращает массив, содержащий значения всех свойств, принадлежащих указанному объекту.
Чтобы получить связанные ключи с теми же свойствами, см. ключи (объект) выше.
Синтаксис
values(object)
Пример
См. пример в keys(object) выше.
См. также
- Справочник по функциям консоли
-
Справочные материалы по -
console.*API объектов консоли такие функции, какconsole.log()иconsole.error().
Примечание.
Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные Google , и используемые в соответствии с условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Оригинальная страница находится здесь , автором которой является Кейси Баскес.
Эта работа предоставляется по лицензии Creative Commons Attribution 4.0 International License.