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

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

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

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

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

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

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

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

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

Восстановлены функции копирования CSS и редактирования в виде текста для свойств CSS, содержащих параметр "длина". В последней версии эти функции не работали.

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

Пожалуйста, сообщите о любых обнаруженных проблемах через goo.gle/length-feedback .

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

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

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

Имитация функции CSS prefers-contrast для работы с медиафайлами

Имитация функции CSS prefers-contrast для работы с медиафайлами

Функция «Предпочтительный контраст» используется для определения того, запросил ли пользователь более высокий или более низкий уровень контраста на странице.

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

Номер выпуска Chromium: 1139777

Имитация функции автоматической темной темы Chrome

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

В Chrome 96 появилась пробная версия функции автоматической темной темы для Android. Благодаря этой функции браузер автоматически применяет темную тему к сайтам со светлой темой, если пользователь включил темную тему в настройках операционной системы.

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

Имитация функции автоматической темной темы Chrome

Номер выпуска Chromium: 1243309

Скопируйте объявления как JavaScript в панели «Стили».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выпуск Chromium: 1251176

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

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

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

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

Согласованные трассировки стека асинхронных операций

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

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

Номер выпуска Chromium: 1254259

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

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

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

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

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

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

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

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

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

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

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

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

Подробнее об API для создания отчетов можно узнать в этой статье .

Панель API для создания отчетов в панели приложений.

Проблема Chromium: 1205856

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

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

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

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

Что нового в инструментах разработчика

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