🛠 Полезные фишки 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» часто связаны именно с портами

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

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

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