Что нового в DevTools, Chrome 124

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

Новая панель автозаполнения

В этой версии в DevTools появилась новая панель автозаполнения . Chrome Autofill предоставляет удобный способ автоматического заполнения форм на веб-сайтах с сохраненными адресами. Новая панель «Автозаполнение» позволяет проверять соответствие между полями формы, прогнозируемыми значениями автозаполнения и сохраненными данными.

Попробуйте новую панель на этой демонстрационной странице с тестовыми данными:

  1. В разделе «Автозаполнение профиля» нажмите любую кнопку « Заполнить форму…» , нажмите «Отправить» , затем в поле «Сохранить адрес?» диалоговом окне нажмите «Сохранить » и вернитесь на страницу с формой.
  2. Откройте DevTools и вызовите событие автозаполнения: выберите поле формы и выберите адрес из раскрывающегося списка.

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

Панель автозаполнения.

Дополнительные сведения см. в разделе Изучение форм и автозаполнение .

Улучшенное регулирование сети для WebRTC.

Благодаря новому добавлению параметров, связанных с пакетами, в настраиваемые профили регулирования сети, вы теперь можете регулировать свои приложения WebRTC прямо в DevTools. Это полезно для тестирования реализации связи в реальном времени без необходимости использования стороннего программного обеспечения.

Новые параметры: потеря пакетов (в процентах), длина очереди пакетов (количество пакетов) и флаг переупорядочения пакетов .

До и после добавления новых параметров, связанных с пакетами, в настраиваемые профили регулирования.

Чтобы регулировать соединение WebRTC, укажите параметры, связанные с пакетами, в настраиваемом профиле в «Настройки» > «Регулирование» и выберите его на панели «Сеть» .

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

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

Поддержка анимации с прокруткой на панели «Анимации».

Панель «Анимации» теперь позволяет просматривать анимацию, управляемую прокруткой .

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

Группа анимаций, управляемых прокруткой, отмеченных значком мыши.

В обзоре появится группа анимации , отмеченная значком . Теперь вы можете его проверить . Группа показывает значения пикселей вместо миллисекунд на временной шкале .

Улучшена поддержка вложенности CSS в разделе «Элементы» > «Стили».

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

До и после добавления отступов и заключения вложенных стилей в фигурные скобки.

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

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

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

Скрыть функции и их дочерние элементы в диаграмме пламени

Чтобы отфильтровать шум из диаграммы пламени в Performance > Main , вы теперь можете скрыть ненужные функции и их дочерние элементы. На диаграмме пламени щелкните правой кнопкой мыши функцию и выберите параметр в контекстном меню.

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

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

Стрелки от выбранных инициаторов к событиям, которые они инициировали

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

До и после отображения стрелок от выбранных к инициированным событиям и именованных ссылок вместо показа.

Кроме того, у всех инициаторов теперь есть поля «Инициатор для» на вкладке «Сводка» , а поля «Инициатор для» и «Инициировано кем» имеют именованные ссылки вместо «Показать» .

Проблемы с хромом: 325604258 , 325024819 , 326055289 .

Маяк 11.6.0

На панели «Маяк» теперь работает Lighthouse 11.6.0. См. полный список изменений .

Среди заметных изменений — новая опция « Включить выборку JS» . По умолчанию этот параметр отключен.

До и после добавления настройки выборки JS.

Включение выборки JS добавляет подробные стеки вызовов JavaScript в трассировку производительности, но может замедлить создание отчетов.

Трассировка производительности без (слева) и с (справа) выборкой JS.

Трассировка доступна в меню «Инструменты > «Просмотр нерегулируемой трассировки» после создания отчета Lighthouse .

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

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

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

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

До и после отображения описательной подсказки для особых групп объектов.

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

Приложение > Обновления хранилища

В этой версии добавлено несколько обновлений в разделе «Приложение» > «Хранилище» .

Байты, используемые для общего хранилища

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

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

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

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

Web SQL полностью устарел

Chrome прекратил поддержку Web SQL в версии 119 и удалил в этой версии пробный токен устаревания, поэтому вы больше не можете использовать Web SQL.

Следуя этому примеру, DevTools удалил раздел Web SQL с панели приложений .

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

Улучшения панели покрытия

В этой версии на панели «Покрытие» появилось несколько обновлений:

  • Строка состояния теперь правильно рассчитывает статистику использования отфильтрованных URL-адресов. Раньше вместо суммирования данных об использовании дочерних элементов, соответствующих фильтру, складывались данные их родительских элементов.

До и после правильного расчета статистики соответствующих детей.

  • Цвет используемого кода теперь серый, а не зеленый, чтобы улучшить видимость, особенно при отсутствии зеленого цветового зрения.

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

Выпуск хрома: 41494198 , 329253687 .

Панель «Слои» может быть устаревшей.

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

Предупреждающий баннер о возможном прекращении поддержки в верхней части панели «Слои».

Не стесняйтесь поделиться своими мыслями и опасениями, прежде чем команда примет окончательное решение о прекращении поддержки панели.

Прекращение поддержки JavaScript Profiler: четвертый этап, заключительный

В этой версии панель JS Profiler полностью устарела и больше не может быть повторно включена.

Для профилирования производительности ЦП используйте панель «Производительность» .

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

Разное

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

  • Сеть :
    • Исправлена ​​ошибка с некорректным парсингом многострочных куки ( 325410304 ).
    • Исправлен предварительный просмотр стека вызовов в столбце «Инициатор» ( 327665602 ).
  • Монитор производительности : флажки отслеживания теперь такие же, как и в остальной части пользовательского интерфейса ( 1467464 ).
  • Источники : добавлена ​​подсветка синтаксиса для документов XHTML ( 327940244 ).
  • Настройки > Устройства : старый Galaxy Fold заменен на более новый Galaxy Z Fold 5 ( 40113439 ).
  • Производительность : все совпадающие результаты поиска теперь выделяются при поиске с помощью Ctrl / Cmd + F ( 1523279 ).
  • Ресурсы для разработчиков : теперь также отображаются ресурсы, загруженные через языковые расширения, такие как расширение Chrome для поддержки C/C++ DevTools (DWARF) ( 40746829 ).
  • Производительность : исправлен обрезанный стек вызовов и его некорректное расположение на вкладке «Сводка» ( 325314708 ).
  • Ящик : Кнопки закрытия теперь фокусируются, поэтому панели можно закрывать с помощью клавиатуры.

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

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

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

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

Что нового в DevTools

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