Консоль разработчика Google Chrome: десять неочевидных полезностей

Original author: Swagat Kumar Swain
  • Translation
Как с помощью консоли разработчика превратить Google Chrome в подобие текстового редактора? Какой смысл в ней приобретает знакомый многим по jQuery значок $? Как вывести в консоль набор значений, оформленный в виде вполне приличной таблицы? Если сходу ответы на эти вопросы в голову не приходят, значит вкладка Console из инструментов разработчика Chrome ещё не раскрылась перед вами во всей красе.

image

На первый взгляд, перед нами – вполне обычная JavaScript-консоль, которая годится только на то, чтобы выводить в неё логи ответов серверов или значения переменных. Я, кстати, так ей и пользовался, когда только начал программировать. Однако, со временем набрался опыта, подучился, и неожиданно для себя обнаружил, что консоль Chrome умеет много такого, о чём я и не догадывался. Хочу об этом сегодня рассказать. Да, если вы читаете сейчас не на мобильнике, можете тут же всё это и попробовать.

1. Выбор элементов DOM


Если вы знакомы с jQuery, не мне вам рассказывать о важности конструкций вроде $(‘.class’) и $(‘id’). Для тех, кто не в курсе, поясню, что они позволяют выбирать элементы DOM, указывая назначенные им классы и идентификаторы. Консоль разработчика обладает похожей функциональностью. Здесь «$», однако, отношения к jQuery не имеет, хотя делает, в сущности, то же самое. Это – псевдоним для функции document.querySelector().

