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

София Емельянова
Sofia Emelianova
GitHub

Новый раздел для пользовательских свойств в Elements > Styles.

Панель «Элементы» теперь поддерживает правило CSS `@property` . Оно позволяет явно определять пользовательские свойства CSS и регистрировать их в таблице стилей без выполнения JavaScript.

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

Проблемы с Chromium: 1471102 , 1471103 , 1471105 .

Дополнительные улучшения в области локальных переопределений.

Продолжая серию улучшений из предыдущей версии , локальные переопределения теперь выполняют следующие действия:

  • В разделе «Источники > Страница» при щелчке правой кнопкой мыши по файлу, связанному с исходным кодом, и выборе пункта «Переопределить содержимое » в инструментах разработчика отобразится диалоговое окно, которое перенаправит вас к исходному коду. Содержимое файлов, связанных с исходным кодом, переопределить нельзя.

    Диалоговое окно, которое переводит вас к исходному коду, а не к файлу, в который вы перенаправлены.

  • На панели «Сеть» появляется новый столбец «Есть переопределения» и соответствующий фильтр has-overrides:[content|headers|yes|no] . Чтобы увидеть столбец «Есть переопределения» , щелкните правой кнопкой мыши заголовок таблицы и выберите его.

    Фильтрация по значению 'has-overrides:yes' в столбце 'Has overrides'.

  • В разделе «Источники > Переопределения» пункт меню « Удалить все переопределения» заменен на пункт «Удалить» с точным поведением.

    До и после замены «Удалить все переопределения» на «Удалить».

Предыдущая команда «Удалить все переопределения» вызывала путаницу, поскольку удаляла только те переопределения, которые были активны в текущей сессии и помечены соответствующим символом. Сохранено. Значок фиолетовой точки.

Новая опция «Удалить» сначала отображает предупреждение и запрашивает подтверждение, а затем удаляет папку, на которую вы щелкнули, вместе со всем ее содержимым.

Чтобы вернуть предыдущий вариант, поставьте галочку. Флажок. Включите параметр "Временно удалить все переопределения" в Настройки. Настройки > Эксперименты .

Проблемы Chromium: 1472952 , 1416338 , 1472580 , 1473681 , 1475668 .

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

Поиск до и после создания файла показывает все совпадения по строке.

Кроме того, скорость поиска увеличилась. Сравнение «до» (слева) и «после» (справа) смотрите в следующем видео.

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

Проблемы Chromium: 1468875 , 1472019 .

Улучшенная панель «Источники»

Упрощенное рабочее пространство на панели «Источники».

Функция рабочей области на панели «Источники» стала более удобной:

  • Единообразное именование . В частности, панель « Источники > Файловая система» была переименована в «Рабочая область» . Различные тексты пользовательского интерфейса в этой панели теперь стали понятнее и не содержат избыточной информации.
  • Улучшена настройка . Теперь вы можете использовать более удобные подсказки для перетаскивания папок или выбора папки по ссылке.

Раздел «Источники > Рабочая область» позволяет синхронизировать изменения, внесенные в Инструменты разработчика, непосредственно с исходными файлами.

Посмотрите, как работает новая система и рабочий процесс:

Проблемы с Chromium: 1473771 , 1473880 , 1473963 , 1474686 , 1474687 .

Изменить порядок панелей в разделе «Источники»

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

Проблемы с Chromium: 1473758 .

Подсветка синтаксиса и форматированный вывод для большего количества типов скриптов.

Теперь панель « Источники» может:

  • Отформатируйте встроенный JavaScript-код в следующих типах скриптов: module , importmap , speculationrules .
  • Выделите синтаксис типов скриптов importmap и speculationrules , оба из которых содержат JSON-данные.

До и после форматирования и подсветки синтаксиса скрипта правил спекулятивного выполнения.

Для получения дополнительной информации о правилах спекуляции см. раздел «Предварительная отрисовка страниц в Chrome для мгновенной навигации по страницам» .

Номер выпуска Chromium: 1473875 .

Имитация функции воспроизведения медиаконтента с пониженной прозрачностью

В Chrome 118 теперь поддерживается функция prefers-reduced-transparency медиаконтента» . Эта функция позволяет разработчикам адаптировать веб-контент к выбранным пользователем настройкам уменьшенной прозрачности в операционной системе, например, к параметру «Уменьшить прозрачность» в macOS.

Чтобы имитировать эту функцию обработки мультимедиа, откройте вкладку «Рендеринг» и прокрутите вниз до неё.

Номер выпуска Chromium: 1424879 .

Маяк 11

В панели Lighthouse теперь используется Lighthouse 11. Наиболее существенные изменения в этой версии касаются удаления устаревшей навигации, добавления новых проверок доступности и изменения способа оценки категорий доступности.

См. также полный список изменений . Чтобы узнать основы использования панели Lighthouse в инструментах разработчика, см. Lighthouse: Оптимизация скорости веб-сайта .

Номер выпуска Chromium: 772558 .

Улучшения доступности

В инструментах разработчика теперь поддерживается больше комбинаций клавиш для навигации:

  • Обзор CSS : Используйте стрелки вверх и вниз для навигации по разделам в левой боковой панели.
  • Память : В левой боковой панели наведите указатель мыши на кнопку «Сохранить» рядом со снимками экрана и нажмите клавишу Tab , затем нажмите Enter , чтобы выбрать папку.

Кроме того, исправлены несколько проблем с объявлениями программ чтения с экрана.

Проблемы Chromium: 1470401 , 1471301 , 1474108 , 1468631 .

Различные важные моменты

В этом релизе внесены следующие существенные исправления и улучшения:

  • Сеть : Новые значки для популярных типов ресурсов: media , wasm , websocket , manifest , fetch/xhr , json ( 1466298 ).
  • Обновление цветов Material 3 во многих элементах пользовательского интерфейса, особенно в панелях «Элементы» и «Производительность» ( 1456690 , 1472243 ).
  • Теперь Issues сохраняет информацию о проблемах с файлами cookie при переходе между страницами навигации ( 1466601 ).
  • Различные улучшения в работе приложения > Предварительная загрузка , в первую очередь, сортируемые сетки и пересмотренные детали набора правил ( 1410709 ).
  • Различные улучшения редактора команд в мониторе протокола , наиболее заметные из которых — предупреждения о неправильном вводе, редактирование отправленной команды, редактор параметров объектов без предопределенных ключей, поддержка перечислений, не определенных ссылками, объектов без ссылки на тип, фильтрация команд по совпадению подстрок и многое другое ( 1448050 ).
  • Диаграмма производительности получает рамку вокруг итогового прямоугольника на круговой диаграмме ( 1470147 ).
  • В настоящее время в CSS дефисы не рассматриваются как символы слов ( 1471354 ).
  • Теперь функция автозаполнения всегда сортирует ключевые слова в соответствии с CSS в конце.
  • Фильтры регулярных выражений теперь поддерживают пробелы ( 1346936 ).
  • Элементы , фиксированные, обнаружение медиа-запроса ( 1472693 ).

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

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

Свяжитесь с командой Chrome DevTools

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

Что нового в инструментах разработчика

Список всего, что было рассмотрено в серии статей «Что нового в инструментах разработчика» .