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

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

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

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

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

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

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

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

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

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

Проблем с Chromium: 1506760 .

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

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

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

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

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

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

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

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

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

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

Проблем с Chromium: 1467739 .

Организаторы мероприятий на главном треке

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

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

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

Стрелка из запроса и срабатывание бездействующего обратного вызова.

Проблем с Chromium: 1434596 .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Новые сочетания клавиш и команды в Sources

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

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

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

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

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

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

Раскрывающееся меню с вариантами поз.

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

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

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

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

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

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

Проблем с Chromium: 1483276 .

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

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

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

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

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

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

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

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

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

Маяк 11.4.0

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

Аудит, выявляющий сторонние файлы cookie.

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

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

Доступность

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

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

Проблемы с Chromium: 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» .