13,8 тыс подписчиков

10 API консольных утилит Chrome

15 июля 202015 июл 2020

4 мин

Оглавление

1. monitor
2. unmonitor
3. monitorEvents

Источник: Nuances of Programming

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 для события.

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

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

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

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

11. $(elementName, [,node])

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

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

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

$(“button”)

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

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