DevTools.

Это набор инструментов, которые помогают программистам тестировать сайты и исправлять ошибки в интерактивном режиме.

Elements (Элементы).

Позволяет просматривать и редактировать элементы DOM-дерева страницы. Работает так: навести курсор на строчку кода, а браузер подсветит элемент страницы, за который он отвечает. Это удобно: можно в лайв-режиме менять параметры объектов и

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

HTML.

HTML — (HyperText Markup Language) — это язык гипертекстовой разметки страницы. Он используется для того, чтобы дать браузеру понять, как нужно отображать загруженный сайт. HTML определяет структуру страницы.

Язык состоит из тегов — это своеобразные команды, которые преобразовываются в визуальные объекты в браузере пользователя. В подавляющем большинстве теги являются парными, т.е. открывающий тег и закрывающий.

Тег — это некий текст, обернутый в угловые скобки.

Например, тег <img> используется для размещения изображений на странице. У него есть обязательный атрибут src, в котором указывается ссылка на файл. <img src = “image.png”>.

Основные теги HTML.

<html></html> — Корневой тег, все остальные теги будут помещены внутрь его.
<head></head> — Содержит названия веб-сайта, кодировка, стили и информация для поисковой оптимизации (содержимое тега не отображается на странице).
<body></body> — Определяет видимую часть документа (всё что внутри этого тега можно увидеть на сайте).
<h1></h1> — Заголовок.
<p></p> — Абзац.
<a></a> — Ссылка.
<img> — Изображение.
<button></button> — Кнопка.
<form></form> — Форма.
<input> — Поле ввода.
<table></table> — Таблица.
<div></div> — Логическое разделение содержимого веб-сайта.

CSS.

CSS — (Cascading Style Sheets) — это каскадные таблицы стилей. По сути — язык, который отвечает за описание внешнего вида HTML-документа. Подавляющее большинство современных
веб-сайтов работают на основе связки HTML + CSS.

CSS позволяет отформатировать HTML, сделать более привлекательным для читателя.

Основные свойства CSS.

color: red — Цвет текста красный.
background-color: gold — Цвет фона золотой.
font-size: 18px — Размер шрифта 18px.
border: — Граница элемента.
border-color: black — Цвет границы чёрный.
margin: 15px — Внешний отступ между элементами.
padding: 20px — Отступ внутри элемента.

Sources (Источники).

Что-то вроде встроенной среды разработки, которая позволяет смотреть и редактировать файлы, из которых состоит
веб-страница. Как в заправском редакторе кода, область просмотра в Sources можно делить на воркспейсы и работать с ними параллельно. Здесь есть инструменты для отладки JavaScript с помощью брейк-пойнтов — специальных точек остановки в коде.

Console (Консоль).

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

Network (Сеть).

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

В «Name» кликнуть на ресурсы. Во вкладке «Header» появляется запрос на сервер, а во вкладке «Response» появляется ответ сервера. На вкладке «Preview» предпросмотр ответа. В структурированном виде JSON. С помощью фильтра можно найти интересующий запрос вида (без https:) api/about. Но тестирование в Postman происходит по полной ссылки.

Security (Безопасность).

На этой вкладке можно выяснить, насколько безопасна страница и какие протоколы шифрования использует. Есть возможность изучить сертификат.

Performance (Производительность).

Позволяет анализировать производительность страницы во время её работы. Работает просто: открыть вкладку, нажать кнопку записи, и спустя некоторое время браузер выводит все данные о работе страницы: использование памяти, выполнение скриптов, время отклика, сетевые запросы и так далее. Частый кейс: посмотреть, не слишком ли много оперативки и ресурсов клиентской машины подъедает страница.

Memory (Память).

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

Proxy.

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

Lighthouse (Маяк).

Chrome может составить подробный отчёт. Браузер проанализирует сайт по четырем основным параметрам: производительность, доступность, SEO и лучшие практики, а потом выдаст советы, что поправить, чтобы эти показатели улучшить.

Application (Заявление).

Вкладка для инспектирования и очистки всех загруженных ресурсов, включая IndexedDB или Web SQL базы данных, local и session storage, куков, кэша приложения, изображений, шрифтов и таблиц стилей.

Ключевые возможности:

Быстрая очистка хранилищ и кэша.
Инспектирование и управление хранилищами, базами данных и кэшем.
Инспектирование и удаление файлов cookie.

Cache.

Кэш — это хранилище данных или буфер между браузером и интернетом, в котором хранится часто запрашиваемая информация. Доступ к данным на этом уровне осуществляется значительно быстрее, чем к основному месту их хранения.

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

Что такое User agent?

User agent решает важную задачу: помогает сайтам понять, с какого устройства и браузера был выполнен вход, чтобы показать версию сайта, которая будет работать на устройстве без ошибок.

Recorder (Регистратор).

Позволяет записать, воспроизвести и измерить, как быстро сайт реагирует на действия пользователя (например, в процессе оформления заказа). Чтобы начать запись, нужно выбрать вкладку «Recorder», затем «Start recording».

Performance Insights (Анализ производительности).

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