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

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

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

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

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

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

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

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

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

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

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

Подсказка с указанием веса селектора.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Приложение > Устранение последствий отслеживания отказов

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

Проверьте эту функцию безопасности:

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

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

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

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

Маяк 10.2.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Разное

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

  • Настройки. Настройки > Устройства : Facebook для Android v407 на Pixel 6 добавлен в список строк агента.
  • Сеть : добавлен ярлык «Очистить журнал сети» ( 1444991 ):
    • MacOS: Команда + К.
    • 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» .