Юрий Герыш написал о работе с Chrome DevTools.

— Открыть их можно через меню (пункт «Инструменты разработчика») или нажав правой кнопкой мыши в любом месте страницы (пункт «Просмотр кода страницы»);
— Экспорт изображений в формате SVG: скопируйте содержимое тега <svg> из кода страницы и вставьте в Фигму;
— Если картинка в формате PNG, можно поискать её SVG-версию на сайте: добавьте к адресу картинки «?svg», например: «https://habr.com/img/habr-logo-ru.png?svg»;
— Меняя код CSS (вкладка Styles), можно быстро прикидывать стилевые правки;
— В Styles можно видеть и менять правила, определяющие внешний вид страницы;
— На вкладке Computed отображаются текущие свойства выбранного элемента, которые получились после применения всех правил. Например, сколько в пикселях составила ширина, которую задали в процентах;
— Меняя HTML, можно править текст, дублировать и удалять элементы;
— Так можно проверить поведение элементов в корнер-кейсах. Например, что будет, если название слишком длинное;
— Просмотр адаптивных состояний: можно задать размер окна браузера. Есть пресеты размеров популярных устройств;
— Чтобы выбирать Инспектором элементы, свёрстанные с помощью Shadow DOM (изолирование стилей элемента), включите в настройках «Show user agent shadow DOM»;
— Просмотр состояний элементов (hover, active): список состояний отображается на вкладке Styles с нажатым «:hov», либо можно выделить элемент через Инспектор и в контекстном меню нажать «Force state».

#review #chrome_devtools

Дима Мохамад тоже написал о Chrome DevTools, можно немного дополнить статью Юрия Герыша.

— Во вкладке Elements можно выделить конкретный элемент кода страницы и увидеть отступы;
— Они бывают внутренними (paddings) — отступы между содержимым элемента и его границами (например, между текстом внутри карточки и её краями) — и внешними (margins) — отступы до соседних элементов, например, между разными карточками;
— Так на дизайн-ревью можно точно сказать фронт-разработчику, какой отступ сейчас в коде и каким он должен быть;
— Через DevTools можно скачивать изображения, защищённые от скачивания через «Сохранить как…»;
— Для этого во вкладке Network в фильтре надо выбрать Img, обновить страницу, в появившемся списке всех загрузившихся изображений найти нужное, нажать правой кнопкой мыши и выбрать «Save image as…»;
— В статье есть понятные иллюстрации и инструкции, как найти и включить разные функции вроде Styles, Computed, Responsive Design Mode и так далее.

#chrome_devtools