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

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

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

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

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

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

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

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

Более подробную информацию см. в разделе Изучение форм и автозаполнения .

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

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

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

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

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

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

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

Поддержка анимации с помощью прокрутки на панели «Анимация»

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

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

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

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

Улучшенная поддержка вложенности CSS в Элементах > Стили

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

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

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

Панель улучшенной производительности

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

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

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

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

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

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

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

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

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

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

Маяк 11.6.0

Панель Lighthouse теперь работает под управлением 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 .

Разные моменты

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

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

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

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

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

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

Что нового в DevTools

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