🟡 Скриншоты при загрузке страницы
Зачем:
Отлавливать баги при построении страницы: мигающие элементы, спиннеры, прогресс-бары, проблемы с 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 — поиск
🐸 Библиотека тестировщика
#тест_драйв