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

Sofia Emelianova

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

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

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

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

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

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

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

  

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

  

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

  

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

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

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

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

Расширенный поиск

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Маяк 11

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

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

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

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

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

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

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

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

Разное

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

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

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

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

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

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

• Отправляйте нам отзывы и запросы на добавление новых функций на crbug.com .
• Сообщите о проблеме DevTools, используя more_vert Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к видеороликам YouTube «Что нового в DevTools» или «Советы разработчика» на YouTube .

Что нового в DevTools

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