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

Джеселин Йен

Функция предварительного просмотра: новая панель «Рекордер»

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

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

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

Перейдите к документации панели Recorder , чтобы узнать больше с помощью пошагового руководства!

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

Панель регистратора

Проблема с хромом: 1257499

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

При включении панели инструментов устройств в список устройств теперь добавлено больше современных устройств. Выберите устройство, чтобы смоделировать его размеры.

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

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

Автодополнение с функцией редактирования как HTML

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

Автодополнение с функцией редактирования как HTML

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

Улучшенный опыт отладки кода

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

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

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

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

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

Настройки синхронизации DevTools

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

настройки внешнего вида

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

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

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

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

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

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

Что нового в DevTools

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