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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Маяк 11.6.0

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

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

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

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

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

Трассировка доступна в меню «Инструменты more_vert» > «Просмотреть нерегулируемую трассировку» после создания отчета 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» .

Хром 124

Хром 123

Хром 122

Хром 121

Хром 120

Хром 119

Хром 118

Хром 117

Хром 116

Хром 115

Хром 114

Хром 113

Хром 112

Хром 111

Хром 110

Хром 109

Хром 108

Хром 107

Хром 106

Хром 105

Хром 104

Хром 103

Хром 102

Хром 101

Хром 100

Хром 99

Хром 98

Хром 97

Хром 96

Хром 95

Хром 94

Хром 93

Хром 92

Хром 91

Хром 90

Хром 89

Хром 88

Хром 87

Хром 86

Хром 85

Хром 84

Хром 83

Хром 82

Chrome 82 был отменен .

Хром 81

Хром 80

Хром 79

Хром 78

Хром 77

Хром 76

Хром 75

Хром 74

Хром 73

Хром 72

Хром 71

Хром 70

Хром 68

Хром 67

Хром 66

Хром 65

Хром 64

Хром 63

Хром 62

Хром 61

Хром 60

Хром 59