Эта статья начинает серию обзоров, посвященных непростой теме дебаггинга фронтенда. Каждый обзор будет посвящен возможностям отдельной панели Google DevTools, рассказывая только о реальных применениях этого инструментария. Раздел “Шорткат дня” поможет вам в каждом из обзоров выучить один вариант сочетания клавиш, который вызывает полезную функцию DevTools с минимальными усилиями. Минимум воды, максимум пользы. Поехали.
Чтобы создать качественную и оптимизированную страницу нужно иметь критерии оценки, а также инструменты, которыми и происходит тестирование. Этими задачами отчасти занимаются инструменты для дебаггинга, встроенные в браузеры. В Google Chrome это DevTools, в FireFox это FireBug или родная панель веб-мастера, а в IE это средства разработчика. Cразу покажем вам двух лидеров — Google Chrome и FireFox.
Преимущества FireFox — это приятная консоль, структурированное DOM дерево, но по возможностям тестирования адаптивности и аудита, по моему мнению, удобнее Chrome DevTools. Это целый набор инструментов, они все разделены в соответствии с задачами.
Инструментов много, однако для того, чтобы реально запомнить и использовать эти возможности на практике, необходимы примеры и реальные кейсы. Они вас ждут в следующей статье.
Панель дебаггинга можно вызвать, нажав Меню - Дополнительные инструменты - Средства разработчика, однако вы можете это сделать быстрее, с помощью клавиши F12. Перед вами сразу откроется DevTools. Она так же и закрывается. Попробуйте это сделать. Для того, чтобы открыть консоль, нужно нажать Ctrl+Shift+J.
Слева в DevTools находится очень полезная функция, которая позволит вам открыть свойства узла, не занимаясь его поиском в DOM-дереве. Нажмите на значок лупы, а затем на нужный элемент прямо на странице — вуаля, и вам открыты все его свойства.
Когда вам нужно найти DOM-узел и его свойства, воспользуйтесь иконкой лупы, а затем кликните на нужный вам элемент на странице (заголовок, картинку, да что угодно) и перед вами отобразится CSS элемента и раскрытое дерево вложенности DOM.
Для того, чтобы вызвать панель тестирования адаптивности, нужно нажать на иконку мобильного телефона в левой части панели DevTools. Здесь она появилась сравнительно недавно, а чтобы вызвать ее раньше, приходилось лезть в дебри настроек.
Справа находится группа элементов, отвечающих за служебные функции. Тут находится панель настроек, где можно принудительно отключить JS или кеширование, настроить отображение сообщений консоли, а также увидеть все шорткаты.
Далее идет кнопка, которая позволит сделать DevTools отдельным окном, это будет удобно в случае использования нескольких мониторов.
В следующем обзоре вы увидите функционал тестирования адаптивности, с эмуляцией конкретных моделей телефонов, планшетов и даже электронных ридеров.