🔍 Загрузилась ли картинка с сервера или браузер схитрил

Всё дело в кэше браузера — невидимом помощнике, который хранит копии файлов на вашем компьютере. Но как понять, что именно происходит «под капотом»? Откуда браузер взял эту картинку — скачал с сервера или достал из своих запасов?

В статье разбираем:

✅ Как увидеть в DevTools, откуда загрузился файл

✅ Где спрятан весь кэш браузера и как его посмотреть

✅ Что означают загадочные заголовки If-none-match, Etag и статус 304

🔗 Читать по ссылке

🐸 Библиотека тестировщика

#карьерный_трек

🛠 Полезные фишки Chrome DevTools — часть 1

🟡 Скриншоты при загрузке страницы

Зачем:
Отлавливать баги при построении страницы: мигающие элементы, спиннеры, прогресс-бары, проблемы с initial render и CLS.

Как включить:

F12 → Network → ⚙️ → Capture screenshots → Ctrl+R

Результат:
Лента скриншотов с таймкодами — видно, когда и в каком порядке появляются элементы.

🟡 Поиск неиспользуемого кода

Зачем:
Найти лишний CSS/JS, который замедляет загрузку и может маскировать баги.

Как найти:

F12 → Ctrl+Shift+P → Show Coverage → Start instrumenting coverage

Результат:
Таблица с процентом использованного и неиспользованного кода.
Красным отмечен код, не выполнявшийся в текущем сценарии.

Где помогает:
— лишние стили и шрифты
— подключённые, но неиспользуемые библиотеки
— избыточный CSS после редизайнов

⚠️ Coverage показывает не «плохой код», а код, который не был задействован при проверке.

🟡 Сохранение изменений локально

Зачем:
Вносить правки в HTML/CSS/JS так, чтобы они сохранялись после перезагрузки страницы.

Как настроить:

F12 → Sources → Overrides → Select folder for overrides → выбрать папку

Как сохранить файл:

Network → нужный файл → клик правой кнопкой → Save for overrides

Пример сценария:

Sources → найти файл → внести правку → Ctrl+S → обновить страницу

Изменения применяются автоматически.

⚠️ Ограничения:
— не сохраняет правки напрямую из вкладки Elements
— работает только с файлами из Sources
— CSS редактируется через Styles, если файл зафиксирован в Overrides

❗️ Полезные горячие клавиши

F12 — открыть DevTools
Ctrl+Shift+C — инспектор элементов
Ctrl+Shift+P — Command Menu
Ctrl+Shift+M — Device Toolbar
Ctrl+R — перезагрузка страницы
Ctrl+S — сохранить изменения
Ctrl+F — поиск

🐸 Библиотека тестировщика

#тест_драйв

❓ Что такое порт

Порт — это номер, который показывает, какому приложению на устройстве предназначен сетевой запрос.

Если по-простому:

IP-адрес — это дом, порт — конкретная дверь в этом доме.

📦 Один сервер → один IP → тысячи портов

Каждый порт может быть занят своим сервисом:
• 80 / 443 — веб-сайты
• 22 — SSH
• 3306 — MySQL

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

⚠️ Почему это важно для qa:

— Сервис может быть доступен, но не на том порту

— Баги «не открывается», «таймаут», «connection refused» часто связаны именно с портами

— Разные окружения = разные порты

🐸 Библиотека тестировщика

#теория_на_пальцах

📌 Базовый чек-лист тестирования (core)

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

🔤 Что проверять всегда:

• Happy path и негативные сценарии
Функция должна работать не только «как задумано», но и ломаться контролируемо.

• Границы значений
0 / 1 / max / пусто / null — именно здесь чаще всего живут баги.

• Валидация ввода
Тип данных, длина, формат. Никакой веры фронту — только факты.

• Ошибки сервера и сообщения пользователю
500-е, таймауты, сетевые ошибки. Пользователь должен понимать, что произошло.

• Повторные действия
Double click, refresh, кнопка Back. Приложения ломаются не от кликов, а от повторов.

• Сохранение состояния
Перезагрузка страницы, смена вкладки, возврат назад. Состояние не должно «исчезать».

🐸 Библиотека тестировщика

#артефакт #intern