Что нового в DevTools (Chrome 97)

Джеселин Йин

Предварительный просмотр функции: Новая панель записи

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

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

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

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

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

Панель записи

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

Обновите список устройств в режиме устройства.

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

Обновите список устройств в режиме устройства.

Проблема с Chromium: 1223525

Автозаполнение с возможностью редактирования в формате HTML

В интерфейсе «Редактировать как HTML» теперь поддерживаются автозаполнение и подсветка синтаксиса. На панели «Элементы» щелкните правой кнопкой мыши по элементу и выберите «Редактировать как HTML» . Попробуйте ввести свойство DOM (например, id , aria ), автозаполнение поможет вам найти нужное имя свойства.

Автозаполнение с возможностью редактирования в формате HTML

Проблема с Chromium: 1215072

Улучшена отладка кода.

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

Номер столбца в выходных данных ошибки

Проблема с Chromium: 1073064

[Экспериментальная функция] Синхронизация настроек DevTools между устройствами

Теперь настройки инструментов разработчика по умолчанию синхронизируются между устройствами при включении синхронизации профилей Chrome. Вы можете изменить настройки синхронизации инструментов разработчика в разделе «Настройки» > «Синхронизация» > «Включить синхронизацию настроек» .

Настройки синхронизации инструментов разработчика

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

параметры внешнего вида

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

Проблема с Chromium: 1245541

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

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

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

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

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

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