Полезные фичи Chrome DevTools

Открываем еженедельную рубрику, в которой будем делиться полезными советами. Они могут пригодиться как начинающим специалистам, так и более опытным коллегам 👨‍💻

Наш старший разработчик, Ирина, раскрывает тонкости меню состояний элемента Chrome DevTools 👀

Часто разработчики и тестировщики сталкиваются с тем, что нужно получить доступ к стилям, привязанным к определенному состоянию элемента 💬

Что делать, если нужно посмотреть/отредактировать стили выпадающих списков в реальном времени, но при переключении на инструменты разработчика браузера фокус со страницы уходит, и элемент скрывается? Или нужно проверить корректное отображение стилей при определенных состояниях элемента ❓

Chrome DevTools позволяют нам сделать и то, и другое с помощью меню состояния элемента. Найти это меню можно на панели действий в разделе Элементы > Стили при нажатии кнопки :hov.

Для быстрого поиска эмуляции фокуса страницы можно также воспользоваться поиском: нажимаем Cmd+Shift+P (Ctrl+Shift+P), в появившемся поиске вводим "Эмулировать страницу в фокусе" ("Emulate page focus") 🤔

На следующей неделе предложим альтернативное решение, которое позволит проверить состояние элементов страницы в определенный момент времени 👍

🔥 - классный совет, буду использовать
👍 - жду еще полезных советов
🤔 - база, и до этого знал

#devtools #frontend #qa