Новинки DevTools (Chrome 104)

Published on Updated on

Translated to: English, Español, Português, 한국어, 中文, 日本語

Переводы предоставлены Alena Batitskaia. Редактор — Maxim Salnikov.

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

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

Функция Перезапустить фрейм (Restart frame) вернулась! Вы можете повторно выполнить предшествующий код до места остановки в функции. Эта функция была удалена в Chrome 92 из-за проблем со стабильностью.

В этом примере отладчик изначально остановился на точке останова (строка 343) ближе к концу функции toggleColorScheme. Чтобы перезапустить отладку с начала функции toggleColorScheme, разверните раздел Стек вызовов (Call stack) в панели Отладчик (Debugger), нажмите правой клавишей мыши на toggleColorScheme и выберите Перезапустить фрейм (Restart frame).

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

Задача в трекере Chromium: 1303521

Опции замедленного воспроизведения во вкладке Recorder

Теперь вы можете воспроизводить пользовательские сценарии на более низкой скорости: медленно (slow), очень медленно (very slow) и чрезвычайно медленно (extremely slow). Эти опции позволят вам лучше рассмотреть каждый воспроизводимый шаг.

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

Опции замедленного воспроизведения во вкладке Recorder

Задача в трекере Chromium: 1306756

Создание расширений для вкладки Recorder

Теперь вы можете создать или установить расширение Chrome, чтобы экспортировать сценарии воспроизведения в удобном для вас формате. Обратитесь к документации по Recorder extension API, чтобы узнать как разработать собственное решение.

Чтобы установить тестовое расширение, следуйте шагам, описанным в документации.

Пользовательское расширение для вкладки Recorder

Задача в трекере Chromium: 1325751

Группировка по Авторским (Authored) и Развёрнутым (Deployed) файлам во вкладке Источники (Sources)

Включите новую опцию Group files by Authored / Deployed, чтобы упорядочить файлы во вкладке Источники (Sources). При разработке приложения с использованием фреймворков (например, React, Angular) бывает сложно ориентироваться в минифицированных исходных файлах, которые генерируются инструментами сборки (например, Webpack, Vite).

С этим чекбоксом вы можете группировать файлы по двум категориям для ускорения поиска:

  • Авторские (Authored). Похожие на исходные файлы, которые вы просматриваете в своей IDE. DevTools формирует эти файлы на основе карт исходников (предоставляемых вашими инструментами сборки).
  • Развёрнутые (Deployed). Реальные файлы, которые читаются браузером. Обычно такие файлы минифицированы.

Попробуйте сами с этим демо React-приложением!

Группировка по Авторским (Authored) и Развёрнутым (Deployed) файлам во вкладке Источники (Sources)

Задача в трекере Chromium: 960909

Новый трек User Timings во вкладке Performance insights

Визуализируйте метки performance.measure() в вашей записи с новым треком User Timings во вкладке Performance insights.

Например, на этой странице используется метод performance.measure() для подсчёта времени, затраченного на загрузку текста.

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

Трек User Timings во вкладке Performance insights

Задача в трекере Chromium: 1322808

Отображение элемента с назначенным слотом

Элемент, у которого есть дочерние элементы-слоты, во вкладке Элементы (Elements) теперь обозначается значком slot. При отладке проблем раскладки используйте эту функцию, чтобы быстрее определить элементы, влияющие на раскладку узлов.

Этот пример содержит карточки с несколькими именованными слотами. Проинспектируйте слот person-occupation в карточке, нажмите на значок slot, чтобы отобразить назначенный ему элеменет-слот.

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

Отображение элемента с назначенным слотом

Задача в трекере Chromium: 1018906

Симуляция аппаратного параллелизма при записи Производительности (Performance)

Новая настройка Аппаратный параллелизм (Hardware concurrency) во вкладке Производительность (Performance) позволяет разработчикам настраивать значение, сообщаемое navigator.hardwareConcurrency.

