DevTools

Docs

Google Chrome распространяется по нескольким каналам обновлений.

  • Chromium
    Chromium это не Google Chrome! Проект Хромиум - свободный открытый проект по созданию быстрого и легкого браузера. Обновляется практически постоянно. В день может выходить сразу несколько относительно рабочих версий. Автообновляться не умеет. Обычным пользователям не рекомендуется.
  • Google Chrome Canary
    Канарейка это по сути ежедневная сборка Google Chrome из текущих версий Chromium. Соответственно не стабильна. Зато устанавливается в систему независимо от прочих версий Хрома и умеет автообновляться. Идеально для разработчиков и просто тех, кто хочет первым видеть все изменения в браузере. Для постоянной работы не рекомендуется.
  • Google Chrome Dev
    Версия для разработчиков (тестовая/dev). После нескольких версий Канареек все изменения выпускают в виде тестовых dev сборок. Обновляется когда как: иногда раз в 2 дня, а иногда забывают про нее на неделю. У этой версии меньше всего смысла: для постоянной работы лучше не использовать (не стабильна), а для тестирования новых фишек лучше подходит Канарейка.
  • Google Chrome Beta
    Относительно стабильная сборка, которую выпускают в свет искать возможные ошибки перед релизом стабильной. В бета версии уже сформирован весь комплект основных изменений, т.е. от версии к версии лишь исправляют ошибки, но не добавляют ничего нового.
  • Google Chrome Stable
    Стабильная версия Хрома получается из бета версии, в которой не нашли ошибок. В случае нахождения ошибок в стабильной - оперативно автообновляют. Согласно графику, новый стабильный Google Chrome с новыми возможностями и функциями должен выходить раз в 6 недель. Рекомендуется для обычных пользователей.

Экспериментируем с цветами

Когда вы экспериментируете с цветами, вы можете использовать пипетку, чтобы выбрать любой элемент на странице или выбрать из палитры цветов, которые уже используются на странице. Или выбрать один из цветов material design. Кликаем на заданный цвет кода и открывается пипетка.

Просмотр отрендеренных шрифтов

Иногда очень сложно сказать, какой шрифт на самом деле был отрендерен. В нижней части Computed вкладки панели инструментов, вы можете увидеть какой шрифт используется, даже если его названия нет в списке font-family.

Редактируем любой текст на странице

Если у вас есть меню фиксированной ширины и вы хотите узнать, насколько длинный текст туда поместится и увидеть переносы слов. Переключите документ в режим дизайна!

document.designMode = 'on';

После этого вы сможете редактировать все элементы имеющие текстовый контент прямо на странице.

Screenshot

  1. Inspect the element you wish to capture.
  2. Open the Command Menu with Ctrl + Shift + P.
  3. Type in screenshot within the Command Menu.
  4. You can now capture the screenshot of only the specific element, a viewport screenshot, or a full-page screenshot.

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

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

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

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

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

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

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

getEventListeners($('selector'))

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

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

В консоли 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 < 100; i++){
     2+4+5;
}
console.timeEnd('myTime'); // Останавливает таймер с меткой myTime
//Вывод - myTime: 0.02001953125ms

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

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

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(myArray)

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

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

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

clear()

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

F12

Открывает консоль.

CTRL + SHIFT + F

Глобальный поиск. Поиск во всех разделах HTML, CSS и JS. Специально полезно в продакшене, когда файлы JavaScript агрегируются, не пытайтесь найти код вручную. Используйте глобальный поиск.

CTRL + Z

Отменить изменения CSS в Devtools.

CTRL + S

Отредактируйте файлы JavaScript в DevTools (Вкладка Source). Затем сохраните изменения (Ctrl + S). Этот совет действительно полезен для отладки на лету медленных участков. Вы можете редактировать JavaScript прямо во время отладки. Код будет продолжен именно таким, каким вы его измените.

CTRL + ALT + Left click

Это очень полезный трюк, когда элементы имеют очень большую вложенность. Кликните по элементу в инспекторе объектов (Вкладка Elements) левой клавишей с нажатыми CTRL+ALT и у элемента сразу раскроются все дочерние элементы.

debugger;

Это не сочетание клавиш. Это ключевое слово является частью ECMAScript 5, так что оно будет работать во всех современных браузерах. Поместите строку debugger; в код JavaScript, и это будет иметь тот же эффект, что и точка останова (бряк), на этом месте (при открытой DevTools) браузер остановит выполнение JavaScript и откроет отладчик JavaScript.

Использование команды debugger; аналогично добавлению точки останова из панели Sources в браузере, но основное отличие, на которое стоит обратить внимание, заключается в том, что точки останова привязаны к номерам строк. Предположим, вы поставили точку останова на строке 20, а затем переработали код и удалили строку 8. То, что было в строке 20, теперь окажется в строке 19 и вам придётся переставить на новое место точку останова.

$0 и $_ в консоли

Выберите элемент во влкдаке Objects (Инспектор объектов), а в консоли используйте $0 для доступа к нему. Вы также можете использовать $_ для доступа к значению, которое было вычслено в последний раз.

CTRL + M - прыгнуть в конец (начало) блока

Используйте Ctrl + M для перехода между соответствующими скобками блока.

Blackbox scripts

Blackbox scripts: когда вам при отладке не нужно проходить часть кода, вы можете поместить его в Blackbox scripts. Делается это к примеру для того, чтобы не попадать в бесконечные вызовы служебных функций jQuery. Вы просто игнорируете весь jQuery и отлаживаете только свой код. Выделить код во вкладке Source, затем правый клик мыши.

Проверка ответа сервера - Postman

Если вы уверены в том, что запрос отправлен на сервер, но вы не знаете точно, как выглядит то, что пришло в ответ, или даже в том, пришло ли что-нибудь вообще, разобраться в ситуации вам поможет Postman.

Keyboard Shortcuts Reference