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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Номер выпуска Chromium: 41175925 .

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

Теперь на панели «Анимация» можно просматривать анимации, управляемые прокруткой .

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

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

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

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

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

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

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

Панель повышения производительности

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

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

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

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

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

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

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

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

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

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

Маяк 11.6.0

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

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

До и после добавления параметра выбора варианта ответа в JavaScript.

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

График производительности без (слева) и с (справа) сэмплированием JavaScript.

Трассировка доступна в меню Tools > View Unthrottled Trace после создания отчета Lighthouse .

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

Номер выпуска Chromium: 772558 .

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

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

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

Проблема Chromium: 41490331 .

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

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

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

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

На графиках «до» и «после» показано, сколько байтов используется для общего хранилища.

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

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

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

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

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

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

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

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

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

Результаты до и после корректного расчета статистических данных о сопоставлении детей.

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

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

Проблема Chromium: 41494198 , 329253687 .

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

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

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

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

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

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

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

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

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

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