Некоторые приложения используют navigator.hardwareConcurrency, чтобы контролировать степень параллелизма. Например, чтобы контролировать размер пула Emscripten pthread. С помощью этой функции разработчики могут тестировать производительность своих приложений с разным количеством ядер.

Симуляция аппаратного параллелизма при записи Производительности (Performance)

Задача в трекере Chromium: 1297439

Предпросмотр нецветовых значений при автодополнении переменных CSS

Когда CSS-переменная автоматически дополняется, DevTools теперь заполняет «нецветовую» переменную осмысленным значением, чтобы вы могли предварительно просмотреть, как изменится значение на узле.

Предпросмотр нецветовых значений при автодополнении переменных CSS

Задача в трекере Chromium: 1285091

Определение блокирующего фрейма на панели Возвратного кэша (Back/forward cache)

Панель Возвратный кэш (Back/forward cache) во вкладке Приложение (Application) теперь содержит раздел Фреймы (frames). Это поможет определить блокирующие фреймы, которые могут препятствовать доступу страницы к возвратному кэшу.

Определение блокирующего фрейма на панели Возвратного кэша (Back/forward cache)

Задача в трекере Chromium: 1288158

Улучшены подсказки автодополнения для объектов JavaScript

Подсказки автодополнения для свойств объектов JavaScript теперь отображаются в следующем порядке:

  1. Собственные перечисляемые свойства;
  2. Собственные неперечисляемые свойства;
  3. Наследуемые перечисляемые свойства;
  4. Наследуемые неперечисляемые свойства.

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

Улучшены подсказки автодополнения для объектов JavaScript

Задача в трекере Chromium: 1299241

Улучшение карт источников

Внесено несколько исправлений в карты источников, чтобы улучшить опыт отладки:

  • Точки останова теперь работают во встроенных <script> с аннотациями sourceURL.
  • Отладчик теперь вычисляет переменные с блочной областью видимости в представлении Scope с помощью карт исходников. Вычисленная перемення с блочной областью видимости
  • Отладчик теперь вычисляет переменные в стрелочных функциях в представлении Scope с помощью карт исходников. Вычисленная перемення стрелочной функции

Задачи в трекере Chromium: 1329113, 1322115

Другие важные моменты

Вот несколько заслуживающих внимания исправлений в этом выпуске:

  • Исправлена работа настройки Автодополнение (Auto-completion) во вкладке Источники (Sources). Ранее автодополнение срабатывало всегда, даже если соответствующая настройка была выключена. (1323286)
  • Исправлена вкладка Манифест (Manifest) во вкладке Приложение (Application), теперь на ней отображается последний формат цветовой схемы. (1318305)
  • Улучшены предложения по проблемам блокировки рендеринга <script async> во вкладке Performance insights. Ранее в DevTools выводилось предложение add async attribute to the script tag, даже когда скрипт уже был помечен как асинхронный. (1334096)
  • Вкладка Performance insights теперь определяет iframe-ы как потенциальную причину скачков раскладки. Вы можете просматривать детали iframe-ов в панели Details. (1328873)
  • При открытии файлов в Command menu авторские файлы (файлы, сгенерированные на основе карт источников) теперь находятся в списке выше, чем развёрнутые файлы с аналогичными именами. (1312929)

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

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

Связь с командой Chrome DevTools

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

  • Отправьте нам предложение или отзыв через crbug.com.
  • Сообщите о проблеме, связанной с DevTools, используя Больше опций (More options)   More   > Справка (Help) > Сообщить о проблемах в инструментах разработчика (Report a DevTools issues) в DevTools.
  • Твитните на @ChromeDevTools.
  • Оставьте комментарии под What's new in DevTools видео на YouTube.

Больше новинок DevTools

Чтобы увидеть полный список обновлений, перейдите на английскую версию по ссылке What's New In DevTools. Ниже перечислены материалы, переведенные на русский язык.

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.