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

Jecelyn Yeen

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

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

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

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

Обновления регистратора

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

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

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

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

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

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

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

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

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

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

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

Панель Sources теперь автоматически печатает минифицированные исходные файлы на месте. Вы можете нажать на кнопку pretty print { } , чтобы отменить это.

Раньше панель Sources по умолчанию отображала минимизированный контент. Чтобы отформатировать контент, нужно было нажать кнопку pretty print вручную. Кроме того, красиво напечатанный контент отображался не на той же вкладке, а на другой ::formatted вкладке.

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

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

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

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

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

Проблемы с Chromium: 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 для перемещения курсора вперед.

Проблемы с Chromium: 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 .
• Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

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