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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Инициаторы мероприятий в основной сетке

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

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

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

Стрелка, полученная в результате запроса и срабатывания функции обратного вызова в режиме ожидания.

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

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

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

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

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

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

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

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

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

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

Поддержка редактирования «до» и «после» с помощью псевдоэлементов перехода между представлениями.

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

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

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

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

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

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

В разделе «Источники» появилась новая комбинация клавиш и команда.

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

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

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

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

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

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

Выпадающее меню с вариантами положения тела.

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

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

Динамическое оформление тем

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

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

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

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

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

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

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

Фотографии «до» и «после» сбора сторонних файлов cookie на панели «Сеть».

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

На панели приложения показано, как выглядят сторонние файлы cookie до и после изменений.

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

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

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

Маяк 11.4.0

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

Аудит, выявляющий файлы cookie сторонних разработчиков.

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

Номер выпуска Chromium: 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.

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

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