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

Джеселин Йен

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

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

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

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

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

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

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

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

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

Просмотр кода в Recorder.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Консоль выделяет выбранный вариант при навигации по списку предложений с помощью ярлыков 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.

Что нового в DevTools

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

,

Джеселин Йен

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

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

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

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

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

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

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

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

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

Просмотр кода в Recorder.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Консоль выделяет выбранный вариант при навигации по списку предложений с помощью ярлыков 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.

Что нового в DevTools

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