Секретные фишки Google Chrome DevTools

Фишка 1: Идеальный скриншот конкретного HTML-узла
Часто нужно скинуть дизайнеру или заказчику скриншот отдельного блока (например, только сверстанной шапки или карточки), но вырезать его ножницами из экрана неудобно.
Откройте DevTools (F12) и выберите нужный тег во вкладке Elements.
Нажмите комбинацию клавиш Ctrl + Shift + P (на Mac: Cmd + Shift + P), чтобы открыть командное меню.
Введите слово screenshot и выберите пункт Capture node screenshot.
Браузер сделает скриншот ровно этого элемента с идеальным качеством, прозрачным фоном (если нет задника) и сохранит его как картинку!

Фишка 2: Эмуляция дефектов зрения (Проверка доступности)
Хороший интерфейс должен быть доступен всем, включая людей с дальтонизмом. Проверить, как видят ваш сайт разные пользователи, можно прямо в Chrome:
Откройте DevTools и снова вызовите командную строку через Ctrl + Shift + P (или Cmd + Shift + P).
Наберите слово Rendering и нажмите Enter. Откроется одноименная панель внизу.
Проскролльте ее до пункта Emulate vision deficiencies (Эмулировать дефекты зрения).
Выберите, например, Deuteranopia (протанопия/дейтеранопия) или Blurred vision (размытое зрение).
Вы увидите, как весь ваш сайт налету изменит цвета. Это сразу покажет, не сливаются ли важные кнопки с фоном и считывается ли текст.

#полезнаястатья