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

Руст Кулматов когда‑то рассказал о самых полезных для не‑разработчиков функциях: как менять текст, прятать и добавлять элементы, менять стили прямо на открытой странице — прочитайте советы по ссылкам, если не умеете этого делать.

А я сегодня расскажу про менее известную, но крайне полезную функцию девтулов — монитор сетевых запросов.

На нужной странице откройте девтулы клавишами F12, Command+Shift+I или Ctrl+Shift+I, в зависимости от системы. Перейдите во вкладку «Сеть», поставьте галочку «Отключить кэш» и обновите страницу. Вы увидите список сетевых запросов, которые браузер делает по ходу загрузки:

Внизу — общее количество запросов, размер ресурсов и скорость загрузки страницы

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

Вкладка «Сеть» позволяет увидеть проблемы с сетевыми запросами и найти способы оптимизировать загрузку страницы. Вот основные вещи, на которые можно обратить внимание даже не‑разработчику:

Тяжёлые ресурсы

Отсортируйте список по колонке «Размер». Подумайте, как можно уменьшить размер загружаемых файлов: попросить разработчиков оптимизировать картинки, включить сжатие кода или разбить его на части и загружать постепенно, по мере необходимости.

Медленные запросы

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

Сломанные запросы

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

Упс! Не загружается шрифт — по указанной в коде ссылке нет нужного файла

Проверка данных в запросах

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

Если не закрывать девтулы, в них будет видно все новые запросы. Так можно изучить запросы, которые отправляются по мере работы с сайтом. Например, если сайт отправляет данные о действиях пользователя в систему аналитики — вы увидите, когда это происходит и какие данные отправляются.

Такие данные отправляет Озон при добавлении товара в корзину

Заглядывайте во вкладку «Сеть» при приёмке задачи от разработчиков и периодически для профилактики. Ничего подозрительного? :‑)

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы