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

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

Новый раздел для пользовательских свойств в Элементах > Стили

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

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

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

Больше улучшений локального переопределения

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

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

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

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

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

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

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

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

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

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

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

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

До и после выполнения поиска отображаются все совпадения в каждой строке.

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

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

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

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

Оптимизированное рабочее пространство на панели «Источники»

Функция рабочего пространства на панели «Источники» теперь более функциональна:

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

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

Посмотрите на новую настройку и рабочий процесс в действии:

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

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

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

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

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

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

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

До и после красивой печати и подсветки синтаксиса правил спекуляции типа скрипта.

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

Проблема с хромом: 1473875 .

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

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

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

Проблема с хромом: 1424879 .

Маяк 11

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

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

Проблема с хромом: 772558 .

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

DevTools теперь поддерживает больше сочетаний клавиш для навигации:

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

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

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

Разные моменты

Вот некоторые важные исправления и улучшения в этом выпуске:

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

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

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

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

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

Что нового в DevTools

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