Юрий Герыш написал о работе с 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 141. Ускорение IndexedDB с методом getAllRecords() и новыми параметрами, обновление WebRTC Encoded Transform V2 вслед за спекой, поддержка атрибутов и свойств width и height для вложенных SVG, Proofreader API и обновления CSP в origin trials и другие. #chrome #browser

https://developer.chrome.com/release-notes/141

Отказ от XSLT в браузерах. Мейсон Фрид объявил о планах Chromium полностью удалить поддержку XSLT — технологии трансформации XML-документов, стандартизованной ещё в 1999 году. Решение связано с низким использованием (около 0,05% загрузок страниц) и высокими рисками безопасности. WHATWG, Firefox и Safari выразили поддержку. Депрекация начнётся в Chrome 143, а полное удаление ожидается в версии 155 с переходным периодом до 2027 года. #browser #chrome

https://groups.google.com/a/chromium.org/g/blink-dev/c/CxL4gYZeSJA/m/yNs4EsD5AQAJ

Новинки Chrome 142. В новой версии появился синтаксис диапазонов для CSS style queries и if(), атрибут interestfor для кнопок и ссылок, единый рендеринг <select> на мобильных и десктопах и поддержка атрибута download в SVG-ссылках. WebGPU и FedCM получили обновления, доступ к локальной сети теперь требует разрешения и многое другое. #browser #chrome

https://developer.chrome.com/release-notes/142

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

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

#chrome_devtools

Новинки Chrome 143. Добавлены улучшения в CSS, Web App Manifest и WebTransport, а также новые события Gamepad и поддержка Unicode 16. Появились JSON ответы FedCM, Web Smart Card API для изолированных приложений и выпуск цифровых удостоверений. Chromium также начинает удаление XSLT из-за рисков безопасности и низкого использования. #chrome #browser

https://developer.chrome.com/release-notes/143

CSS в Chrome, итоги 2025 года. Команда Chrome DevRel представила 17 новых CSS и UI-фич, расширяющих возможности создания динамичных веб-интерфейсов: кастомный <select>, invoker commands, scroll-state queries, функции shape() и if() и другие. Эти обновления делают дизайн более декларативным и доступным. #css #chrome

https://chrome.dev/css-wrapped-2025/

Отладка веб-перфоманса с Chrome DevTools. Жоан Леон показывает, как искать тяжелые ресурсы и слабое кеширование в Network, сравнивать локальные метрики с CrUX и разбирать LCP, CLS и INP в Performance Insights и трассировках. А также снипеты, content-visibility и оптимизация видео через HandBrake бонусом. #performance #devtools #chrome

https://calendar.perfplanet.com/2025/chrome-devtools-for-debugging-web-performance/

Новинки в Chrome 144. Появился ::search-text для стилизации подсветки поиска по странице, новый элемент <geolocation> для доступа к геоданным с более понятным запросом разрешений и восстановлением после отказа, Temporal API для современных дат и времени в JavaScript и многое другое. #chrome #browser

https://developer.chrome.com/blog/new-in-chrome-144

Попробуйте масштабирование текста в Chrome Canary. Джош Тумат объясняет, что на десктопе уже есть настройка базового размера текста, но мобильные браузеры обычно игнорируют системный размер шрифта. Элемент <meta name="text-scale"> позволяет готовым сайтам следовать настройкам пользователя на мобильных ОС. Уже под флагом Experimental Web Platform features в Canary. #chrome #a11y

https://www.joshtumath.uk/posts/2026-01-27-try-text-scaling-support-in-chrome-canary/

Новинки Chrome 145. Поддержка CSS-свойства text-justify, проценты в letter-spacing и word-spacing, а также column-wrap и column-height для мультиколонок, плюс focusVisible для focus() и улучшенный overscroll. Также добавлены объект Origin, upsert-методы для Map, window.crashReport, а строка user-agent теперь отдаётся сокращённой по умолчанию. #chrome #browser

https://developer.chrome.com/release-notes/145

Border-shape: будущее неквадратного веба. Юна Кравец рассказывает о border-shape, новом CSS-свойстве, которое меняет геометрию самого блока, поэтому фон, border-image, обводка фокуса и тень повторяют его форму. Уже доступно в Chrome Canary для тестирования. #css #chrome

https://una.im/border-shape/

Новинки Chrome 146. CSS-анимации по скролу позволяют декларативно управлять CSS-анимациями по позиции прокрутки. Sanitizer API помогает защитить приложения от XSS. WebGPU получает режим совместимости со старыми графическими API. Также добавлены Iterator.concat, мета-элемент для масштабирования текста на мобильных, улучшения Navigation API и более точные метрики LCP. #chrome #browser

https://developer.chrome.com/release-notes/146

Новинки Chrome 147. View transitions на элементах позволяют запускать несколько анимаций одновременно. CSS-функция contrast-color() возвращает чёрный или белый цвет для максимального контраста. Свойство border-shape создаёт нестандартные формы рамок: многоугольники и круги. Также добавлены Math.sumPrecise для точных сумм, диапазон scroll для именованных таймлайнов, интерфейс CSSPseudoElement, ограничения доступа к локальной сети и XML-парсер на Rust. #chrome #browser

https://developer.chrome.com/release-notes/147