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

Published on Updated on

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

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

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

Пошаговое воспроизведение в Recorder

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

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

С помощью этой функции вы можете полностью визуализировать и с легкостью отлаживать пользовательский сценарий.

Читайте подробнее в статье Recorder features reference.

Пошаговое воспроизведение в Recorder

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

Поддержка события mouse over во вкладке Recorder

Recorder теперь поддерживает добавление в запись шага mouse over (hover).

В демо появляется всплывающее меню при наведении. Попробуйте записать пользовательский сценарий и во время записи кликните на пункт меню.

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

Поддержка события mouse over во вкладке Recorder

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

Самое крупное существенное отображение (LCP) во вкладке Performance Insights

LCP – это важная, ориентированная на пользователя метрика, замеряющая ощущаемую скорость нагрузки. Теперь вы можете отследить критические моменты и первопричины задержки отрисовки крупного существенного отображения (LCP).

В записи производительности кликните на значок LPC в Таймлайне (Timeline). В панели Details вы можете увидеть оценку LCP, узнать как поправить ресурсы, которые замедляют LPC, и посмотреть критический путь для ресурса LCP.

Изучите документацию Performance Insights, чтобы узнать, как получить полезные сведения и улучшить производительность вашего сайта с помощью вкладки.

LCP во вкладке Performance Insights

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

Определение миганий текста (FOIT, FOUT) как потенциальных первопричин сдвигов раскладки

Во вкладке Performance Insights теперь распознаются мигания невидимого текста (FOIT) и мигания нестилизованного текста (FOUT) как потенциальные причины сдвига раскладки.

Чтобы увидеть потенциальные причины сдвига раскладки кликните на скриншот в Layout shifts.

Изучите статью Optimize WebFont loading and rendering, чтобы узнать о техниках предотвращения сдвига раскладки.

FOUT во вкладке Performance insights

Задачи в трекере Chromium: 1334628, 1328873

Обработчики протоколов в панели Манифест

Теперь вы можете использовать DevTools для тестирования регистрации обработчика протокола URL для прогрессивных веб-приложений (PWA).

Регистрация обработчика протокола URL позволяет установленным PWA обрабатывать ссылки, использующие определённый протокол (например magnet, web+example), для более полноценного опыта использования.

Перейдите в раздел Обработчики протоколов (Protocol Handlers) в панели Приложение (Application) > Манифест (Manifest). Здесь вы можете просмотреть и протестировать все доступные протоколы.

Например, установите это тестовое PWA. В разделе Обработчики протоколов (Protocol Handlers) введите «americano» и нажмите Тестировать протокол (Test protocol), чтобы открыть страницу с кофе в PWA.

Обработчик протоколов во вкладке Манифест

Задачи в трекере Chromium: 1300613

Значок верхнего слоя во вкладке Элементы

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

Элемент <dialog> недавно стал стабилен во всех браузерах. Когда вы открываете диалог, он помещается в верхний слой. Контент верхнего уровня отображается поверх всего остального контента.

В этом демо кликните на Open dialog.

Чтобы помочь визуализировать элементы верхнего слоя, DevTools добавляет контейнер верхнего слоя (#top-layer) в DOM-дерево. Он размещен после закрывающего тега </html>.

Чтобы перепрыгнуть с контейнера верхнего слоя на соответствующий элемент в дереве элементов, кликните на кнопку reveal рядом с контейнером или рядом с его подложкой внутри контейнера верхнего слоя.

Рядом с элементом верхнего слоя в дереве (например, элемент диалога) кликните на значок top-layer, чтобы переместиться на контейнер верхнего слоя.

Значок верхнего слоя во вкладке Элементы

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

Прикрепление сведений для отладки Wasm во время исполнения

Теперь вы можете прикрепить отладочную информацию DWARF для wasm во время исполнения файла. Раньше на вкладке Источники (Sources) можно было прикрепить только карту источников для файлов JavaScript и Wasm.

Откройте файл Wasm во вкладке Источники (Sources). Кликните правой клавишей мыши в области редактора и выберите Добавить сведения для отладки DWARF… (Add DWARF debugging info…), чтобы прикрепить отладочную информацию по запросу.

Прикрепление сведений для отладки Wasm во время исполнения

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

Поддержка редактирования во время отладки

Теперь вы можете редактировать самую верхнюю функцию в стеке без перезапуска отладчика.

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

С этим обновлением отладчик автоматически перезапускает функцию со следующими ограничениями:

  • Только функция самого верхнего уровня может быть отредактирована во время паузы.
  • Ниже по стеку нет рекурсивных вызовов этой же функции.
Редактирование во время отладки

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

Отображение и редактирование директивы @scope в панели Стили

Теперь вы можете просматривать и редактировать CSS-директиву @scope в панели Стили (Styles).

Директива @scope является частью спецификации «CSS Cascading and Inheritance Level 6». Эти правила позволяют разработчикам группировать правила стилей в CSS.

Откройте эту демо-страницу и проинспектируйте гиперссылку внутри элемента <div class="dark-theme">. В панели Стили (Styles) просмотрите директиву @scope. Кликните на объявление правила, чтобы отредактировать его.

Поддержка @scope в настоящее время находится в стадии разработки. Чтобы протестировать эту функцию, включите флаг Experimental Web Platform features на странице chrome://flags/#enable-experimental-web-platform-features.

Директива @scope на вкладке Стили

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

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

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

  • DevTools теперь правильно распознает идентификаторы карт источников с пунктуацией. Некоторые современные минификаторы (например, esbuild) создают карты источников, объединяющие идентификаторы с помощью знаков препинания (запятая, круглые скобки, точка с запятой).
  • DevTools теперь распознает имена карт источников для конструкторов с вызовом super. Правильное распознание вызова super
  • Исправлено индексирование URL карт источников при дублирующихся канонических URL. Ранее точки останова не активировались в некоторых файлах из-за дублирования канонических URL.

Задача в трекере Chromium: 1335338, 1333411

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

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

  • Правильная реализация удаления пары ключ-значение локального хранилища из таблицы в панели Приложении (Application) > Локальное хранилище (Local Storage) при её удалении. (1339280)
  • Предпросмотры цвета теперь отображается корректно при просмотре файлов CSS во вкладке Источники (Sources). Ранее их позиция была неверной. (1340062)
  • Последовательное отображение флекс- и грид-элементов в панели Макет (Layout), а также отображение их в виде значков во вкладке Элементы (Elements). Ранее флекс- и грид-элементы случайным образом терялись в обоих местах. (1340441, 1273992)
  • Новая ссылка Creator Ad Script теперь доступна для рекламных фреймов, если DevTools обнаружили скрипт, из-за которого фрейм был помечен как реклама. Вы можете открыть фрейм во вкладке Приложение (Application) > Фреймы (Frames). (1217041)

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

Рассмотрите возможность использования 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.