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

Published on Updated on

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

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

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

Пользуйтесь DevTools на своём языке

Chrome DevTools теперь поддерживает более 80 языков, позволяя вам работать на предпочитаемом вами языке!

Откройте Settings, выберите предпочитаемый язык в выпадающем меню Preferences > Language и перезапустите DevTools.

Изменение языка в Settings > Preferences

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

Новые устройства Nest Hub в списке девайсов

Теперь вы можете симулировать разрешения экранов устройств Nest Hub и Nest Hub Max в режиме устройств.

Кликните на иконку Toggle Device Toolbar   Toggle Device Toolbar  , выберите Nest Hub или Nest Hub Max в списке устройств.

Nest Hub в режиме симуляции

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

Информация об origin trials в свойствах фрейма

Вы можете получить информацию об origin trials сайта в детальном представлении фрейма вкладки Application.

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

Откройте страницу с origin trials (например, демо-страницу). Во вкладке Application прокрутите вниз до секции Frames и выберите верхний фрейм.

Origin trials в панели свойств фрейма

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

Новый значок для выражений от контейнера

Новый значок container добавляется рядом с элементами-контейнерами (элементы-предки, соответствующие критериям условий директивы @container). Кликните на значок, чтобы переключить отображение наложения выбранного контейнера и всех его запрашивающих потомков на странице.

Значок для выражения от контейнера

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

Новый чекбокс для инвертирования фильтров сети

Используйте новый чекбокс Invert, чтобы инвертировать фильтры во вкладке Network.

Например, вы можете написать "status-code: 404", чтобы показать только сетевые запросы со статусом 404. Установите флажок Invert, чтобы инвертировать фильтр (показать все сетевые запросы, не имеющие статуса 404).

Инвертирование фильтра сетевых запросов

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

Предстоящее упразднение боковой колонки Console

Боковая колонка Console будет убрана в пользу перемещения интерфейса фильтра в панель инструментов. У Вас есть вопросы или отзывы? Дайте нам знать через эту задачу в трекере.

Сообщение о предстоящем удалении боковой колонки в панели Console

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

Отображение необработанных заголовков Set-Cookie во вкладках Issues и Network

DevTools теперь отображает необработанные заголовки Set-Cookie во вкладке Issues.

Раньше DevTools не показывали неправильно сформированные куки (с неправильным заголовком Set-Cookie) в панели Network. С добавлением нового фильтра response-header-set-cookie в панели Network, пользователи могут отфильтровывать запросы с необработанным заголовком Set-Cookie. DevTools будет ссылаться с необработанных заголовков Set-Cookie во вкладке Issues на вкладку Network.

Необработанный заголовок 'Set-Cookie' во вкладке Issues и в панели Network

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

Последовательное отображение нативных аксессоров как собственных свойств в консоли

Console теперь последовательно отображает нативные аксессоры в виде собственных свойств объекта.

Например, при оценке выражения new Int8Array([1, 2, 3]) в Console, такие нативные аксессоры как length, byteOffset не отображались в превью. В последнем обновлении нативные аксессоры показываются в превью и значения подсчитываются при раскрытии.

Последовательное отображение нативных аксессоров как собственных свойств в консоли

Задача в трекере Chromiums: 1076820, ​​1199247

Правильная трассировка стека ошибок для встроенных скриптов с #sourceURL

DevTools теперь выполняет встроенные скрипты с #sourceURL и показывает правильные трассировки стека ошибок для отладки.

Ранее DevTools отображал неправильное местоположение встроенных скриптов с #sourceURL, относительно окружающего документа, а не открывающего тега <script>.

Правильная трассировка стека ошибок для встроенных скриптов с #sourceURL

Задача в трекере Chromiums: 1183990, ​​578269

Изменение формата цвета в панели Computed

Теперь вы можете изменить формат цвета любого элемента в панели Computed, удерживая Shift и кликнув на превью цвета.

Shift+клик на превью цвета для изменения формата

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

Замена кастомных всплывающих подсказок на нативные HTML-подсказки

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

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

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

Всплывающая подсказка в DevTools

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

[Эксперимент] Скрытие задач во вкладке Issues

Чтобы включить эксперимент, установите флажок Enable hide issues menu в разделе Settings > Experiments.

Включите эксперимент hide issues menu, чтобы скрыть проблемы во вкладке Issues. Это способ сосредоточиться только на важных для вас проблемах.

Во вкладке Issues наведите курсор на проблему, кликните на иконку меню   More   справа и выберите Hide issues like this, чтобы скрыть её.

Экспериментальное меню для скрытия задач

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

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

Рассмотрите возможность использования 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 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.