Что нового в DevTools (Chrome 96)

Джеселин Йен

Функция предварительного просмотра: новая панель обзора CSS

Используйте новую панель «Обзор CSS» , чтобы определить потенциальные улучшения CSS на вашей странице. Откройте панель «Обзор CSS» и нажмите «Создать обзор» , чтобы создать отчёт о CSS вашей страницы.

Вы можете более подробно изучить информацию. Например, щёлкните по цвету в разделе «Цвета» , чтобы просмотреть список элементов, к которым применяется тот же цвет. Щёлкните по элементу, чтобы открыть его на панели «Элементы» .

Панель обзора CSS — это функция предварительной версии. Наша команда всё ещё активно работает над ней, и мы будем рады вашим отзывам для дальнейшего улучшения.

Прочтите эту статью , чтобы узнать больше о панели обзора CSS .

Панель обзора CSS

Проблема с хромом: 1254557

Восстановлен и улучшен процесс редактирования и копирования длины CSS.

Для свойств CSS с длиной восстановлены возможности копирования CSS и редактирования как текста . В последней версии эти возможности были нарушены.

Кроме того, вы можете изменить значение единицы измерения, перетаскивая её, и обновить тип единицы измерения через раскрывающийся список. Эта дополнительная функция редактирования длины не должна влиять на основной интерфейс редактирования текста.

Если вы обнаружили какие-либо проблемы, сообщите об этом через goo.gle/length-feedback .

Вы можете отключить его, выбрав Настройки > Эксперименты > Включить инструменты разработки длины CSS на панели Стили, поставив флажок.

Проблемы с Chromium: 1259088 , 1172993

Обновления вкладки «Рендеринг»

Эмулировать медиа-функцию CSS prefers-contrast

Эмулировать медиа-функцию CSS prefers-contrast

Функция prefers-contrast media используется для определения того, запросил ли пользователь большую или меньшую контрастность на странице.

Откройте меню команд , выполните команду «Показать рендеринг» , а затем настройте раскрывающийся список предпочтений-контрастности для параметра Эмуляция CSS-медиа .

Проблема с хромом: 1139777

Эмулируйте функцию автоматической темной темы Chrome

Используйте DevTools для эмуляции автоматической темной темы, чтобы легко увидеть, как выглядит ваша страница при включенной автоматической темной теме Chrome.

В Chrome 96 появилась пробная версия Origin для Auto Dark Theme на Android. Эта функция позволяет браузеру автоматически применять тёмную тему к сайтам со светлой тематикой, если пользователь включил тёмные темы в операционной системе.

Откройте меню команд , выполните команду «Показать рендеринг» , а затем установите раскрывающийся список «Эмулировать автоматический темный режим» .

Эмулируйте функцию автоматической темной темы Chrome

Проблема с хромом: 1243309

Копировать объявления как JavaScript на панели «Стили»

В контекстное меню добавлены две новые опции для лёгкого копирования CSS-правил в виде свойств JavaScript. Эти сочетания клавиш особенно удобны для разработчиков, работающих с библиотеками CSS-in-JS .

На панели «Стили» щёлкните правой кнопкой мыши по правилу CSS. Вы можете выбрать «Копировать объявление как JS» , чтобы скопировать одно правило, или «Копировать все объявления как JS» , чтобы скопировать все правила.

Например, приведенный ниже пример скопирует paddingLeft: '1.5rem' в буфер обмена.

Копировать объявление как JavaScript

Проблема с хромом: 1253635

Новая вкладка «Полезная нагрузка» на панели «Сеть»

Используйте новую вкладку «Полезная нагрузка» на панели «Сеть» при проверке сетевого запроса с полезной нагрузкой. Ранее информация о полезной нагрузке была доступна на вкладке «Заголовки» .

Вкладка «Полезная нагрузка» на панели «Сеть»

Проблема с хромом: 1214030

Улучшено отображение свойств на панели «Свойства».

Панель «Свойства» теперь отображает только соответствующие свойства, а не все свойства экземпляра. Прототипы и методы DOM теперь удалены.

Благодаря улучшениям панели «Свойства» в Chrome 95 теперь вы можете легче находить нужные свойства.

Отображение свойств на панели «Свойства»

Проблема с хромом: 1226262

Обновления консоли

Возможность скрыть ошибки CORS в консоли

Вы можете скрыть ошибки CORS в консоли . Поскольку ошибки CORS теперь отображаются на вкладке «Проблемы», скрытие ошибок CORS в консоли может помочь уменьшить количество перегруженных данных.

В консоли нажмите значок «Настройки» и снимите флажок «Показывать ошибки CORS в консоли» .

Возможность скрыть ошибки CORS в консоли

Проблема с хромом: 1251176

Правильный предварительный просмотр и оценка объектов Intl в консоли

Объекты Intl теперь имеют корректный предварительный просмотр и обрабатываются в консоли с упреждением. Ранее объекты Intl не обрабатывались с упреждением.

Объекты Intl в консоли

Проблема с хромом: 1073804

Последовательные асинхронные трассировки стека

Консоль теперь выводит отчеты о трассировках async стека для async функций, чтобы они соответствовали другим асинхронным задачам и соответствовали тому, что отображается в стеке вызовов.

асинхронные трассировки стека

Проблема с хромом: 1254259

Сохранить боковую панель консоли

Боковая панель консоли никуда не денется. В Chrome 94 мы объявили о предстоящем прекращении поддержки боковой панели консоли и попросили разработчиков поделиться отзывами и проблемами.

Теперь мы получили достаточно отзывов об уведомлении об устаревании и будем работать над улучшением боковой панели, а не над ее удалением.

Боковая панель консоли

Проблемы с Chromium: 1232937 , 1255586

Устаревшая панель кэша приложений на панели приложений

Панель кэша приложений на панели приложений теперь удалена, поскольку поддержка AppCache прекращена в Chrome и других браузерах на базе Chromium.

Проблема с хромом: 1084190

[Экспериментальная] Новая панель API отчётности на панели приложений

API отчетности предназначен для отслеживания нарушений безопасности вашей страницы, устаревших вызовов API и многого другого.

После включения этого эксперимента вы теперь можете просматривать статус отчетов на новой панели API отчетов на панели приложений .

Обратите внимание, что раздел «Конечные точки» в настоящее время все еще находится в стадии активной разработки (пока не отображаются отчетные конечные точки).

Подробнее об API отчетности читайте в этой статье .

Панель API отчетов на панели приложений

Проблема с хромом: 1205856

Загрузите предварительные версии каналов

Рассмотрите возможность использования Chrome Canary , Dev или Beta в качестве браузера для разработки по умолчанию. Эти предварительные версии предоставят вам доступ к новейшим функциям DevTools, позволят тестировать передовые API веб-платформ и помогут обнаружить проблемы на вашем сайте раньше, чем это сделают ваши пользователи!

Свяжитесь с командой Chrome DevTools

Используйте следующие параметры для обсуждения новых функций, обновлений или чего-либо еще, связанного с DevTools.

Что нового в DevTools

Список всего, что было рассмотрено в серии «Что нового в DevTools» .