Новинки DevTools (Chrome 96)

Published on Updated on

Translated to: English, Español, Português, 한국어, 中文, 日本語

Переводы предоставлены Alena Batitskaya. Редактор — Maxim Salnikov.

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

Ранний доступ: Новая вкладка Обзор CSS

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

Можно получить и более подробную информацию. Например, кликните на цвет в секции Цвета, чтобы увидеть список всех элементов, к которым применяется выбранный цвет. Кликните на элемент, чтобы увидеть его на вкладке Элементы (Elements).

Вкладка Обзор CSS (CSS Overview) пока в раннем доступе. Наша команда все еще активно работает над ней, и мы ждем ваши отзывы для дальнейших улучшений.

Читайте эту статью, чтобы узнать больше о вкладке Обзор CSS (CSS Overview).

Вкладка Обзор CSS

Задача в трекере Chromium: 1254557

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

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

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

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

Вы можете отключить эти функции, сняв галочку с чекбокса Настройки (Settings) > Экспериментальные функции (Experiments) > Enable CSS length authoring tools in the Styles pane.

Задачи в трекере Chromium: 1259088, 1172993

Обновления вкладки Отрисовка (Rendering)

Эмуляция CSS-медиафункции prefers-contrast

Эмуляция CSS-медиафункции prefers-contrast

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

Откройте Командное меню (Command Menu), выполните команду Показать "Отрисовка" (Show Rendering) и выберите нужное значение в выпадающем меню Эмулировать медиафункцию CSS prefers-contrast (Emulate CSS media feature prefers-contrast).

Задача в трекере Chromium: 1139777

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

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

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

Откройте Командное меню (Command Menu), запустите команду Показать "Отрисовка" (Show Rendering) и выберите значение Эмулировать автоматическую тёмную тему (Emulate auto dark mode) в выпадающем меню.

Эмуляция функции создания автоматической тёмной темы в Chrome

Задача в трекере Chromium: 1243309

Копируйте объявления как JavaScript в панели Стилей (Styles)

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

В панели Стили (Styles) кликните правой кнопкой мыши на CSS-правиле.  Вы можете выбрать Копировать объявление как JS (Copy declaration as JS), чтобы скопировать одно правило, или Копировать все объявления как JS (Copy all declarations as JS), чтобы скопировать все правила.

В частности, пример ниже скопирует padding-left: '1.5rem' в буфер обмена.

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

Задача в трекере Chromium: 1253635

Новая вкладка Полезная нагрузка (Payload) на вкладке Сеть

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

Панель Полезная нагрузка на вкладке Сеть

Задача в трекере Chromium: 1214030

Улучшенное отображение свойств в панели Свойства (Properties)

Панель Свойства (Properties) теперь показывает только соответствующие свойства вместо всех свойств экземпляра.

Вместе с улучшением вкладки Свойства (Properties) в Chrome 95 вы теперь можете легче находить соответствующие свойства.

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

Задача в трекере Chromium: 1226262

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

Опция для скрытия ошибок CORS в Консоли

Вы можете скрыть ошибки CORS в Консоли (Console). Поскольку ошибки CORS теперь показываются в панели Проблемы (Issues), панель Консоль (Console) выглядит менее загроможденной.

В Консоли (Console) кликните на иконку Настройки (Settings) и уберите галочку с чекбокса Показывать ошибки CORS в консоли (Show CORS errors in console).

Опция для скрытия ошибок CORS в Консоли

Задача в трекере Chromium: 1251176

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

Объекты Intl теперь имеют удобный предварительный просмотр и быстро оцениваются в Консоли (Console). Ранее объекты Intl не подвергались энергичным вычислениям.

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

Задача в трекере Chromium: 1073804

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

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

Стек трассировки async

Задача в трекере Chromium: 1254259

Сохранение боковой колонки в Консоли

Боковая колонка в Консоли (Console) остается на своем месте. В Chrome 94 мы анонсировали предстоящее упразднение боковой колонки в Консоли и попросили разработчиков высказать свои размышления и сомнения по этому поводу.

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

Боковая колонка в Консоли

Задачи в трекере Chromium: 1232937, 1255586

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

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

Задача в трекере Chromium: 1084190

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

Чтобы включить эксперимент, поставьте галочку в чекбоксе напротив пункта Enable Reporting API panel in the Application panel во вкладке Настройки (Settings) > Экспериментальные функции (Experiments).

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

С включенным экспериментом вы теперь можете просматривать статус отчётов в панели Reporting API во вкладке Приложение (Application).

Пожалуйста, обратите внимание что секция Endpoints пока находится в активной разработке (пока не показывает конечные точки отчетности).

Читайте больше о Reporting API в этой статье.

Панель Reporting API на вкладке Приложение

Задача в трекере Chromium: 1205856

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

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

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

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

  • Отправьте нам предложение или отзыв через crbug.com.
  • Сообщите о проблеме, связанной с DevTools, используя Больше опций (More options)   More   > Справка (Help) > Сообщить о проблемах в инструментах разработчика (Report a DevTools issues) в DevTools.
  • Твитните на @ChromeDevTools.
  • Оставьте комментарии под What's new in DevTools видео на YouTube.

Больше новинок DevTools

Чтобы увидеть полный список обновлений, перейдите на английскую версию по ссылке What's New In DevTools. Ниже перечислены материалы, переведенные на русский язык.

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.