Дебаггинг в Google DevTools. Введение

Лирическое отступление

Чтобы создать качественную и оптимизированную страницу нужно иметь критерии оценки, а также инструменты, которыми и происходит тестирование. Этими задачами отчасти занимаются инструменты для дебаггинга, встроенные в браузеры. В Google Chrome это DevTools, в FireFox это FireBug или родная панель веб-мастера, а в IE это средства разработчика. Cразу покажем вам двух лидеров — Google Chrome и FireFox.

Преимущества FireFox — это приятная консоль, структурированное DOM дерево, но по возможностям тестирования адаптивности и аудита, по моему мнению, удобнее Chrome DevTools. Это целый набор инструментов, они все разделены в соответствии с задачами.

Панели дебаггинга DevTools

• Тестирование адаптивности и эмуляция сети. Здесь расположен список популярных устройств, начиная от Samsung Galaxy Tab и заканчивая Iphone 6. Кроме этого совсем недавно появился пункт, позволяющий эмулировать интернет канал с различной скоростью доступа.
• Elements. Панель является представлением DOM-модели, разделенной на дерево узлов и панель просмотра назначенных им CSS свойств.
• Network. Представляет собой список всех подключенных и загружаемых файлов, включая стили, изображения, скрипты, с указанием их размера, статуса заголовка и времени загрузки.
• Sources. Эта панель отображает текущие файлы стилей и скриптов, которые вы можете дебаггить пошагово в реальном времени.
• Timeline. Здесь вы сможете отслеживать активность вашего приложения, начиная от первого HTTP request, и заканчивая рендерингом страницы с анализом FPS.
• Profiles (время выполнения и загрузка ресурсов). Эта панель отображает время выполнения приложения, загрузку памяти, включая JavaScript объекты и связанные с ними DOM-узлы.
• Resources. Здесь можно отследить сохраненные на клиенте куки, а также содержимое Local и Session Storage.
• Audits. Здесь можно проанализировать веб-приложение на предмет его производительности.
• Console.

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

Шорткат дня

Панель дебаггинга можно вызвать, нажав Меню - Дополнительные инструменты - Средства разработчика, однако вы можете это сделать быстрее, с помощью клавиши F12. Перед вами сразу откроется DevTools. Она так же и закрывается. Попробуйте это сделать. Для того, чтобы открыть консоль, нужно нажать Ctrl+Shift+J.

Функциональные кнопки DevTools

Слева в DevTools находится очень полезная функция, которая позволит вам открыть свойства узла, не занимаясь его поиском в DOM-дереве. Нажмите на значок лупы, а затем на нужный элемент прямо на странице — вуаля, и вам открыты все его свойства.

Прокачай свой скилл

Когда вам нужно найти DOM-узел и его свойства, воспользуйтесь иконкой лупы, а затем кликните на нужный вам элемент на странице (заголовок, картинку, да что угодно) и перед вами отобразится CSS элемента и раскрытое дерево вложенности DOM.

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

Справа находится группа элементов, отвечающих за служебные функции. Тут находится панель настроек, где можно принудительно отключить JS или кеширование, настроить отображение сообщений консоли, а также увидеть все шорткаты.

Далее идет кнопка, которая позволит сделать DevTools отдельным окном, это будет удобно в случае использования нескольких мониторов.

В следующем обзоре вы увидите функционал тестирования адаптивности, с эмуляцией конкретных моделей телефонов, планшетов и даже электронных ридеров.

Все статьи серии Дебаггинг в Google DevTools.

• Дебаггинг в Google DevTools. Часть 2: Дебаггинг адаптивности