Chrome

1. monitor

Используется для мониторинга функции:

function traceFunc (arg) { }

monitor(traceFunc)

Функция traceFunc передается в качестве аргумента в monitor. Теперь при каждом вызове traceFunc на мониторе будет показано, что она была вызвана.

traceFunc(90)

функция traceFunc была вызвана с аргументами: 90

2. unmonitor

Отключает мониторинг для указанной функции. Для этого нужно выполнить следующее:

unmonitor(traceFunc)

Теперь функция monitor не сообщает о вызове traceFcunc:

traceFunc(90)

3. monitorEvents

Структура выглядит следующим образом:

monitorEvents(object,[,events])

Эта функция отслеживает и регистрирует выходные данные при вызове события для объекта.

<button id="button">Button</button>

Теперь при вводе следующей функции в консоль:

monitorEvents(button, “click”)

Она будет мониторить событие «click»: при нажатии кнопки функция будет регистрировать отчет в консоли, сообщая, что она была нажата. Также можно отслеживать различные события объекта:

monitorEvents(button, [“click”, “mouseover”])

Эта функция контролирует события «click» и «mouseover» в button. При наведении или нажатии мыши на кнопку в консоли будет появляться отчет.

Также можно отслеживать общие события на объекте:

monitorEvents(button, [“click”, “mouse”])

«mouse» — это общая часть названия для событий мыши:

  • mouseover
  • mouseout

Оно будет отслеживать событие «click» и перечисленные выше события мыши для кнопки. Таким образом, когда происходит событие click или какое-либо из событий mouse, в консоли будет появляться журнал:

Помимо этого, будут регистрироваться такие события клавиш, как keyup, keydown и т. д.

4. unmonitorEvents

Отключает мониторинг событий, установленный с помощью monitorEvents для объекта.

monitorEvents(button, “click”)

Эта функция отслеживает событие click для button. Нажатие на кнопку регистрирует отчет в консоли.

Запуск unmonitorEvents(button, “click”) отключает мониторинг события click. Теперь при нажатии на кнопку отчет в консоли не регистрируется.

5. $_

Вызывает последнее выполненное выражение в консоли.

При вводе и выполнении «2 + 2» в консоли мы получаем 4 — это результат оценки выражения.

Затем при вводе и выполнении «3 * 2» мы получаем 6.

Мы выполнили два выражения, из которых 3 * 2 было последним. Теперь при введении и выполнении $_ появится результат 3 * 2, который является последним выполненным выражением в консоли.

6. copy

Эта функция копирует переданные ей данные в буфер обмена. Например, copy(«nnamdi») копирует строку «nnamdi» в буфер обмена. Чтобы убедиться в этом, перейдите в адресную строку браузера, щелкните правой кнопкой мыши и нажмите «Вставить»:

7. clear

Очищает историю выполнения консоли.

Введите следующие функции:

> 2 + 2
4
> 3 * 2
6

История выполнения консоли выглядит так: (2+2) 4 и (3*2) 6. Ввод clear() в консоль очистит историю.

clear()

Теперь мы не можем ссылаться ни на одну из историй выражений.

8. keys(object)

Как и Object.keys, эта функция возвращает ключи свойств объекта в массиве:

9. values(object)

Как и Object.values, эта функция возвращает значения свойств объекта в массиве:

10. getEventListeners(object)

Эта функция возвращает события, зарегистрированные в объекте. Например, при регистрации событий click, mouseover, mouseout в button она возвращает объект с именами событий в качестве свойств. Эти свойства представляют собой массивы, которые содержат функцию listener для события.

Для примера возьмем следующий сценарий:

<button id="button" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button</button>
<script>
	function clickHandler() {
	}
	function mousedownHandler() {
	}
	function mouseoverHandler() {
	}
</script>

У кнопки есть три события: click, onmousedown и onmouseover с функциями-слушателями clickHandler, mousedownHandler, mouseoverHandler.

Запуск getEventListeners(button) возвращает следующее:

Мы видим, что у объекта есть свойства, а click, mousedown, mouseover — это имена событий, зарегистрированных в button. Свойства — это массивы, которые содержат объекты. При развертывании объектов становится ясно, что они являются функциями-слушателями для событий, зарегистрированных в button.

11. $(elementName, [,node])

Эта функция возвращает первый узел DOM указанного элемента.

Допустим, у нас есть следующий сценарий:

<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>

Здесь четыре кнопки: Button1, Button2, Button3 и Button4. Чтобы выбрать первую кнопку, запускаем следующую функцию:

$(“button”)

В результате возвращается Button1, поскольку это первый элемент Button в документе. Помимо узла DOM button мы можем получить доступ к свойствам и методам элемента.

Здесь мы использовали ссылку на узел DOM Button1 для доступа к его id:

Указать узел также можно при выборе первого элемента:

<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<div>
	<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
	<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
	<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
</div>

Кнопки 2, 3, 4 вложены в узел div. Выбрать первую кнопку в узле div можно с помощью следующей команды:

$("button", document.querySelector("div"))

Получаем Button2 — первый элемент button в узле div.

12. $$(element, [,node]) — двойной доллар

Работает как единичный доллар $, но возвращает все указанные элементы.

Например:

<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>

$$(“button”) возвращает узлы button 1, 2, 3, 4 в массив.

Также можно получить все указанные элементы из определенного узла:

<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<div>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
</div>

Кнопки 2, 3, 4 вложены в узел div. Чтобы выбрать их все, выполняем следующую команду:

$$(“button”, document.querySelector(“div”))

Получаем кнопки 2, 3, 4, поскольку они находятся внутри узла div.

Заключение

Есть еще множество других функций, таких как:

  • table
  • debug
  • undebug
  • $x()
  • dir
  • dirxml
  • profile() profileEnd()
  • inspect
  • $0 ~ $X

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

Читайте также:


Перевод статьи Chidume Nnamdi 🔥💻🎵🎮: 10 Chrome Console Utility APIs You Probably Never Used