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

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

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

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

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

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

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

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

Чтобы узнать больше, см. раздел Изучение форм и автозаполнение .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Маяк 11.6.0

Панель Lighthouse теперь работает на Lighthouse 11.6.0. Полный список изменений см.

Среди заметных изменений — новая опция Enable JS sampling . Эта настройка отключена по умолчанию.

До и после добавления опции выборки 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» .