В каждом браузере есть свой инструмент разработчика – это то, что многие называют просто «консолью», рассмотрим Консоль в браузере Chrome. Выглядит вот так:
На самом деле Консоль в браузере Chrome — это инструмент, с помощью которого можно не только посмотреть наполнение страницы, выводимой браузером, а также существующие ошибки (что чаще всего и делают тестировщики), но и исправить эти ошибки намного проще и быстрее (что чаще всего делают девелоперы), замерять различные показатели и манипулировать страницей.
Как открыть консоль в браузере Chrome:
— клавиша F12;
— нажав одновременно клавиши Ctrl + Shift + I;
— ПКМ по элементу страницы –> Просмотреть код;
— меню браузера –> Дополнительные Инструменты –> Инструменты Разработчика.
Располагаться она может внизу страницы или сбоку, можно открепить в отдельное окно. Итак, рассмотрим по отдельности каждую вкладку открытой консоли.
Итого в ней есть 8 вкладок, каждая из которых отображает определенные данные:
1 – Elements (содержит весь html/css код страницы и позволяет выбрать элементы для исследования, а также редактировать их)
2 – Console (отображает наличие/отсутствие ошибок/предупреждений в коде)
3 – Sources (позволяет выполнять операции с кодом страницы)
4 – Network (отслеживает время исполнения определенных запросов и сами запросы)
5 – Timeline (измеряет время загрузки страницы)
6 – Profiles (позволяет создавать JavaScript, профили CPU)
7 – Resources (позволяет просмотреть определенные сохраненные данные)
8 – Audits (проводит проверки определенных параметров)
Теперь пройдемся по каждой из них в отдельности и поподробнее:
Панель Elements
Панель Elements показывает разметку страницы точно так же, как она рендерится в браузере. Можно визуально менять наполнение сайта посредством изменения html/css кода в панели элементов. Как вы, наверное, заметили (а может и нет), в левом окошке отображается html–документ, в правом – css. Проводя нехитрые манипуляции с данными можно изменить наполнение и дизайн открытой страницы. Например, можно поменять текст в окне, если редактировать его в теле html, а также изменить шрифт страницы поменяв его значение в поле css. Но это не сохранит введенных данных, а поможет просто визуально оценить примененные изменения. Помимо этого, можно просмотреть код конкретного элемента страницы. Для этого нужно райткликнуть его и выбрать команду «Посмотреть код».
В панели Elements есть одна очень прекрасная функция. Можно посмотреть, как бы выглядела открытая страница на каком-нибудь девайсе с другим расширением экрана. Кликом по иконке телефона слева от вкладки Elements вызывается окно, в котором можно менять размер предполагаемого экрана, таким образом эмулируя тот или иной девайс и контролировать отображение страницы на нем. Выглядит это так:
При клике на кнопку Select Model выпадет дропдаун с огромнейшим выбором девайсов. Выбираете что вам нужно – и вуаля! Страница отображена так, как если бы это был девайс. Таким образом панель Elements можно использовать не только для просмотра или редактирования страницы, но и для эмуляции устройств отображения. Все унифицировано и доступно в Хроме!
Панель Console
Самая популярная вкладка тестировщиков, поскольку именно здесь мы видим найденные при выполнении скрипта ошибки в коде. Также данная панель отображает различного рода предупреждения и рекомендации (как на картинке выше). Все выводимые во вкладке сообщения можно фильтровать. В ошибке также отображается ее расположение и кликнув по нему вы переместитесь во вкладку Sources, где ошибка будет выведена в общей конструкции страницы.
Очистить поле вкладки Console (в случае, если вам требуется удалить сообщения о предыдущих ошибках) можно кликнув иконку перечеркнутого круга. Фильтровать сообщения в консоли можно по типу — ошибки, предупреждения, инфо, стандартный вывод, сообщения отладчика, исправленные — выбрав одну из доступных опций консоли.
Панель Sources
Как правило, в данной вкладке проводится отладка кода программистами. Она имеет 3 окна (слева направо):
- Зона исходных файлов. В ней находятся все подключённые к странице файлы, включая JS/CSS.
- Зона текста. В ней находится текст файлов.
- Зона информации и контроля.
В зоне исходных файлов выбирается необходимый элемент, в зоне текст выполняется непосредственно его отладка, а в зоне информации и контроля можно запускать/останавливать отлаженный код.
Панель Network
Основная функция данной вкладки – запись сетевого журнала. Она дает представление о запрашиваемых и загружаемых ресурсах в режиме реального времени. Можно выявить, загрузка и обработка каких именно ресурсов занимает большее количество времени, чтобы впоследствии знать где и в чем именно можно оптимизировать страницу.
Также стоит отметить что именно в этой вкладке в режиме Large request rows можно просмотреть запросы, которые отправляются на сервер, а также ответы, которые приходят с него, их содержание и характеристики.
Панель Performance
Данная вкладка используется при необходимости полного обзора затраченного времени. На что оно было потрачено, как много его потребовалось на тот или иной процесс. Здесь отображается абсолютно вся активность, включая загрузку ресурсов и выполнение Javascript.
Панель Memory
Данная панель дает возможность профилировать время исполнения и использование памяти веб приложением или страницей, таким образом помогая понять где именно тратится много ресурсов и как можно оптимизировать код.
CPU profiler предоставляет информацию по времени, затраченному на выполнение Javascript.
Heap profiler отображает распределение памяти.
JavaScript profile детализирует, куда именно ушло время при выполнении скриптов.
Панель Application
Предназначена для исследования загруженных элементов. Позволяет взаимодействовать с HTML5 Database, Local Storage, Cookies, AppCache и т.д. В данной вкладке можно почистить куки, открыв данную вкладку и кликнув иконку перечеркнутого круга
Панель Audits
Данная панель функционирует в качестве анализатора страницы во время ее загрузки. В результате проведенного аудита появляются рекомендации по оптимизации загрузки страницы, увеличению скорости отклика. Примеры способов оптимизации можно увидеть в окне ниже.
Панель Secuirity
Security Panel показывает информации о каждом запросе и подсвечивает те, из-за которых сайт не получает заветной зелёной иконки в статусе.
Кроме того можно получить следующую информацию:
- о проверке сертификата, подтвердил ли сайт свою подлинность TLS-сертификатом;
- TLS-соединении, обозначая использует ли ваш сайт современные безопасные протоколы;
- безопасность подгружаемых второстепенных источников.
На самом деле, инструменты разработчика ( Консоль в браузере Chrome ) – очень полезная штука, которая и нам, тестировщикам, частенько может пригодиться. Еще больше полезной информации на сайте https://developers.google.com/web/tools/chrome-devtools/
