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

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

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

Как мы уже выяснили в первой публикации, браузер обрабатывает перед выводом html-код страницы, скрипты и стили, чтобы веб-страница приобрела вид, задуманный при её создании.

Исходный код страницы

Просмотр исходного кода
Просмотр исходного кода (Ctrl+U)

И всю исходную информацию легко можно увидеть, воспользовавшись встроенными в браузер Инструментами разработчика.

Например, полную версию исходного кода страницы можно просмотреть, нажав клавиши Ctrl и U на клавиатуре или кликнув правой кнопкой мыши и выбрав команду Просмотр кода страницы. В этом примере и далее мы будем использовать браузер Google Chrome и управление, характерное для него.

Другие популярные браузеры (Opera, FireFox и Яндекс Браузер) оснащены подобным образом, а FireFox даже имеет некоторые дополнительные возможности. 

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

Просмотр дерева HTML элементов

Полный набор инструментов выводится при клике мышкой на другой пункт контекстного меню - Просмотреть код.

Панель инструментов разработчика
Панель инструментов разработчика

Положение панели можно переключить, либо открыть отдельным окном. В примере показаны активные вкладки панели, выводимые по умолчанию. Это вкладка Elements в левой половине и Styles - в правой.

Активный элемент (на котором произошёл вызов контекстного меню) подсвечен в дереве элементов, имеет треугольный маркер и кнопку вызова меню. По клику на маркер элемент можно развернуть (открыть вложенные в него теги) или свернуть.

Все элементы дерева интерактивны, при наведении указателя мыши данный тег подсвечивается в основном окне и в появляющейся подписи выводится его полный селектор с названием тега, id и классом, а также его внешние размеры.

В нижней части окна показана строка состояния с полной вложенностью текущего тега, начиная от <html>, в виде навигационной цепочки, то есть по клику на надпись, этот тег становится активным в дереве элементов.

Просмотр и изменение стилей CSS

Подсветка тега показывает его CSS свойство padding (внутренние отступы) - зелёным цветом, и внешние отступы - margin, красным.

При клике на другой элемент дерева обновляются таблицы стилей для него в правой половине окна разработки.

Возможности работы с вкладкой Styles:

  • любую строчку со стилем можно включить или выключить переключателем слева от неё;
  • значение свойства доступно для редактирования после двойного клика на него;
  • если свойство содержит значение цвета, при клике на цветной маркер появляется Color Picker с множеством функций для настройки цвета, возможностью задать кодировку, прозрачность и пипеткой для взятия образца с любого элемента;
  • можно добавить новые строчки в таблицу стилей, имитировать поведение по событиям элемента (наведение указателя, фокус и проч.), либо задать элементу другой класс.

При изменении получившийся набор стилей сразу применится для всей страницы, временно, до первой перезагрузки.

Особенности вкладки элементов браузера FireFox (там она называется Инспектор), в том, что для элементов, которым назначена обработка JavaScript, показывается отметка Event, при клике на неё можно увидеть как событие, так и нужный фрагмент скрипта. Кроме того, панель инструментов русифицированная.

Особенности панели браузера FireFox
Особенности панели браузера FireFox

Вкладка Styles, помимо стилей, показывает ссылку на файл, откуда эти стили берутся. При клике на неё мы плавно перемещаемся на другую вкладку - Sources (источники).

Файлы скриптов, стилей и медиа

Вкладка Sources панели инструментов
Вкладка Sources панели инструментов

В левой части отображается дерево всех каталогов, откуда берутся файлы для страницы - стили, скрипты и картинки. В правой, соответственно, содержимое выбранного файла. Если код минифицированный, его можно распаковать в один клик, что стиль CSS, что JavaScript.

Дерево файлов расположено во вкладке Page, соседняя - Filesystem, позволяет редактировать локальные файлы, предварительно добавив папку в проект и разрешив доступ для изменения.

