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

Джеселин Йен

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Эмулировать функцию 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.

Что нового в DevTools

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