Веб-Консоль Помощь

Команды

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

$()

Ищет CSS-селектор, возвращая первый найденный элемент. Эквивалентно document.querySelector() или же вызывается функция $, в случае, если таковая найдена на странице.

$$()

Ищет CSS-селектор, возвращая перечень соответствующих ему DOM-узлов. Это упрощённый вариант, используемый вместо document.querySelectorAll().

Начиная с билда Firefox 41 этот метод больше не является упрощением для document.querySelectorAll(), а наоборот возвращает массив элементов.

$0

Ныне исследуемый элемент страницы.

$_

Появилась в Firefox 39. Хранит результат последнего выражения, выполненного через командную строку. Например, если вы введёте "2+2 <enter>", затем "$_ <enter>", то консоль ответит "4".

$x()

Оценивает XPath-выражение и возвращает массив соответствующих ему узлов.

keys()

Задаёт объект, возвращает перечень ключей (или имён свойств) характерных объекту. Является упрощённым вариантом Object.keys.

values()

Задаёт объект, возвращает перечень значений объекта; является дополнением для keys().

clear()

Очищает область вывода консоли.

inspect()

Задаёт объект, открывает инспектор объектов.

pprint()

Форматирует указанные значения до читаемого вида; полезно для дампа содержимого объектов и массивов.

help()

Показывает текст помощи. На самом деле (вот восхитительный пример рекурсии) он приведет вас к этой странице.

cd()

Переключает механизм оценки контекста JavaScript к другому айфрейму, имеющемуся на странице. Смотрите страницу работа с айфреймами.

copy()

Появилась в Firefox 38. Копирует аргумент в клипборд. Если аргумент является строкой, то он копируется как есть. Если аргумент является DOM-узлом, то копируется его outerHTML. Можно также использовать функцию JSON.stringify, которая также вызовет аргумент и скопирует его значение в клипборд.

clearHistory()

Появилась в Firefox 39. Как и любая другая командная строка, Веб-консоль помнит введённые вами команды. Используйте функцию для очистки истории командной строки.

Пожалуйста, обратитесь к тексту API консоли для получения большей информации о записи контента.

Примеры

Пример: Смотрим на содержимое DOM-узлов

Допустим, у вас есть DOM-узел с ID "title". На самом деле такой ID есть и у страницы, которую вы сейчас читаете, т.е. вы можете открыть Веб-консоль и попробовать прямо сейчас.

Давайте посмотрим на содержимое этого узла, используя функции: $() и inspect()

inspect($("#title"))

Автоматически откроется окно объектного инспектора, показывающее содержимое DOM-узла, соответствующего CSS-селектору "#title", являющемуся элементом ID "title".

Пример: Дамп содержимого DOM-узла

Это нормально и хорошо, если вы столкнулись с какими-то проблемами, используя браузер, но, давайте представим, что вы делаете удалённую отладку для пользователя и должны посмотреть на содержимое узла. В таком случае, ваш пользователь может открыть Веб-консоль, сделать дамп содержимого узла, затем скопировать текст получившегося лога, и отправить его вам по электронной почте, используя для всех своих действий функцию pprint()

pprint($("#title"))

Консоль изрыгнёт содержимое узла, так что, вы сможете взглянуть на него. Конечно, полезней использовать функцию не для DOM-узлов, но вы уже поняли идею...