Команды вида $(‘tagName’), $(‘.class’), $(‘#id’) и $(‘.class #id’) возвращают первый элемент DOM, совпадающий с селектором. При этом, если в документе доступна jQuery, её «$» данный функционал консоли перекроет.

Есть здесь и ещё одна конструкция: $$. Её использование выглядит как $$(‘tagName’) или $$(‘.class’). Она позволяет выбрать все элементы DOM, соответствующие селектору и поместить их в массив. Работа с ним ничем не отличается от других массивов. Для того, чтобы выбрать конкретный элемент, можно обратиться к нему по индексу.

Например, команда $$(‘.className’) предоставит нам массив всех элементов страницы с указанным при её вызове именем класса. Команды $$(‘.className’)[0] и $$(‘.className’)[1]  дадут доступ, соответственно, к первому и второму элементу полученного массива.


Эксперименты с командами $ и $$

2. Превращаем браузер в текстовый редактор


Вам приходилось ловить себя на мысли о том, что хорошо было бы править текст отлаживаемой веб-страницы прямо в браузере? Если да – значит вам понравится команда, показанная ниже.

document.body.contentEditable=true

После её исполнения в консоли, документ, открытый в браузере, можно редактировать без необходимости поисков нужного фрагмента в HTML-коде.

3. Поиск обработчиков событий, привязанных к элементу


В процессе отладки может понадобиться найти обработчики событий, привязанные к элементам. С помощью консоли сделать это очень просто. Достаточно воспользоваться такой командой:

getEventListeners($(‘selector’))

В результате её выполнения будет выдан массив объектов, содержащий список событий, на которые может реагировать элемент.


Обработчики событий

Для того, чтобы найти обработчик для конкретного события, можно использовать такую конструкцию:

getEventListeners($(‘selector’)).eventName[0].listener

Эта команда выведет код функции-обработчика события. Здесь eventName[0] – это массив, который содержит все события конкретного типа. Например, на практике это может выглядеть так:

getEventListeners($(‘#firstName’)).click[0].listener

В результате мы получим код функции, связанной с событием click элемента с идентификатором firstName.

4. Мониторинг событий


Если вы хотите понаблюдать за возникновением событий, привязанных к конкретному элементу DOM, консоль в этом поможет. Вот несколько команд, которые можно использовать для мониторинга событий.

  • Команда monitorEvents($(‘selector’)) позволяет организовать мониторинг всех событий, связанных с элементом, которому соответствует селектор. При возникновении события делается запись в консоли. Например, команда monitorEvents($(‘#firstName’)) позволит логировать все события, связанные с элементом, идентификатор которого – firstName.

  • Команда monitorEvents($(‘selector’),’eventName’) похожа на предыдущую, но она нацелена на конкретное событие. Здесь, помимо селектора элемента, функции передаётся и имя события. Такая команда позволит вывести в консоль данные о возникновении одного события. Например, команда monitorEvents($(‘#firstName’),’click’) выведет сведения только по событию click элемента с идентификатором firstName.

  • Команда monitorEvents($(‘selector’),[‘eventName1’,’eventName3',….]) позволяет наблюдать за несколькими выбранными событиями. Здесь в функцию передаётся строковой массив, который содержит имена событий. Например, такая команда: monitorEvents($(‘#firstName’),[‘click’,’focus’]) будет выводить в консоль сведения о событиях click и focus для элемента с идентификатором firstName.

  • Команда unmonitorEvents($(‘selector’)) позволяет прекратить мониторинг и логирование событий в консоли.

5. Измерение времени выполнения фрагмента кода


В консоли Chrome доступна функция вида console.time(‘labelName’), которая принимает в качестве аргумента метку и запускает таймер. Ещё одна функция, console.timeEnd(‘labelName’), останавливает таймер, которому назначена переданная ей метка. Вот пример использования этих функций:

console.time('myTime'); //Запускает таймер с меткой myTime
console.timeEnd('myTime'); //Останавливает таймер с меткой myTime
//Вывод: myTime:123.00 ms

Вышеприведённый пример позволяет узнать время между запуском и остановкой таймера. То же самое можно сделать внутри JavaScript-программы и найти время выполнения фрагмента кода.

Cкажем, мне нужно выяснить длительность исполнения цикла. Сделать это можно так:

console.time('myTime'); // Запускает таймер с меткой myTime
for(var i=0; i < 100000; i++){
  2+4+5;
}
console.timeEnd('mytime'); // Останавливает таймер с меткой myTime
//Вывод - myTime:12345.00 ms

6. Вывод значений переменных в виде таблиц


Предположим, у нас имеется такой массив объектов:

var myArray=[{a:1,b:2,c:3},{a:1,b:2,c:3,d:4},{k:11,f:22},{a:1,b:2,c:3}]

Если вывести его в консоли, получится иерархическая структура в виде, собственно, массива объектов. Это – полезная возможность, ветви структуры можно разворачивать, просматривая содержимое объектов. Однако, при таком подходе сложно понять, например, как соотносятся свойства похожих элементов. Для того, чтобы с подобными данными было удобнее работать, их можно преобразовать к табличному виду. Для этого служит такая команда:

console.table(variableName)

Она позволяет вывести переменную и все её свойства в виде таблицы. Вот, как это выглядит.


Вывод массива объектов в виде таблицы

7. Просмотр кода элемента


Быстро перейти к коду элемента из консоли можно с помощью следующих команд:

  • Команда inspect($(‘selector’)) позволяет открыть код элемента, соответствующего селектору, в панели Elements инструментов разработчика Google Chrome. Например, команда inspect($(‘#firstName’)) позволит просмотреть код элемента с идентификатором firstName. Команда inspect($$(‘a’)[3]) откроет код четвёртой ссылки, которая присутствует в DOM.

  • Команды вида $0, $1, $2 позволяют быстро переходить к недавно просмотренным элементам. Например, $0 откроет код самого последнего просмотренного элемента, и так далее.

8. Вывод списка свойств элемента


Если надо просмотреть список свойств элемента, консоль поможет и в этом. Здесь используется такая команда:

dir($(‘selector’))

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

9. Вызов последнего полученного результата


Консоль можно использовать как калькулятор, это, вероятно, знают все. Но вот то, что она имеет встроенные средства, позволяющие использовать в командах результаты предыдущих вычислений, известно немногим. С помощью конструкции $_ можно извлечь из памяти результат предыдущего выражения. Вот как это выглядит:

2+3+4
9 //- Результат суммирования - 9
$_
9 // Выводится последний полученный результат
$_ * $_
81 // Так как последний результат 9, получаем 81
Math.sqrt($_)
9 // Квадратный корень из последнего результата, который был равен 81
$_
9 // Снова получаем 9 – результат предыдущего вычисления

10. Очистка консоли и памяти


Если нужно очистить консоль и память, воспользуйтесь такой вот простой командой:

clear()

После нажатия на Enter чистая консоль будет готова к новым экспериментам.
Вот и всё.

11, 12, 13, 14…


Откровенно говоря, это – далеко не всё. Я показал лишь некоторые из неочевидных возможностей консоли Google Chrome. На самом деле, их намного больше. Уверен, вы сможете расширить мой список собственными находками.

Надеюсь, мой рассказ помог вам узнать о консоли Chrome что-то полезное, экономящее время, достойное стать частью повседневного арсенала веб-программиста.

А какие инструменты используете вы? Давайте-давайте, делитесь какими-нибудь приколюхами! :)
RUVDS.com
1,088.90
RUVDS – хостинг VDS/VPS серверов
Share post

Comments 59

    +8
    Спасибо за пост, инструменты разработчика в хроме действительно волшебная штука! Хотел добавить что недавно был хром-саммит и там Пол Айриш рассказывал про самые свежие фишки, в том числе и консоли https://www.youtube.com/watch?v=HF1luRD4Qmk ( вдруг кому будет интересно )
      +1
      Вау! Так $ в консоли работает даже если jQuery на странице не подключен.
        0

        Только работает совсем не так, как jQuery. Всякие штуки, типа $('.button').click() не сработают.


        Следует иметь это в виду.

        • UFO just landed and posted this here
            0

            И в самом деле. У нативного HTMLElement тоже есть метод click.


            Зато нет jQuery-специфичного .data().
            Такое уже не сработает $('.button').data()

              +1
              $ — это алиас для document.querySelector.
              $$( value ) — это алиас для [].slice.call( document.querySelectorAll( value ) ).
                +1
                Тогда уж Array.from(document.querySelectorAll(value))
                  0
                  При желании и Array.from можно считать алиасом слайса без параметров :)
                    +1
                    Насколько я понял из кода V8, Array.slice определен в сишном внутреннем классе массива, а Array.from() написан на JS и определен тут.
                    Сишный класс найти не смог, остановился тут.
          +5
          В качестве неболшого добавления:
          • Результаты выражения из пункта 1 будет удобно отображать в табличном виде, как описано в пункте 6;
          • При использовании табличного вида, можно указать подмножество колонок, которое необходимо отобразить;

          Например:
          console.table($$('.elementClass'), ['innerText', 'offsetLeft'])
          
            0
            О Файрфокса консоли написать надобно, для Силы баланса :-))
              +3
              Я проверил только что большинство из этих вещей в консоли Firefox Developers Edition. Они работают.
                +1
                Да, наверное я слишком стар, консоль firefox мне намного ближе :)
                  +3
                  Старость — это когда Firebug ближе )
                    +3
                    а я о нем и говорил, блин, да это старость не видеть firefox без fifebug
                +2

                Пункты 1, 2, 5, 6, 9 и 10 также работают и в ФФ. Пункт 7 inspect(...) в ФФ делает тоже самое, что и dir(...) в Хроме.
                А ещё, при выборе элемента в инспекторе он становится доступен как $0 в консоли (ФФ и Хром).
                А все обработчики событий (пункт 3) в ФФ можно посмотреть, если в инспекторе рядом с элементом кликнуть на кнопочку ev.

                0

                Как то я экспериментировал с Хромом и его девтулсами в качестве среды разработки. Там довольно круто сделана подсветка кода, автодополнение (хорошо видит все определения доступные в текущей области видимости и в глобальном пространстве), непосредственная близость к рантайму также интересна (рядом все профайлеры и прочие интересности). Но в целом, как IDE — не юзабельно, что очень обидно. Буквально один шаг отделяет Хром от крутейшего самодостаточного инструмента разработки фронтэнда. Интересно, почему его не делают?

                  0
                  На самом деле я тоже давно исследую тему использования хрома в качестве средства для разработки. А чего лично вам не хватает?
                    0

                    Поддержки Git (хотя-бы на уровне подсветки текущих изменений), возможности установки дополнений для подсветки всяких LESS/SASS и т.п., нормальной работы с проектом в целом (сейчас может открывать файлы из папки в списке ресурсов независимо от контекста текущей вкладки). Много всего. И основная часть касается именно странностей юзабилити, в техническом плане существующие возможности — классные.

                      0
                      Я как правило работаю в двух режимах, если можно так выразится: в полноценной IDE вроде webstorm, и там делаю реализацию задачи. А в хроме через workspaces дорабатываю ее напильником. Это позволяет отлаживать код и править его налету и зачастую сильно экономит мне время. Кстати там рабоает CMD + P с фазисерчем как в саблайме и этого как правило хватает
                        +1
                        А мне вот не хватает возможности изменить запрос и отправить его прямо во вкладке «network», как это реализовано в ФФ. Очень удобная вещь.
                      0
                      Редактор Atom же. Это натуральный Chromium, переделанный под IDE.
                        0

                        Все редакторы, использующие под капотом Electron, с которыми я имел дело (Atom, Brackets, VS Code и т. п.) — имеют ряд существенных отличий от девтулзов: они используют собственный рендер кода (иногда довольно тормозной), отделены от рантайма и DOMa непосредственно, не могут нормально ничего дебажить, не видят сетевой активности и т. д. Это просто текстовые редакторы.

                      +9
                      Дополню, можно искать элемент по xpath при помощи $x('xpath')
                        0
                        Недавно открыл для себя возможность редактировать стили из проекта прямо в хроме. При том что сам веб сервис задеплоен в war контейнере, хром позволяет замапить стили с веб-сервиса на локальные файлы, так что все исправления происходят прямо в папке проекта. Сам хром тут же подхватывает эти изменения.

                        И самое удивительное — то, что стили у меня в SCSS, а Хром в редакторе и инспекторе открывает корректный scss файл.
                          –1
                          Ну так у вас у scss есть мапа, ничего удивительного.
                            0
                            если не сложно, подскажите как этот настроить
                              0

                              Я настраивал по обучалке Sass Source Maps + Chrome = Magic. Чуть более подробно — в справке к devtools.
                              Если вкратце:


                              • запускаем watcher который будет следить за scss и конвертировать их в css (включая ссылку на .map)
                              • нужно добавить папку с scss в хром как локальный ресурс
                              • настроить mapping соответствия локального ресурса удалённому.
                              • Важно: все URL-ы на css должны быть без параметров (query string) — т.е. без ?key=value. Это важно. Без этого mapping не будет работать. Если css запрашиваются с параметрами (у меня так было), то на такой случай есть плагин для хрома, позволяющий убрать параметры). Сходу не нашёл — если важно, пишите — посмотрю, когда буду на работе.
                            +4

                            Еще пара плюшек:


                            Плюшка №1:


                            var foo = { bar: [1, 2, 3] };
                            copy(foo);

                            Копирование содержимого переменной из консоли в буфер обмена. Очень полезная плюшка, когда нужно скопировать модельку или целый гигантский JSON. На выходе строка с отступами (отформатированная).


                            Плюшка №2:


                            console.group();
                            console.log('foo');
                            console.log('bar');
                            console.log('baz');
                            console.groupEnd();
                            console.log('foobar');

                            Плюшка №3:


                            console.count(), проще прочитать: https://developer.mozilla.org/en-US/docs/Web/API/Console/count

                              0

                              Можно еще про горячую клавишу Chrome DevTools добавить, просто must have, экономит массу времени: Ctrl + O в инструментах разработчика, и вводим название или путь до файла для быстрого перехода к нему.


                              На хабре, для примера: жмем F12, Ctrl + O, вводим app.main.js, жмем Enter.

                              –1
                              Давайте и про debugger напишем, чоужтам :)
                                +1
                                Вот что реально понравилось это обратиться по $0 к элементу, выбранному в инспекторе.
                                  +1
                                  Проверил: $0 работает даже в DragonFly.
                                  Что ещё больше добавило уверенности в том, что слова «Google Chrome» в названии для половины примеров явно излишни.
                                  –1
                                  В Firebug Мозиллы мне больше понравилась только 3Д модель,
                                  все остальные плюсы для отладки были у Хрома:
                                  Юзабилити, удобное тестирование адаптивности, и в целом понятный интерфейс.
                                  У Гугла есть и грешок с монополией на андройде.
                                  Благо, что все больше практичных людей покупают китайские флагманы.
                                    0
                                    Да, если вы читаете сейчас не на мобильнике, можете тут же всё это и попробовать.

                                    Ожидал, что вместо `className`, `tagName`, `id` будет реальные классы, теги и id, что есть в статье на Хабре :).
                                      0
                                      clear()

                                      Куда удобнее использовать комбинацию Ctrl + L, чем писать столько лишних букв, да и тогда консоль будет содержать:
                                      Console was cleared
                                      undefined
                                        0

                                        Ctrl + L в хроме только очищает вывод, а не удаляет переменные из памяти

                                          0
                                          Обычно этого и хотят те, кто хочет очистить консоль. Например я.
                                        0

                                        Мало кто знает о такой возможности (поиск элемента по xpath):


                                        $x('xpath')
                                          0
                                          Забыли ещё, что просто $ указывает на текущий выделенный в elements panel элемент. Например:

                                          $.classList.toggle('hide');
                                          
                                            +1
                                            sorry $0, конечно.
                                            0
                                            При этом, если в документе доступна jQuery, её «$» данный функционал консоли перекроет.

                                            Двусмысленно. Можно прочесть, как
                                            «её «$» будет перекрыт функционалом консоли»
                                            так и
                                            «функционал консоли будет перекрыт её «$»».

                                            P.S. А за познавательную статью большое спасибо!
                                              +1
                                              Ещё в хроме есть очень полезная возможность отладки html мобильных приложений и мобильных версий веб сайтов, прямо на реальном android-устройстве, а не только через эмуляцию. Подключаем по USB смартфон или планшет, выбираем «отладка по USB», далее в хроме открываем страницу по адресу: chrome://devices/, на устройстве открываем свой сайт и можем инспектировать его, как хотим. Подробнее: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
                                                0
                                                Очень классно!!! Спасибо огромное))) Особенно понравилось: document.body.contentEditable=true!!!
                                                  0

                                                  Век живи — век учись: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable — поддерживается во всех браузерах, а появилось ещё в IE 6. Почти все WYSIWYG-редакторы в вебе на нём основаны.

                                                    0
                                                    Спасибо, очень здоровская информация и подсказка идеи реализации редактора. Просто веб разработкой около года занимаюсь и постепенно открываю для себя много приятных мелочей :)
                                                • UFO just landed and posted this here
                                                    0
                                                    Познавательно, большое спасибо)
                                                    особенно про обработчики событий. Думал что в хроме этого нет
                                                      0
                                                      А поделитесь тогда тайными знаниями кто-то, кто знает, как в Фоксе (Инструментах разработчика) очистить консоль комбинацией или командой, поскольку clear() не работает а комбинация CTRL+L ранее работала а после какого-то обновления перестала.
                                                        0

                                                        версия 50.0 — что в инструментах, что в FireBug команда "clear()" работает нормально

                                                          0
                                                          Видимо я ранее что-то не так делал, в любом случае спасибо
                                                        0
                                                        Ого, при contentEditable даже картинки можно перемещать. Круто!
                                                          0
                                                          Вот бы эту и подобную инфу где-то опубликовать ввиде cheat sheet — что бы было очень компактно, но информативно, ну и редактировать по ходу добавления новой информации…
                                                          Может есть уже какой-то ресурс?
                                                            0

                                                            Сегодня наткнулся. В закладке Sources (редакторе кода) Ctrl+D — работает так же как и в Sublime Text — multiselect.

                                                              0
                                                              $(‘id’).

                                                              А решетку?
                                                                0
                                                                Похоже, все 10 пунктов работают также и в Safari (попробовано на версии 10.0.1).
                                                                  –1
                                                                  При нажатии на «просмотреть код» в хроме происходит следующая несуразь:
                                                                  сначала открывается консоль на нужном элементе, затем перезагружается страница вместе с кодом в консоли. Голову сломал на тему как отменить эту перезагрузку :(

                                                                  Only users with full accounts can post comments. Log in, please.