Консоль инструментов разработчика Chrome — это, вероятно, одно из самых широко используемых и самых полезных специализированных средств браузера. Консоль даёт программисту множество интересных возможностей. Она помогает в отладке, профилировании и мониторинге кода страниц.
![](https://habrastorage.org/webt/ua/3m/ci/ua3mciz45ld1qep-j9gckybgbxg.png)
Материал, перевод которого мы сегодня публикуем, посвящён рассказу о некоторых возможностях консоли Chrome, которые известны не так широко, как они того заслуживают.
Функция
Функция
![](https://habrastorage.org/getpro/habr/post_images/cf9/623/860/cf9623860a789c26dc6b760602df30ea.png)
Использование функции monitor
Функция
Если после этого вызывать
![](https://habrastorage.org/getpro/habr/post_images/49d/241/c99/49d241c9973018ea2ff8d92d880d51bf.png)
Вызов функции, мониторинг которой отключён, не приводит к выводу в консоль сведений об этом вызове
Схема использования функции
Эта функция позволяет отслеживать возникновение событий объектов и выводит в консоль сведения об этих событиях.
Предположим, на странице есть кнопка, описываемая следующим кодом:
Начнём отслеживать событие
Если после начала наблюдения за событием
![](https://habrastorage.org/getpro/habr/post_images/3b4/02f/642/3b402f6425de1d83efc87f9cc7829d6a.png)
Кнопка и запуск мониторинга её события click
Мониторить можно и несколько событий, передавая функции
Теперь под наблюдением находятся события
![](https://habrastorage.org/getpro/habr/post_images/75a/6af/57c/75a6af57c6cb9cf00de383e83e857e04.png)
Мониторинг событий кнопки click и mouseover
Можно организовывать мониторинг групп событий:
Строка
![](https://habrastorage.org/getpro/habr/post_images/6d9/5bf/265/6d95bf265450efd236a851e7da0e7833.png)
Мониторинг событий кнопки, связанных с нажатием на неё и с мышью
Конечно, функция
Функция
Предположим, мы решили отслеживать нажатия на кнопку:
В результате при щелчках по кнопке сведения об этих событиях попадают в консоль. Для того чтобы прекратить мониторинг, нужна такая конструкция:
Теперь система перестаёт мониторить событие
![](https://habrastorage.org/getpro/habr/post_images/aab/aa0/44b/aabaa044bf4635e09712812eaf9d7d0f.png)
После отказа от мониторинга события click отчёты о щелчках по кнопке перестают попадать в консоль
Конструкция
Предположим, мы ввели в консоли выражение
Потом мы ввели и выполнили выражение
Оказалось, что мы выполнили два выражения, самым свежим из которых является
![](https://habrastorage.org/getpro/habr/post_images/5fd/9c7/a38/5fd9c7a38ab24e7dd04889fffcfba984.png)
Использование конструкции $_
Функция
Выполним, например, такую команду:
Это приведёт к копированию в буфер обмена строки
![](https://habrastorage.org/getpro/habr/post_images/343/d6d/3db/343d6d3db821ca9b0907c425f68df9a7.png)
Программное копирование данных в буфер обмена
Функция
Функция
![](https://habrastorage.org/getpro/habr/post_images/dc2/9cd/e61/dc29cde611d5d1c21a0aa4aab610ec57.png)
Использование функции keys
Функция
![](https://habrastorage.org/getpro/habr/post_images/bcf/42a/e02/bcf42ae02425630b210b16a63171cbb3.png)
Использование функции values
Функция
Предположим, на странице имеется такой код:
Этот код описывает кнопку и три события:
Вызовем в консоли следующую команду:
![](https://habrastorage.org/getpro/habr/post_images/226/c16/86c/226c1686c060f2cbebcd60010a74e0f3.png)
Сведения об обработчиках событий кнопки
У объекта, выданного после выполнения команды
Функция
Предположим, на странице есть следующий код:
Этот код описывает четыре кнопки.
Выполним теперь такую команду:
Ниже показано то, что попадёт в консоль после её выполнения.
![](https://habrastorage.org/getpro/habr/post_images/e36/2fb/343/e362fb343b916535f393282de1984fa1.png)
Результат выполнения команды $(«button»)
Как видно, команда возвратила кнопку
Например, для того, чтобы узнать идентификатор кнопки, можно воспользоваться такой конструкцией:
![](https://habrastorage.org/getpro/habr/post_images/051/870/921/0518709215bd2cc0e1e62c33a7c8b825.png)
Выяснение идентификатора кнопки
Пользуясь функцией
Предположим, кнопки
Для выбора первой кнопки из тех, что вложены в
![](https://habrastorage.org/getpro/habr/post_images/8bd/77d/e09/8bd77de0959c51d15d1847214a45b281.png)
Обращение к элементу, вложенному в другой элемент
Как видно, теперь
Функция
Предположим, на странице, как и в предыдущих примерах, есть четыре кнопки.
Вызовем следующую команду:
![](https://habrastorage.org/getpro/habr/post_images/7fd/633/232/7fd6332329cc3313ea18484a275f4a2d.png)
Использование функции $$
После вызова
Элементы можно выбирать и из указанного при вызове
![](https://habrastorage.org/getpro/habr/post_images/2fa/bd4/60a/2fabd460a1ae663ff19cef2000f48f35.png)
Использование функции $$ для выбора элементов, вложенных в другой элемент
Консоль Chrome — полезный инструмент. По мере выхода новых версий Chrome расширяются и возможности его консоли. Поэтому полезно периодически заглядывать сюда в поиске чего-то нового и интересного.
Уважаемые читатели! Какими средствами консоли Chrome вы пользуетесь чаще всего?
![](https://habrastorage.org/files/1ba/550/d25/1ba550d25e8846ce8805de564da6aa63.png)
![](https://habrastorage.org/webt/ua/3m/ci/ua3mciz45ld1qep-j9gckybgbxg.png)
Материал, перевод которого мы сегодня публикуем, посвящён рассказу о некоторых возможностях консоли Chrome, которые известны не так широко, как они того заслуживают.
Функция monitor
Функция
monitor
используется для организации мониторинга других функций. В частности, она позволяет узнать о том, когда некая функция была вызвана, и о том, с какими параметрами она была вызвана. Рассмотрим пример (его код вводится в консоли Chrome):function traceFunc (arg) { }
monitor(traceFunc)
Функция
traceFunc
передаётся функции monitor
в качестве аргумента. Теперь, когда функция traceFunc
вызывается, мы получим уведомление об этом (опять же, в консоли):traceFunc(90)
function traceFunc was called with arguments: 90
![](https://habrastorage.org/getpro/habr/post_images/cf9/623/860/cf9623860a789c26dc6b760602df30ea.png)
Использование функции monitor
Функция unmonitor
Функция
unmonitor
позволяет отключить мониторинг функции, наблюдение за которой ранее было начато с использованием функции monitor
. Для того чтобы прекратить мониторинг функции traceFunc
, воспользуемся следующей конструкцией:unmonitor(traceFunc)
Если после этого вызывать
traceFunc
, то никаких уведомлений в консоль выведено не будет.traceFunc(90)
![](https://habrastorage.org/getpro/habr/post_images/49d/241/c99/49d241c9973018ea2ff8d92d880d51bf.png)
Вызов функции, мониторинг которой отключён, не приводит к выводу в консоль сведений об этом вызове
Функция monitorEvents
Схема использования функции
monitorEvents
выглядит так:monitorEvents(object,[,events])
Эта функция позволяет отслеживать возникновение событий объектов и выводит в консоль сведения об этих событиях.
Предположим, на странице есть кнопка, описываемая следующим кодом:
<button id="button">Button</button>
Начнём отслеживать событие
click
этой кнопки:monitorEvents(button, "click")
Если после начала наблюдения за событием
click
щёлкнуть по кнопке — в консоль будут выведены сведения о событии.![](https://habrastorage.org/getpro/habr/post_images/3b4/02f/642/3b402f6425de1d83efc87f9cc7829d6a.png)
Кнопка и запуск мониторинга её события click
Мониторить можно и несколько событий, передавая функции
monitorEvents
, в качестве второго аргумента, массив:monitorEvents(button, ["click", "mouseover"])
Теперь под наблюдением находятся события
click
и mouseover
. В результате в консоль попадают сообщения и о нажатиях на кнопку, и о том, что над ней провели мышью.![](https://habrastorage.org/getpro/habr/post_images/75a/6af/57c/75a6af57c6cb9cf00de383e83e857e04.png)
Мониторинг событий кнопки click и mouseover
Можно организовывать мониторинг групп событий:
monitorEvents(button, ["click", "mouse"])
Строка
mouse
— это универсальный идентификатор группы событий, связанных с мышью. Например — mouseover
, mousemove
, mouseout
. Как и в случае с подпиской на конкретные события, подписка на универсальный идентификатор событий приведёт к выдаче уведомлений при возникновении таких событий.![](https://habrastorage.org/getpro/habr/post_images/6d9/5bf/265/6d95bf265450efd236a851e7da0e7833.png)
Мониторинг событий кнопки, связанных с нажатием на неё и с мышью
Конечно, функция
monitorEvents
применима и к другим объектам, а не только к кнопкам. То же самое касается и событий, за которыми с её помощью можно наблюдать. Это — не только click
и события мыши.Функция unmonitorEvents
Функция
unmonitorEvents
позволяет отменить наблюдение за событиями объекта, начатое функцией monitorEvents
.Предположим, мы решили отслеживать нажатия на кнопку:
monitorEvents(button, "click")
В результате при щелчках по кнопке сведения об этих событиях попадают в консоль. Для того чтобы прекратить мониторинг, нужна такая конструкция:
unmonitorEvents(button, "click")
Теперь система перестаёт мониторить событие
click
кнопки.![](https://habrastorage.org/getpro/habr/post_images/aab/aa0/44b/aabaa044bf4635e09712812eaf9d7d0f.png)
После отказа от мониторинга события click отчёты о щелчках по кнопке перестают попадать в консоль
Конструкция $_
Конструкция
$_
позволяет обратиться к результату последнего выражения, выполненного в консоли.Предположим, мы ввели в консоли выражение
2 + 2
и выполнили его. Это дало нам 4
.Потом мы ввели и выполнили выражение
3*2
. Это дало нам 6
.Оказалось, что мы выполнили два выражения, самым свежим из которых является
3*2
. Если теперь ввести в консоль $_
и нажать Enter
— выведется результат выражения 3*2
, то есть — 6
.![](https://habrastorage.org/getpro/habr/post_images/5fd/9c7/a38/5fd9c7a38ab24e7dd04889fffcfba984.png)
Использование конструкции $_
Функция copy
Функция
copy
позволяет копировать данные, переданные ей, в буфер обмена.Выполним, например, такую команду:
copy("nnamdi")
Это приведёт к копированию в буфер обмена строки
nnamdi
. Для того чтобы это проверить — выполните в консоли вышеприведённую команду, а потом попробуйте вставить то, что есть в буфере обмена, в адресную строку браузера. У вас должно получиться нечто, напоминающее следующий рисунок.![](https://habrastorage.org/getpro/habr/post_images/343/d6d/3db/343d6d3db821ca9b0907c425f68df9a7.png)
Программное копирование данных в буфер обмена
Функция clear
Функция
clear
позволяет очистить историю выполнения команд в консоли. Эта функция полезна в тех случаях, когда консоль оказывается переполненной различными выведенными в неё материалами, а вам хотелось бы убрать из неё всё то, что в неё выведено.Функция keys
Функция
keys(object)
, так же, как и метод Object.keys
, возвращает массив ключей свойств объекта:const obj = {prop1: 0, prop2: 1, prop3: 2}
keys(obj)
![](https://habrastorage.org/getpro/habr/post_images/dc2/9cd/e61/dc29cde611d5d1c21a0aa4aab610ec57.png)
Использование функции keys
Функция values
Функция
values
похожа на метод Object.values
. Она возвращает массив значений свойств объекта.const obj = {prop1: 0, prop2: 1, prop3: 2}
values(obj)
![](https://habrastorage.org/getpro/habr/post_images/bcf/42a/e02/bcf42ae02425630b210b16a63171cbb3.png)
Использование функции values
Функция getEventListeners
Функция
getEventListeners
возвращает сведения о событиях, зарегистрированных для объекта. Например, если зарегистрировать для кнопки некие события — функция getEventListeners
, которой передали эту кнопку, возвратит объект, содержащий, в виде массивов, описание событий кнопки.Предположим, на странице имеется такой код:
<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)
![](https://habrastorage.org/getpro/habr/post_images/226/c16/86c/226c1686c060f2cbebcd60010a74e0f3.png)
Сведения об обработчиках событий кнопки
У объекта, выданного после выполнения команды
getEventListeners(button)
, имеются свойства click
, mousedown
и mouseover
, имена которых соответствуют именам событий, обработчики которых назначены кнопке. В свойствах содержатся массивы объектов, содержащих подробные сведения о событиях.Функция $
Функция
$
возвращает первый из элементов DOM, удовлетворяющих переданному ей селектору. Схема вызова функции выглядит так:$(elementName, [,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")
Ниже показано то, что попадёт в консоль после её выполнения.
![](https://habrastorage.org/getpro/habr/post_images/e36/2fb/343/e362fb343b916535f393282de1984fa1.png)
Результат выполнения команды $(«button»)
Как видно, команда возвратила кнопку
Button1
. Эта кнопка является первым элементом button
в документе. После того, как в нашем распоряжении оказывается DOM-узел элемента, мы можем обращаться к его свойствам и методам.Например, для того, чтобы узнать идентификатор кнопки, можно воспользоваться такой конструкцией:
$("button").id
![](https://habrastorage.org/getpro/habr/post_images/051/870/921/0518709215bd2cc0e1e62c33a7c8b825.png)
Выяснение идентификатора кнопки
Пользуясь функцией
$
, можно указывать узел DOM, первый элемент которого нас интересует.Предположим, кнопки
Button2
, Button3
и Button4
из предыдущего примера поместили в элемент <div>
:<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>
Для выбора первой кнопки из тех, что вложены в
<div>
, можно воспользоваться такой командой:$("button", document.querySelector("div"))
![](https://habrastorage.org/getpro/habr/post_images/8bd/77d/e09/8bd77de0959c51d15d1847214a45b281.png)
Обращение к элементу, вложенному в другой элемент
Как видно, теперь
$
возвращает кнопку Button2
, так как это — первый элемент button
, вложенный в элемент <div>
Функция $$
Функция
$$
работает так же, как вышеописанная функция $
. Но она возвращает все подходящие элементы. Её вызывают так:$$(element, [,node])
Предположим, на странице, как и в предыдущих примерах, есть четыре кнопки.
Вызовем следующую команду:
$$("button")
![](https://habrastorage.org/getpro/habr/post_images/7fd/633/232/7fd6332329cc3313ea18484a275f4a2d.png)
Использование функции $$
После вызова
$$
, как видно на предыдущем рисунке, в нашем распоряжении окажется массив элементов button
.Элементы можно выбирать и из указанного при вызове
$$
узла DOM. Например, если на странице имеется несколько кнопок, заключённых в <div>
, мы можем, для выбора всех этих кнопок, воспользоваться такой конструкцией:$$("button", document.querySelector("div"))
![](https://habrastorage.org/getpro/habr/post_images/2fa/bd4/60a/2fabd460a1ae663ff19cef2000f48f35.png)
Использование функции $$ для выбора элементов, вложенных в другой элемент
Итоги
Консоль Chrome — полезный инструмент. По мере выхода новых версий Chrome расширяются и возможности его консоли. Поэтому полезно периодически заглядывать сюда в поиске чего-то нового и интересного.
Уважаемые читатели! Какими средствами консоли Chrome вы пользуетесь чаще всего?
![](https://habrastorage.org/files/1ba/550/d25/1ba550d25e8846ce8805de564da6aa63.png)
SepiS
monitor не поддерживает отслеживание по ссылкам на функцию, только по именам
То есть, например, он не будет работать для анонимных функций:
Perlovich
Неправда.
SepiS
Хорошо, значит отслеживает только для именованных функций.
MorskoyZmey
Вот так отслеживает:
sanReal
Еще полезная функция: $0 содержит ссылку на элемент, выбранный на вкладке Elements
deamondz
есть ещё $1, $2,… для предыдущих выбранных элементов
inoyakaigor
Из всех этих многочисленных советов по работе с консолью самый полезный это то, что если поставить код на паузу в дебаггере, то в консоли доступен весь текущий контекст: и функции которая сейчас выполняется и всё, что выше.
Dron007
А также можно инспектировать исчезающие DOM-элементы.
namikiri
Плюс, если «замерли» в дебаггере, можно нажать Esc, и, не покидая отладчика, вызвать консоль.
sanReal
Бывает, что нужно посмотреть стили элемента, которые видно только при наведении, и флаг :hov не помогает.
Можно в консоли выполнить функцию
Навести курсор на нужный элемент и подождать, когда сработает debugger.
Доступ к Inspect element будет, но JS код не будет выполняться
yakimchuk-ry
Есть еще один вариант, нажать F8 когда открыты инструменты разработчика.
sanReal
Для большинства случаев да. Но у меня был кейс, когда нужно было поймать состояние, которое сбрасывается по событию blur на window. Ваш вариант, к сожалению, не сработает (
Jabher
сработает — если именно f8 нажать, а не тащить мышь к дебаггеру, все ок
serginho
Можно на вкладке Elements кликнуть правой клавишей мыши по елементу и выбрать Force state -> :hover
noodles
часто непонятно на чём именно нужно установить ховер (когда большая вложенность из тегов)
da411d
Круто!
Ожидал что-то юанальное типа редко используемых функций console.table и $(...), но эти фишки реально интересные и полезные.
Andrey_Dolg
Спасибо. Консоль использую часто, но почти всё в новинку и очень полезно. =)
xState_level80
Многие недооценивают возможности и кейсы комманды copy(). Недавно был случай когда потребовалось часто копировать из консоли огромный json объект без выделения. Рецепт оказалася прост.
1) Правый клик по объекту — нажимаем Strore as global variable (выдаст переменную temp1, в которой сохранился сам объект)
2) copy(temp1) и вуаля готово
ArVaganov
Еще одна интересная фича, про которую почему-то мало знают:
Включит режим редактирования текста прямо в разметке на странице.
off, соответственно – выключит.
Можно проверять макеты на различный текст/или создавать скриншоты веб-фейков не залезая в document. ?\_(?)_/?.
kunix
Второй аргумент для monitorEvents(...):
Vasek18
В примерах используется переменная button. Разве не надо её как-то объявить/получить перед использованием?
И разве функция "$" не повторяет функционал аналога в jQuery?
sumanai
Нет.