Веб-браузер

Для разработчика браузер — не только окно в интернет, но и среда выполнения: в нём работают скрипты, хранятся cookie и кеш, от него зависит, как увидит сайт каждый посетитель. Как браузер разбирает разметку и рисует страницу, подробно описано в статье про браузер в разделе фронтенда. Здесь — о том, что происходит на пути от адресной строки до сервера и обратно, и об инструментах, которыми браузер помогает разработке.

Что происходит после ввода адреса

1. Браузер выясняет IP-адрес домена через DNS, если не знает его из кеша.
2. Устанавливает соединение с сервером и шифрованный канал TLS для HTTPS.
3. Отправляет HTTP-запрос с заголовками о себе, языке и сохранённых cookie.
4. Получает HTML, находит в нём ссылки на стили, скрипты, шрифты и картинки и запрашивает их, по возможности параллельно.
5. Строит страницу, выполняет JavaScript и показывает результат, продолжая подгружать ресурсы.

Запрос, который браузер отправляет серверу, выглядит примерно так:

GET /catalog/ HTTP/1.1
Host: example.ru
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) …
Accept: text/html,application/xhtml+xml
Accept-Language: ru-RU,ru;q=0.9
Cookie: PHPSESSID=8f2c…

По этим заголовкам сервер решает, на каком языке отдать страницу, и узнаёт сессию пользователя. А если при повторном запросе браузер добавит If-None-Match или If-Modified-Since, сервер может ответить «не изменилось» (код 304), и браузер возьмёт копию из кеша.

Движки и кроссбраузерность

Браузеров много, а движков фактически три: Blink (Chrome, Edge, Opera, Яндекс Браузер и другие на основе Chromium), WebKit (Safari, а на iPhone долгое время — все браузеры) и Gecko (Firefox). Поэтому сайт проверяют хотя бы в одном браузере каждого семейства и обязательно в Safari на iOS: именно там чаще всего всплывают отличия в формах, датах и прокрутке.

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

В каждом современном браузере есть панель разработчика (F12). Вкладка Network показывает все запросы, их коды ответов, размер и время загрузки — так находят медленный скрипт или ошибку 404 у шрифта. В Console видны ошибки JavaScript, в Elements можно править разметку и стили на лету, а Application показывает cookie, localStorage и кеш. Режим эмуляции устройств помогает быстро проверить мобильную версию, хотя реальный телефон он не заменяет.