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

Джеселин Йин

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

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

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

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

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

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

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

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

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

Просмотр кода в программе записи событий.

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

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

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

Новая опция для настройки типов селекторов.

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

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

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

Редактирование во время записи пользовательского сценария.

Выпуск Chromium: 1381971

Автоматическая печать красивых изображений на месте

Теперь панель «Источники» автоматически форматирует минифицированные исходные файлы непосредственно в окне форматирования. Вы можете отменить это действие, нажав на кнопку форматирования { } .

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

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

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

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

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

Подсветка синтаксиса в Vue.

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

Встроенный предварительный просмотр для Vue.

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

Ссылка на исходную карту для SASS.

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

Эргономичная и надежная функция автозаполнения в консоли.

В инструментах разработчика улучшена функция автозаполнения за счет следующих изменений:

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

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

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

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

  • В консоли выбранный вариант подсвечивается по мере того, как вы перемещаетесь по списку подсказок с помощью сочетаний клавиш Arrow up и Arrow down . Подсказки во время навигации по подсказкам.

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

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

Проблемы Chromium: 1399436 , 1276960

Различные важные моменты

В этом релизе внесены следующие существенные исправления:

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

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

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

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

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

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

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