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

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

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

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

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

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

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

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

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

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

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

Всплывающая подсказка с указанием веса специфичности селектора.

Проблема Chromium: 1204932 .

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

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

Всплывающая подсказка со значением пользовательского свойства CSS.

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

Проблема Chromium: 1380779 .

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

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

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

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

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

Быстрый способ установки условных точек останова

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

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

Проблема Chromium: 1405767 .

Приложение > Меры по предотвращению отказов при отслеживании посещений

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

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

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

В разделе «Меры по устранению проблем с отслеживанием отказов» указано удаление данных из штата.

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

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

Маяк 10.2.0

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

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

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

Номер выпуска Chromium: 772558 .

По умолчанию игнорировать скрипты содержимого.

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

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

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

Внедрение скриптов контента расширениями включено по умолчанию. Найти эту опцию можно в разделе «Настройки», затем в списке «Игнорировать».

Кроме того, текст флажков в списке «Игнорировать» стал более понятным.

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

Сеть > Форматирование ответа по умолчанию

В панели «Сеть > Ответы» теперь по умолчанию отображается форматированный текст минифицированных ответов, аналогично панели «Источники» .

В окне ответа на вкладке «Сеть» включена функция форматированного вывода информации.

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

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

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

Различные важные моменты

В этом релизе внесены следующие существенные исправления и улучшения:

  • Настройки. Настройки > Устройства : Добавлен Facebook для Android версии 407 на 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.

Что нового в инструментах разработчика

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