Перейти на PRO

Для чего используется вкладка Network в инструментах разработчика браузера?

Тип вопроса: Инструменты тестирования Вероятность: 22% Категория: QA Тестировщик

Ответ

Вкладка Network в DevTools (Chrome, Firefox, Edge) — это инструмент для мониторинга и анализа всех сетевых запросов, которые браузер выполняет при загрузке и работе веб-страницы или веб-приложения.

Основные возможности и данные:

  • Таблица запросов: Список всех ресурсов (HTML, CSS, JS, изображения, API-вызовы).
  • Колонки информации:
    • Name/URL: Адрес ресурса.
    • Status: HTTP-статус код (200 OK, 404 Not Found, 500 Internal Server Error).
    • Type: Тип ресурса (XHR/Fetch для API, Document, Stylesheet).
    • Initiator: Что инициировало запрос (файл, скрипт).
    • Time/Waterfall: Время загрузки и визуализация этапов (DNS, TCP, SSL, TTFB, Content Download).
    • Size: Размер загруженных данных.

Практическое применение для отладки и оптимизации:

  1. Анализ производительности: Выявление медленно загружающихся ресурсов по колонке Time или Waterfall.
  2. Отладка API-запросов:
    • Проверка заголовков (Headers) отправляемых и получаемых запросов.
    • Анализ тела запроса (Payload) и ответа (Response) для вызовов XHR/Fetch.
    • Поиск причин ошибок (4xx, 5xx).
  3. Диагностика проблем CORS: Просмотр заголовков Origin, Access-Control-Allow-Origin.
  4. Проверка кэширования: Анализ заголовков Cache-Control и статусов (304 Not Modified).
  5. Эмуляция медленных сетей: Использование Throttling для симуляции 3G или других условий.

Как использовать:

  1. Откройте DevTools (F12 или Ctrl+Shift+I / Cmd+Opt+I).
  2. Перейдите на вкладку Network.
  3. Обновите страницу (F5), чтобы начать запись сетевой активности.
  4. Кликните на любой запрос для детального просмотра вкладок Headers, Preview, Response, Timing.

Ответ 18+ 🔞

А, ну вот, смотри, приятель, эта вкладка Network в твоих девтулзах — это же просто песня, а не инструмент! Представь себе: ты сидишь, смотришь на сайт, а он тупит, как пьяный ёж в тумане. И ты такой: «Ну что за хуйня?». А эта штука тебе всё как на блюдечке выкладывает — кто, куда и с каким скрипом ползёт.

Короче, что она умеет показывать, этот ваш «Нетворк»:

  • Вся таблица запросов: Весь этот цирк, который браузер откатывает — от главной страницы до картинки с котиком в подвале и запроса к апишке, которая тянет данные дольше, чем ящик водки в пятницу.
  • Колонки всякие полезные:
    • Name/URL: Где этот ресурс, падла, обитает.
    • Status: Статус-код, сука. 200 — всё пучком, 404 — «чё-то не нашёл, иди нахуй», 500 — «ой, всё, у меня внутри всё сломалось».
    • Type: Чего притащили — стили, скрипты, или это апишка (XHR/Fetch) дёргается.
    • Initiator: Кто виноват-то? Какой файл или скрипт эту дичь инициировал.
    • Time/Waterfall: Самое сокровенное! Время загрузки и красивая полосочка, где видно, на каком этапе твой запрос застрял, как говно в пробке: DNS, установка соединения, ожидание ответа сервера (TTFB), скачивание.
    • Size: Сколько места этот ресурс отъел.

А теперь, зачем это всё тебе, простому смертному фронтенд-страдальцу?

  1. Найти тормоза: Открыл, обновил страницу и смотришь в колонку Time. Висит какой-то скрипт 5 секунд? Вот он, корень зла! Или в Waterfall видно, что TTFB — овердохуища? Значит, сервер тупит, ебать его в сраку.
  2. Ковыряться в апишках (XHR/Fetch): Это прям святое. Кликнул на запрос — и тебе вся подноготная.
    • Headers: Что туда-сюда летело, какие куки, какой Content-Type. CORS ошибку ищешь? Вот они, заголовки Access-Control-Allow-Origin, смотри, нехуй ли?
    • Payload и Response: Что отправил и что в ответ пришло. Отладка бэкенда на расстоянии, ёпта! Пришла ошибка 500 с текстом "NPE at line 228"? Ну, бля, вот и говори потом, что это фронт кривой.
  3. Кэш глянуть: А правильно ли браузер кэширует? Смотри заголовки Cache-Control. Пришёл статус 304? Ну, значит, не зря работал, ресурс не менялся.
  4. Устроить адские условия: Вверху есть Throttling. Выбрал «Slow 3G» и обновил страничку. Сиди и смотри, как всё твоё прекрасное приложение разваливается на части, потому что картинки по 10 мегабайт. Поучительно, блядь.

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

  1. Открываешь DevTools (F12, все знают).
  2. Тыкаешь на вкладку Network.
  3. Жмёшь F5 на странице, которую хочешь потрогать. Запись началась!
  4. Видишь интересный запрос — кликаешь на него. Справа откроются вкладки Headers, Preview, Response, Timing — вот там и копай, как крот ебаный, пока не найдёшь, где собака зарыта. Или, в случае с Герасимом, утоплена.
© ХакСобесов, 2026
support@hacksobesov.com