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

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

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

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

Чтобы проверить зарегистрированные пользовательские свойства, в Elements > Styles наведите курсор на имя свойства и просмотрите его дескрипторы в подсказке. В подсказке щелкните ссылку, чтобы просмотреть зарегистрированное свойство в сворачиваемом разделе @property .

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

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

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

  • В Sources > Page , когда вы нажимаете правой кнопкой мыши на файл с сопоставленным источником и выбираете Override content , DevTools отобразит диалоговое окно, которое перенаправит вас к исходному источнику. Содержимое файлов с сопоставленным источником не может быть переопределено.

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

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

    Фильтрация по значению «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 prefers-reduced-transparency . Эта функция позволяет разработчикам адаптировать веб-контент к выбранным пользователем предпочтениям по уменьшению прозрачности в ОС, таким как параметр «Уменьшить прозрачность» в 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 ).
  • Диаграмма производительности Flame Chart отображает границу вокруг общего поля на круговой диаграмме ( 1470147 ).
  • Sources теперь не обрабатывает тире как символы слов в CSS ( 1471354 ).
  • Автозаполнение теперь всегда сортирует ключевые слова с учетом CSS в конце.
  • Фильтры RegEx теперь поддерживают пробелы ( 1346936 ).
  • Элементы исправлены в обнаружении функции медиа-запроса ( 1472693 ).

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

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

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

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

Что нового в DevTools

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