Важно знать в работе. Реально полезный и часто используемый инструмент в работе. Тут кратко пробегаемся по консоли браузера. Больше и подробней на курсе.
Инструмент (консоль) разработчика в браузере.
Как открыть консоль в браузере Chrome:
— клавиша F12;
— нажав одновременно клавиши Ctrl + Shift + I;
— ПКМ по элементу страницы –> Просмотреть код;
— меню браузера –> Дополнительные Инструменты –> Инструменты Разработчика.
1. Панель Elements показывает разметку страницы точно так же, как она рендерится в браузере. Можно визуально менять наполнение сайта посредством изменения html/css кода в панели элементов. Например, можно поменять текст в окне, если редактировать его в теле html, а также изменить шрифт страницы, поменяв его значение в поле css. Но это не сохранит введенных данных, а поможет просто визуально оценить примененные изменения.
В панели Elements есть одна очень прекрасная функция. Можно посмотреть, как бы выглядела открытая страница на каком-нибудь девайсе с другим расширением экрана. Кликом по иконке телефона слева от вкладки Elements вызывается окно, в котором можно менять размер предполагаемого экрана, таким образом эмулируя тот или иной девайс и контролировать отображение страницы на нем.
2. Панель Console - самая популярная вкладка тестировщиков, поскольку именно здесь мы видим найденные при выполнении скрипта ошибки в коде. Также данная панель отображает различного рода предупреждения и рекомендации. Все выводимые во вкладке сообщения можно фильтровать. В ошибке также отображается ее расположение и кликнув по нему вы переместитесь во вкладку Sources, где ошибка будет выведена в общей конструкции страницы.
3. Панель Sources - как правило, в данной вкладке проводится отладка кода программистами. Она имеет 3 окна (слева направо):
Зона исходных файлов. В ней находятся все подключённые к странице файлы, включая JS/CSS.
Зона текста. В ней находится текст файлов.
Зона информации и контроля.
4. Панель Network - основная функция данной вкладки – запись сетевого журнала. Она дает представление о запрашиваемых и загружаемых ресурсах в режиме реального времени. Можно выявить, загрузка и обработка каких именно ресурсов занимает большее количество времени, чтобы впоследствии знать где и в чем именно можно оптимизировать страницу.
Также стоит отметить что именно в этой вкладке в режиме Large request rows можно просмотреть запросы, которые отправляются на сервер, а также ответы, которые приходят с него, их содержание и характеристики.
5. Панель Performance - данная вкладка используется при необходимости полного обзора затраченного времени. На что оно было потрачено, как много его потребовалось на тот или иной процесс. Здесь отображается абсолютно вся активность, включая загрузку ресурсов и выполнение Javascript.
6. Панель Memory - данная панель дает возможность профилировать время исполнения и использование памяти веб приложением или страницей, таким образом помогая понять где именно тратится много ресурсов и как можно оптимизировать код.
7. Панель Application - предназначена для исследования загруженных элементов. Позволяет взаимодействовать с HTML5 Database, Local Storage, Cookies, AppCache и т.д.
8. Панель Secuirity - показывает информации о каждом запросе и подсвечивает те, из-за которых сайт не получает заветной зелёной иконки в статусе.
Кроме того можно получить следующую информацию:
- о проверке сертификата, подтвердил ли сайт свою подлинность TLS-сертификатом;
- TLS-соединении, обозначая использует ли ваш сайт современные безопасные протоколы;
- безопасность подгружаемых второстепенных источников.
