🕵️ DevTools Network: куда смотреть новичку

Привет, коллеги! ❤️

Поговорим про вкладку Network в инструментах разработчкика в браузере (это которые кнопкой f12 включаются) 🌐

На первый взгляд, она выглядит как табличка в аэропорту: много строк, цифр и ощущение, что ваш рейс в мир АЙТИ уже улетел 🤨

Но, вообще-то говоря, для QA это один из самых полезных инструментов.

❓ Как открыть:
F12 или правый клик по странице, потом «Просмотреть код», дальше вкладка Network. Обновляем страницу и смотрим, какие запросы полетели.

Что проверять в первую очередь:

• Status. 200 обычно значит «нормально», 404 значит «не нашли», 500 значит «сервер прилёг подумать о жизни».
• Method. GET чаще получает данные, POST чаще отправляет.
• Response. Тут можно увидеть, что реально вернул сервер.
• Payload. Тут видно, что мы отправили.
• Time. Сколько запрос выполнялся.

Пример работы:
На экране ошибка «что-то пошло не так». Очень информативно, спасибо. 🙂‍↕️

А в Network видно, что запрос вернул 403. Значит, проблема может быть в правах доступа, токене или настройках пользователя.

Ещё полезно фильтровать запросы по Fetch/XHR. Так проще найти общение фронта с бэком, а не картинки, шрифты и прочую мишуру.

ИТОГО
Network помогает не гадать, а смотреть факты и понять, что случилось и на чьей стороне проблема 💡

Пользуетесь Network в проверках или пока открываете DevTools только чтобы выглядеть серьёзно?

⚡️ Подписаться

#Инструмент