Эта страница переведена с помощью Cloud Translation API.

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

Jecelyn Yeen

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

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

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

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

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

Панель «Обзор CSS»

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

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

Копирование CSS и редактирование как текст восстанавливаются для свойств CSS с длиной. Эти возможности нарушены в последней версии.

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

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

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

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

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

Эмулировать функцию CSS «предпочитает контрастность мультимедиа»

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

Откройте командное меню , запустите команду «Показать рендеринг» , а затем установите раскрывающийся список «Эмуляция 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 не оценивались активно.

Международные объекты в консоли

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

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

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

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

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

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

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

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

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

Устаревшая панель «Кэш приложения» на панели «Приложение».

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

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

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

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

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

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

Узнайте больше об API отчетов из этой статьи .

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

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

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

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

Связь с командой Chrome DevTools

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

Отправьте нам предложение или отзыв через crbug.com .
Сообщите о проблеме DevTools, используя дополнительные параметры. > Справка > Сообщить о проблемах DevTools в DevTools.
Напишите в Твиттере @ChromeDevTools .
Оставляйте комментарии к нашим видеороликам «Что нового в DevTools на YouTube » или «Советы по DevTools» на YouTube .