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

Книга 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

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


752   0  
полезное

Comments

    Ничего не найдено.
Click here to cancel reply.