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

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

Улучшения элементов

Новый значок CSS subgrid

Панель элементов получает новый значок subgrid для подсетки . Эта функция в настоящее время является экспериментальной в Chrome Canary.

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

Значок подсетки и наложение в области просмотра.

Список всех значков на панели «Элементы» см. в справочнике «Значки» .

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

Специфичность селектора в подсказках

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

Подсказка с весом специфичности селектора.

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

Значения пользовательских свойств CSS в подсказках

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

Подсказка со значением пользовательского свойства CSS.

Команда DevTools хотела бы выразить благодарность一丝 и Suyan за реализацию этого улучшения.

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

Улучшения источников

Подсветка синтаксиса CSS

Панель «Источники» получает следующую информацию для предварительно обработанных файлов CSS , таких как SASS, SCSS и LESS:

  • Подсветка синтаксиса.
  • Поддержка встроенных редакторов. Эти редакторы похожи на те, что в Elements > Styles , например, Color Picker и Easing Editor .

Улучшенная подсветка синтаксиса CSS и поддержка встроенных редакторов в источниках.

Проблемы с Chromium: 1302261 , 1392085 .

Сочетание клавиш для установки условных точек останова

Теперь вы можете устанавливать условные точки останова быстрее с помощью сочетания клавиш. Чтобы открыть диалоговое окно точек останова, удерживайте Command (MacOS) или Control (Windows / Linux) и щелкните номер строки в левом столбце Sources > Editor .

Номер строки в левом столбце и диалоговое окно точки останова.

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

Приложение > Смягчение последствий отслеживания отказов

Эксперимент Bounce Tracking Mitigations в Chrome позволяет вам идентифицировать и удалять состояние сайтов, которые, по-видимому, выполняют межсайтовое отслеживание с использованием техники отслеживания отказов. Панель Application > Background Services получает новую вкладку Bounce Tracking Mitigations , которая позволяет вам вручную принудительно применять меры отслеживания и перечисляет сайты, состояния которых были удалены.

Ознакомьтесь с этой функцией безопасности:

  1. Блокировать сторонние файлы cookie в Chrome . Перейдите и включите Меню из трех точек. > Настройки > Безопасность. Конфиденциальность и безопасность > Файлы cookie и другие данные сайта > Переключатель отмечен. Блокировать сторонние файлы cookie .
  2. В chrome://flags установите для эксперимента Bounce Tracking Mitigations значение Enabled With Deletion .
  3. Изучите эту демонстрационную страницу , откройте Приложение > Фоновые службы > Смягчение отслеживания отказов , щелкните ссылку отказа на странице, подождите (10 секунд), пока Chrome зарегистрирует отказ, и щелкните Принудительный запуск , чтобы немедленно удалить состояние.

В списке средств отслеживания отказов указано удаление состояния.

Кроме того, вкладка «Проблемы» предупреждает вас о предстоящем удалении состояния.

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

Маяк 10.2.0

Панель Lighthouse теперь работает на Lighthouse 10.2.0. В частности, проверка Largest Contentful Paint получает таблицу с расчетами фаз для имитации и дросселирования DevTools. Смотрите также полный список изменений .

Таблица фаз LCP.

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

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

Игнорировать скрипты контента по умолчанию

The Настройки. Настройки > Список игнорирования > Флажок. Скрипты контента, внедряемые расширениями, теперь включены по умолчанию.

При включении этой настройки:

  • Отладчик игнорирует такие скрипты и не останавливается на исключениях, которые они выдают.
  • Панель Sources > Call Stack пропускает проигнорированные кадры. Чтобы отключить пропуск, отметьте здесь Флажок. Показать игнорируемые кадры .
  • Консоль сворачивает проигнорированные кадры в трассировках стека. Нажмите Показать еще N кадров , чтобы развернуть, и Показать меньше , чтобы свернуть снова.

Скрипты контента, введенные расширениями, включенными по умолчанию. Найдите это, посетив Настройки, затем Список игнорирования.

Кроме того, флажки в списке игнорирования получили более понятный текст.

Проблемы с Chromium: 1440958 , 1364501 .

Сеть > Ответить красиво-печать по умолчанию

Панель «Сеть» > «Ответ» теперь по умолчанию выводит на экран уменьшенные тексты ответов, аналогично панели « Источники» .

Включена удобная печать в окне «Ответ» на вкладке «Сеть».

Кроме того, файлы SVG подсвечиваются синтаксисом.

Подсветка синтаксиса SVG.

Проблемы с Chromium: 1382752 , 1385374 .

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

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

  • Настройки. Настройки > Устройства : добавлен Facebook для Android v407 на Pixel 6 в список строк агента.
  • Сеть : Добавлен ярлык «Очистить сетевой журнал» ( 1444991 ):
    • MacOS: Command + K
    • Windows/Linux: Control + L
  • Удален раскрывающийся список панели «Рекордер» > «Запись N» > «Аналитика производительности» ( 1414773 ).
  • Таблицы стилей, которые не удалось загрузить, теперь скрыты из дерева навигатора ( 1386059 ).
  • Производительность : Исправлено некорректное отображение расширяемой дорожки взаимодействий ( 1432510 ).
  • Элементы : таблицы стилей, которые не удалось загрузить, теперь подчеркиваются волнистыми линиями ( 1440626 ).
  • Отладчик не переходит автоматически к WebAssembly, если для соответствующего языка нет плагина ( 1443342 ).
  • Восстановлено сочетание клавиш, перемещающее курсор на одно слово за раз для CSS-файлов в Источники > Редактор ( 1241848 ):
    • MacOS: Alt + Стрелка
    • Windows/Linux: Ctrl + Стрелка

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

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

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

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

Что нового в DevTools

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