Это вторая статья из серии, посвящённой пониманию веб-разработки. В серии три статьи, в которых разбирается следующее:

1. Увидим, как устроено клиент-серверное взаимодействие;
2. → Понаблюдаем за тем, как браузер получает и отображает данные, а также изучим структуру веб-страниц;
3. Развернем собственный локальный сервер, чтобы почувствовать, как работает веб изнутри.

В этой части мы перейдём на сторону клиента, который отображает данные, полученные с сервера. В предыдущей части мы уже использовали утилиту curl, которая выступала в роли клиента, а в роли сервера был сервис JSONPlaceholder. Сейчас в роли клиента будет выступать обычный браузер, с помощью которого вы читаете эту статью.

Как правило, для объяснения работы браузера используются примеры разметки на HTML, стилей CSS и кода на JavaScript, но в этой статье упор сделан на понимание механизма отображения данных, так что эти технологии будут рассмотрены вскользь.

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

Подробнее:

• База по вёрстке: основы HTML
• База по вёрстке: основы CSS

Как браузер отображает данные с сервера

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

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

1. Ввод URL и запрос по этому адресу;
2. Сетевое взаимодействие: преобразование URL в IP-адрес с помощью DNS;
3. Установка соединения по HTTP(s);
4. Получение контента в HTML, JSON или в других форматах;
5. Построение DOM-дерева.
6. Расчет положение элементов и применение CSS;
7. Отрисовка;
8. Применение JavaScript.

Все эти этапы можно изучить с помощью DevTools, а получившийся результат можно с помощью них же модифицировать.

Подробнее:

• Что происходит, когда мы открываем сайт в браузере

Что такое DevTools

DevTools (инструменты разработчика) — это встроенные в браузер средства для анализа и отладки веб-страниц. Их возможности включают, но не ограничиваются следующим:

• Изучение HTML-структуры и стилей CSS;
• Исполнение кода на JavaScript;
• Отображение ошибок;
• Анализ производительности;
• Отображение сетевых запросов и ресурсов;
• Различные способы отладки и тестирования.

DevTools есть практически в каждом современном браузере и их можно использовать в любой момент. В браузерах, которые основаны на Chromium (Chrome, Edge, Яндекс Браузер и большая часть остальных), инструменты разработчика везде одинаковые. Немного иная функциональность у таких инструментов в браузерах на движке Gecko, в первую очередь Firefox и его форках. Браузер Safari использует движок Webkit, и его инструменты разработчика оптимизированы для работы на устройствах Apple.

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

Запускаем Devtools

В примерах ниже будут показаны инструменты разработчика в Яндекс Браузере на MacBook.

Чтобы открыть панель DevTools, в окне с этой статьёй нажмите F12 или правую кнопку мыши → Просмотреть код (Inspect element). Вы увидите примерно следующее:

Как запросить данные через DevTools и отобразить на странице

Рассмотрим, как браузер загружает данные и как можно вручную управлять контентом с помощью инструментов разработчика. В результате выполнения приведённого ниже скрипта пустое текстовое поле будет заполнено данными, полученными от JSONPlaceholder.

1. Откройте DevTools на вкладке Console. При первом запуске может потребоваться подтверждение для исполнения произвольного кода.

2. В консоли вставьте следующий код:

   fetch('https://jsonplaceholder.typicode.com/posts/1')
     .then(response => response.json())
     .then(data => {
       document.getElementById('json-output').value = JSON.stringify(data, null, 2);
     })
     .catch(error => {
       document.getElementById('json-output').value = 'Ошибка: ' + error.message;
     });
   

3. Посмотрите на текстовое поле, которое до этого было пустым.

Как это работает

Консоль в инструментах разработчика позволяет запускать практически любой код на JavaScript.

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

• fetch(...) — это стандартный для JavaScript HTTP-клиент, аналогичный разобранному в предыдущей статье curl, но работающий в другой среде. В этом примере используется GET-запрос по адресу https://jsonplaceholder.typicode.com/posts/1.
• .then(...) — это Promise, механизм, позволяющий создавать цепочки асинхронных последовательных операций.
• document.getElementById(...); — метод поиска в DOM и выставление значения на основе полученного JSON.
• .catch(error => { ... }) — обработчик ошибок.

Что ещё можно сделать

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

Изучение элементов

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

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

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

Вкладка Sources содержит информацию обо всем контенте страницы, который загружается из различных источников. Загружается сама страница в виде HTML, CSS, JavaScript, изображения, шрифты и многое другое. Как можно увидеть на скриншоте, большая часть контента моего сайта идет из одного источника.

Работа с сетью

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

Часто я комбинирую самостоятельное изучение запросов с записью HAR-файлов при тестировании и отладке. Эти файлы содержат список всех сетевых запросов в ходе работы со страницей, чтобы передать эти записи команде разработки вместе с текстовым описанием моих действий. Чтобы включить запись, нажмите 🔴 в левом верхнем углу панели DevTools.

На скриншоте выше показаны все запросы, которые были отправлены на момент отображения страницы, статус, инициатор, объем переданных данных и время выполнения. В нижней строке видно, что на локальном сервере отрисовка страницы потребовала 337 миллисекунд, было передано 3.1 мегабайт данных в ходе 20 запросов. Наибольшую часть объёма составляют PNG-файлы, то есть изображения, а также шрифты (TTF). А если проанализировать статью про навыки технического писателя, то можно видеть, что большая часть объема той страницы приходится на файлы библиотеки mermaid.js, которую я использую для создания диаграмм.

Каждый запрос можно изучить детальнее. Кликните на любой запрос в списке и откроется панель с деталями:

* **Headers** — заголовки запроса и ответа, тип контента (`image/png`, `application/json` и т.д.);
* **Preview** — удобное отображение JSON-ответа (если это JSON);
* **Response** — ответ от сервера в исходном виде (крайне полезно для изучения ошибок);
* **Timing** — этапы запроса: DNS, TCP, SSL, TTFB (время до первого байта), загрузка.

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