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

Джеселин Йен

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

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

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

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

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

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

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

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

Опыт копирования CSS и редактирования как текста восстановлен для свойств CSS с длиной. Эти опыты были сломаны в последнем выпуске.

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

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

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

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

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

Эмулировать CSS-функцию предпочтений-контрастных медиа

Эмулировать CSS-функцию предпочтений-контрастных медиа

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

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

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

Эмулируйте функцию Chrome Auto Dark Theme

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

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

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

Эмулируйте функцию Chrome Auto Dark Theme

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

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

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

На панели Styles щелкните правой кнопкой мыши по правилу CSS. Вы можете выбрать Copy Declaration as JS , чтобы скопировать одно правило, или Copy all Declarations as JS , чтобы скопировать все правила.

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

Копировать декларацию как JavaScript

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

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

Используйте новую вкладку Payload на панели Network при проверке сетевого запроса с payload. Ранее информация о payload была доступна на вкладке Headers .

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

Проблема с хромом: 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» .