10 API консольных утилит 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
Комментарии