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

Jecelyn Yeen

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

Панель «Производительность» теперь очищает снимок экрана и трассировку при нажатии кнопки «Начать профилирование и перезагрузить страницу» .

Раньше на панели «Производительность» отображалась временная шкала со скриншотами из предыдущих записей. Из-за этого было трудно определить, когда началось фактическое измерение. Панель теперь всегда сначала переходит к странице about:blank чтобы гарантировать начало записи с пустой трассы. Это соответствует панели Performance Insights, которая уже сделала то же самое.

Проблемы с хромом: 1101268 , 1382044.

Обновления рекордера

Просмотрите и выделите код вашего пользовательского процесса в Recorder.

Теперь Recorder предлагает разделенное представление кода, что упрощает просмотр кода пользовательского потока. Чтобы получить доступ к представлению кода, откройте пользовательский поток и нажмите «Показать код» .

Устройство записи выделяет соответствующий код при наведении указателя мыши на каждый шаг слева, что позволяет легко отслеживать ход выполнения. Вы можете изменить формат кода, используя раскрывающийся список, который позволяет переключаться между форматами, такими как сценарий Nightwatch Test .

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

Настройка типов выбора записи

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

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

Редактируйте пользовательский поток во время записи

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

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

Автоматическая красивая печать на месте

Панель «Источники» теперь автоматически печатает минимизированные исходные файлы на месте. Вы можете нажать на красивую кнопку печати { } чтобы отменить это действие.

Раньше на панели «Источники» по умолчанию отображался минимизированный контент. Чтобы отформатировать контент, приходилось вручную нажимать красивую кнопку печати. Вдобавок ко всему, красиво напечатанный контент отображался не на той же вкладке, а на другой вкладке ::formatted .

Проблемы с хромом: 1383453 , 1382752 , 1382397.

Улучшенная подсветка синтаксиса и встроенный предварительный просмотр для Vue, SCSS и других приложений.

На панели «Источники» улучшена подсветка синтаксиса для нескольких широко используемых форматов файлов, что позволяет вам легче читать код и распознавать его структуру, включая Vue, JSX, Dart, LESS, SCSS, SASS и встроенный CSS.

Кроме того, DevTools также улучшил встроенный предварительный просмотр для Vue, встроенного HTML и TSX. Наведите указатель мыши на переменную, чтобы просмотреть ее значение.

Кроме того, DevTools теперь отображает исходную карту таблицы стилей на панели «Источники» . Например, когда вы открываете файл SCSS, вы можете получить доступ к соответствующему файлу CSS, щелкнув ссылку исходной карты.

Проблемы с хромом: 1385374 , 1385632 , 1385281 , 1385269 , 1383892 , 1361862 , 1383451 , 1392106 , 1149734.

Эргономичное и последовательное автозаполнение в консоли.

DevTools расширяет возможности автозаполнения, реализуя следующие изменения:

• Tab всегда используется для автозаполнения.
• Поведение Arrow right и Enter зависит от контекста.
• Функция автозаполнения одинакова для всех текстовых редакторов, на панелях «Консоль» , «Источники» и «Элементы» .

Например, вот что происходит, когда вы вводите cons в консоли :

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

• Консоль выполняет строку, когда вы нажимаете Enter . Раньше строка автоматически дополнялась лучшим предложением. Для автозаполнения нажмите Tab или Arrow Right .

• Консоль выделяет выбранный вариант при навигации по списку предложений с помощью ярлыков Arrow up и Arrow down .

• Для автоматического заполнения выбранной опции во время навигации используйте клавиши Tab , Enter или Arrow Right .

• При редактировании в середине кода, например, когда курсор находится между n и s , используйте Tab для автодополнения, Enter для выполнения строки и Arrow Right для перемещения курсора вперед.

Проблемы с хромом: 1399436 , 1276960.

Разное

Вот некоторые примечательные исправления в этом выпуске:

• Устранена проблема регрессии в DevTools, из-за которой не удавалось остановиться на операторе debugger во встроенных скриптах. ( 1385374 )
• Новый параметр консоли , который позволяет по умолчанию разворачивать или сворачивать сообщения console.trace() . Переключите настройки через «Настройки» > «Настройки» > «Развернуть сообщения console.trace() по умолчанию» . ( 1139616 )
• Панель «Фрагменты» на панели «Источники» поддерживает расширенное автозаполнение, аналогично консоли . ( 772949 )

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

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

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

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

• Отправляйте нам отзывы и запросы на добавление новых функций на crbug.com .
• Сообщите о проблеме DevTools, используя more_vert Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к видеороликам YouTube «Что нового в DevTools» или «Советы разработчика» на YouTube .

Что нового в DevTools

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