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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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