Web-it-blog/20.07.17

Инструменты в консоли разработчика Google Chrome

Консоль разработчика незаменима при отладке кода или при верстке страницы. Во многих браузерах она есть и обладает различным функционалом. Сегодня мы рассмотрим консоль разработчика в Сhrome и узнаем о некоторых инструментах, о которых вы могли и не подозревать.

Формат CSS и JavaScript.

Перед загрузкой CSS и JavaScript на продакшн, их обычно сжимают. Из-за этого отлаживать их становится еще тяжелее. Поэтому в консоли разработчика есть инструмент, благодаря которому мы можем просмотреть сжатый файл как обычный (т.е. не сжатый).

Заходим в папку Source и чуть ниже находим иконку в виде фигурных скобок. Нажимаем на нее и происходит магия - сжатый код теперь снова нормальный и мы можем посмотреть где ошиблись или просто что-то добавить или убрать из кода.

Горячие клавиши Alt + Up/Alt + Down и Shift + Up/Shift + Down.

При верстке страницы приходиться много раз изменять значения отступов, размеров элементов, размеры текста и т.д, чтобы получить нужный результат. По умолчанию, значению, которое мы установили, прибаляется/убавляется 1. Но иногда, нам необходимы дробные значения. Если воспользоваться горячими клавишами Alt + Up и Alt + Down, то к нашему значению будет прибаляться/убавляться 0,1.

Если мы хотим изменить значение больше чем на 1, то благодаря клавишам Shift + Up/Shift + Down значению будут прибаляться/убавляться 10.

Анимация.

На многих сайтах можно часто встретить анимированные элементы. Чтобы посмотреть, как они работают, можно воспользоваться инструментом Animations. Для этого открываем консоль разработчика, кликаем меню инструментов, выбираем More Tools и далее Animations.

На примере ниже я продемонстрировал работу инструмента Animations. Вы можете контролировать анимацию: поставить на паузу, изменить интервал выполнения анимации и т.д.

Code Coverage.

Для проверки работы CSS и JavaScript файлов можно воспользоваться инструментом Coverage(Охват). Его очень удобно использовать в больших проектах, когда нужно быстро обнаружить неисправный код.

Чтобы его подключить, заходим в консоль разработчика, кликаем меню инструментов, выбираем More Tools и далее Coverage. Включаем запись и кликаем по всем ссылкам и кнопкам и т.д.(это необходимо для проверки работы JS и CSS файлов) на странице. Нажимаем стоп и как только запись закончится, нам будет представлена таблица в которой будут указаны рабочие и сломанные(если такие будут) файлы.

Перед тем как использовать этот инструмент, убедитесь что ваша версия Chrome выше 59.

Чекбокс Preserve Log.

Preserve Log - это чекбокс, который позволяет сохранять в console журналы между обновлениями страниц. Он полезен тогда, когда нам нужно отладить страницы, которые требуют перезагрузки. При загрузке новой страницы будет создаваться новый журнал, а также будут отображаться журналы других страниц.

Store as global variable.

Проверка объектов в console, которые содержат в себе много значений, задачка не из самых простых. В таких случаях удобно использовать специальное свойство Store as global variable (что в переводе - записать как глобальную переменную).

Чтобы вызвать Store as global variable, в console над нашем объектом кликаем правую кнопку мыши и нажимаем "Store as global variable". Наш объект будет присвоено имя temp1, которое в дальнейшем можно использовать в JavaScript.

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