Следующая вкладка - Console, выводит сообщения JavaScript. Если что-то на сайте работает не так, как нужно, смотрим туда. У скриптов есть такая особенность - если какой то участок кода вызывает ошибку, дальше скрипт уже не работает, даже если остальной код валидный. Также можно вести отладку скриптов, выводя интересующие нас переменные с помощью команды console.log(названиеПеременной) или сообщения для проверки участков кода на выполнение - console.log("текст").

Отслеживание загрузки и запросов

Вкладка Network отображает всю деятельность браузера по соединениям с "внешним миром".

Вкладка Network
Вкладка Network

Очень "насыщенная" и информативная вкладка.

В нижней части окна выводятся итоговые значения ключевых параметров загрузки - число запросов, "вес" страницы, время загрузки содержимого и окончания обработки HTML-разметки скриптами браузера (постороения дерева DOM).

Настройка Disable cashe позволяет принудительно отключить кеширование файлов. Что это означает? Для ускорения загрузки сайта все его файлы, по возможности, браузер сохраняет в память вашего устройства. Для этого устанавливаются настройки кеширования - его возможность и время хранения файла. При следующей загрузке страницы содержимое берётся с сервера, а скрипты, стили и картинки - с диска компьютера.

Если галочка Disable cashe включена - кеш совсем не сохраняется и все изменения файлов на сервере отражаются на веб-странице. Для моделирования нормального режима загрузки, чтобы увидеть, какие файлы кешируются, а какие нет, данную настройку нужно выключить. Тогда в таблице загрузки в графе Size будет выведена надпись memory cashe, то есть этот файл не скачивался.

Файлы, имеющие проблемы с загрузкой, отмечены красным цветом. Часто это файлы счётчиков (аналитики или метрики), блокируемые антивирусом. На работу скриптов они влияния не оказывают.

При клике на строчку таблицы появляется подробная информация об этом запросе, разбитая на несколько вкладок:

  • Headers - сводка по отправляемым и принимаемым заголовкам, которые содержат дополнительные сведения, например: в запросе отправляется параметр User-Agent, содержащий описание браузера и accept, информирующий о поддерживаемых типах картинок;
  • Response - необработанное содержимое ответа сервера и Preview - тот же ответ после обработчика браузера;
  • Timing - временное измерение  запроса, когда запрошен, когда начат и сколько продолжался;
  • Cookies и Initiator - информация о куках и программе-инициаторе запроса.

Анализ данных вкладки Network даёт полное представление о работе внешней стороны веб сайта (фронтенда), то есть с позиции клиента (браузера). Кроме того, любая пользовательская отправка информации с сайта (с его форм), если вдруг она не работает, начинается с этой вкладки. Проверяется, куда и какие поля формы отправляются, что в себе содержат и что приходит в ответе сервера.

Сохранённые данные веб страницы

Вкладка Application (в FireFox называется Хранилище) содержит информацию, которую сайт хранит на устройстве пользователя.

Хранилище данных сайта
Хранилище данных сайта

Для нормальной работы сайта - аутентификации пользователя или временного сохранения заполненных форм, либо выбранных товаров, сайт может записывать данные в память компьютера или смартфона. На вкладке Application можно подробно узнать, что хранит тот или иной сайт, а также с помощью кнопки Clear storage - очистить хранилище (после этого пользователь выходит из аккаунта, если на сайте есть аутентификация).

Данная публикация описывает не все возможности Панели разработчика в веб браузере - акцент смещён в пользу тех его вкладок, которые, как правило, чаще всего применяются при разработке и отладке работы сайта. 

 

 


При перепечатке и копировании ссылка на сайт обязательна.

Опубликовано: 24.02.2020 г. 31


Похожие публикации

Как устроен сайт

Как устроен сайт

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

Отличия сетки Bootstrap 3 и 4

Особенности сетки Bootstrap

Фреймворк Bootstrap - это безусловный хит среди готовых решений для сайтов в силу проработанности деталей. Что такое Bootstrap? Это набор...

Псевдоэлементы CSS

Псевдоэлементы CSS

Псевдоэлементы позволяют добавить стилизацию определённой части HTML элемента (тега), либо дополнить его содержимое.