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

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

Официальная коллекция расширений Recorder доступна

Официальная коллекция расширений для экспорта и воспроизведения теперь доступна.

Чтобы открыть коллекцию непосредственно из устройства записи , выберите Экспорт» > «Получить расширения...» на панели действий в верхней части панели устройства записи .

Улучшения сети

В этой версии панель «Сеть» содержит ряд улучшений.

Причина сбоя в столбце Статус

В столбце «Состояние» теперь всегда отображается причина сбоя. Раньше нужно было включить Большие строки запроса или выбрать запрос в таблице.

До и после отображения причины сбоя в столбце Статус.

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

Улучшенное подменю «Копировать»

Подменю «Копировать» запроса теперь организовано лучше.

До и после улучшения подменю «Копировать».

Кроме того, опция «Копировать как cURL» теперь копирует правильную команду в буфер обмена в Windows.

Проблемы с хромом: 1267033 , 1276452 , 798498 .

Улучшения производительности

Эта версия содержит ряд улучшений на панели «Производительность» .

Хлебные крошки на временной шкале

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

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

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

Инициаторы событий на Главном треке

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

  • Недействительность стиля или макета -> Пересчитать стили или макет
  • Запросить кадр анимацииЗапущен кадр анимации
  • Запросить обратный вызов в режиме ожидания -> Обратный вызов в режиме ожидания
  • Установить таймер -> Таймер сработал
  • Создать WebSocket -> Отправить... и получить рукопожатие WebSocket или уничтожить WebSocket

Чтобы увидеть стрелки, найдите такое событие в трассировке и щелкните его. Ранее эта функция была экспериментом.

Стрелка от запроса и срабатывание обратного вызова в режиме ожидания.

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

Меню выбора экземпляра виртуальной машины JavaScript для Node.js DevTools

На панели «Производительность» Node.js DevTools теперь можно выбрать экземпляр виртуальной машины JavaScript из соответствующего раскрывающегося меню на панели действий. Похожая функция была доступна в JavaScript Profiler, который скоро станет устаревшим .

До и после добавления нового меню, позволяющего выбрать экземпляр виртуальной машины JavaScript.

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

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

В этой версии панель «Элементы» содержит ряд улучшений.

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

Псевдоэлемент ::view-transition теперь доступен для редактирования в стилях.

Теперь вы можете редактировать псевдоэлементы CSS ::view-transition в стилях, используя таблицу стилей инспектора.

Поддержка псевдоэлементов перехода вида до и после редактирования.

Дополнительные сведения см. в разделе Плавные и простые переходы с помощью API View Transitions .

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

Поддержка свойства align-content для блочных контейнеров.

Свойство align-content теперь работает с любыми блочными контейнерами , включая table-caption и table-cell . Раньше работало только с сеткой и флексом.

Поддержка выравнивания содержимого до и после в блочных контейнерах.

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

Новый ярлык и команда в источниках

Теперь вы можете Cmd (Mac)/ Ctrl (Win) + Shift + щелкнуть номер строки в источниках, чтобы создать точку журнала. Этот ярлык является дополнением к уже существующему Cmd (Mac)/ Ctrl (Win) + клик для условных точек останова.

Меню команд получает новую команду «Показать активный файл на боковой панели навигатора» , которая выполняет то же самое, что и соответствующий параметр в раскрывающемся меню редактора .

Новая команда для отображения активного файла на боковой панели навигатора.

Проблемы с хромом: 1486933 , 1467464 .

Поддержка позы для эмулируемых складных устройств.

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

Выпадающее меню с опциями позы.

Кроме того, в списке «Устройства» появилось новое эмулируемое складное устройство: Asus Zenbook Fold.

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

Динамическая тематика

DevTools теперь автоматически соответствует цветовой теме Chrome. Чтобы установить тему:

  1. Откройте новую вкладку и нажмите Настроить Chrome» в правом нижнем углу.
  2. В разделе «Внешний вид» выберите тему с помощью . Измените темы или выберите цветовую палитру.

DevTools соответствует цветовой теме, выбранной в разделе «Внешний вид».

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

Предупреждения об отказе от сторонних файлов cookie на панелях «Сеть» и «Приложения».

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

В сети найдите запрос со значком , щелкните его и откройте вкладку «Файлы cookie» .

До и после захвата сторонних файлов cookie на панели «Сеть».

В приложении перейдите в раздел «Хранилище» > «Файлы cookie» и щелкните домен. Файлы cookie, выделенные желтым цветом, не сохраняются в браузере.

До и после выделения сторонних файлов cookie на панели приложения.

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

Кроме того, файлы cookie в таблице теперь по умолчанию сортируются по имени.

Проблемы с хромом: 1506225 , 1503961 .

Маяк 11.4.0

На панели «Маяк» теперь работает Lighthouse 11.4.0. См. полный список изменений . Среди заметных изменений — новый аудит, который позволяет вам определить, использует ли ваш сайт сторонние файлы cookie.

Аудит, который обнаруживает сторонние файлы cookie.

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

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

Доступность

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

  • Когда вы открываете «Настройки» > «Эксперименты» , поле поиска теперь автоматически оказывается в фокусе.
  • Кнопка «Очистить ввод» в разделе «Сеть» > «Фильтр» теперь доступна для фокуса.
  • Дерево файлов в разделе «Источники» > «Страница» теперь отображается правильно в режиме высокой контрастности.
  • Программы чтения с экрана теперь корректно сообщают следующее:
    • Состояние флажков в разделе «Источники» > «Точки останова» .
    • Информация о позиции и индексе для списка предложений.
    • Результат действия при добавлении или удалении локации в «Настройки» > «Местоположения» .
    • Группы правил исключения (общие или пользовательские) в Настройки > Список игнорирования .

Проблемы с хромом: 1504938 , 1499868 , 1512161 , 1515224 , 1515418 , 1516998 , 1517015 .

Разное

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

  • Анимации :
    • Исправлена ​​ошибка с отображением всплывающего окна скриншота за пределами границ ( 1506991 ).
    • Исправлена ​​ошибка, из-за которой удаленные узлы анимации не были помечены как удаленные ( 1506561 ).
  • Сеть :
    • Переопределение заголовка : исправлена ​​ошибка с ложным значком фиолетовой точки на вкладке «Заголовки» ( 1507856 ).
    • Предварительный просмотр : Исправлена ​​ошибка с ненужным двойным декодированием ( 1509336 ).
    • Исправлена ​​ошибка, из-за которой не отображались короткие запросы ( 1509862 ).
  • Приложение > IndexedDB : изменено расположение кнопок на панели действий для обеспечения единообразия с другими панелями ( 1393800 ).
  • Датчики : исправлена ​​ошибка с неправильным успешным обратным вызовом при недоступном местоположении ( 1486859 ).
  • Производительность :
    • Кнопка «Собрать мусор» теперь имеет соответствующий значок «швабра» вместо «корзины» ( 1507530 ).
    • Трассировка производительности теперь сохраняет данные при переходе к about:blank ( 1509947 ).

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

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

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

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

Что нового в DevTools

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