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

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

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

Новый значок CSS-подсетки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Подсветка синтаксиса.
  • Поддержка встроенных редакторов. Эти редакторы аналогичны редакторам в разделе «Элементы» > «Стили» , например, «Выбор цвета» и «Редактор динамики» .

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

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

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

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

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

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

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

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

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

  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. В частности, проверка отрисовки самого большого контента теперь содержит таблицу с расчётами фаз для моделирования и дросселирования DevTools. См. также полный список изменений .

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

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

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

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

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

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

  • Отладчик игнорирует такие скрипты и не останавливается на исключениях, которые они создают.
  • Панель «Источники» > «Стек вызовов» пропускает игнорируемые кадры. Чтобы отключить пропуск, установите флажок Флажок. Показывать игнорируемые кадры .
  • Консоль сворачивает проигнорированные кадры в трассировках стека. Нажмите «Показать ещё 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» .