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

Jecelyn Yeen

Пошаговое воспроизведение в диктофоне

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

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

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

Более подробную информацию см. в справочнике по функциям регистратора .

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

Поддержка событий наведения мыши на панель Recorder

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

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

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

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

Самая большая отрисовка контента (LCP) на панели «Инфографика производительности»

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

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

Ознакомьтесь с разделом «Анализ эффективности» , чтобы узнать, как получить полезную информацию и повысить эффективность вашего веб-сайта с помощью панели.

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

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

Панель анализа производительности теперь определяет мерцание невидимого текста (FOIT) и мерцание нестилизованного текста (FOUT) как потенциальные причины смещений макета.

Чтобы просмотреть возможные основные причины смещения макета, щелкните снимок экрана на треке «Сдвиги макета» .

Ознакомьтесь с разделом Оптимизация загрузки и рендеринга WebFont, чтобы узнать о методе предотвращения смещений макета.

Проблемы с Chromium: 1334628 , 1328873

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

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

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

Перейдите в раздел «Обработчики протоколов» через панель «Приложение» > «Манифест» . Здесь вы можете просмотреть и протестировать все доступные протоколы.

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

Проблемы с Chromium: 1300613

Значок верхнего слоя на панели «Элементы»

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

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

В этой демонстрации нажмите «Открыть диалог» .

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

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

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

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

Прикрепите отладочную информацию Wasm во время выполнения

Теперь вы можете прикреплять отладочную информацию DWARF для wasm во время выполнения. Ранее панель «Источники» поддерживала прикрепление карт исходного кода только к файлам JavaScript и Wasm.

Откройте файл Wasm на панели «Источники» . Щёлкните правой кнопкой мыши в редакторе и выберите «Добавить отладочную информацию DWARF…», чтобы добавить отладочную информацию по запросу.

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

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

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

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

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

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

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

Просмотр и редактирование @scope в правилах на панели «Стили»

Теперь вы можете просматривать и редактировать правила CSS @scope at-rules на панели «Стили» .

Правила @scope at являются частью спецификации CSS Cascading and Inheritance Level 6. Эти правила позволяют разработчикам определять область действия правил стилей в CSS.

Откройте эту демонстрационную страницу и проверьте гиперссылку в элементе <div class=”dark-theme”> . На панели "Стили" просмотрите правила @scope at-rules. Щёлкните по объявлению правила, чтобы отредактировать его.

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

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

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

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

Проблема с хромом: 1335338 , 1333411

Разные моменты

Вот некоторые важные исправления в этом выпуске:

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

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

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

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

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

• Отправляйте отзывы и предложения по функциям нам на crbug.com .
• Сообщить о проблеме с DevTools можно с помощью функции more_vert Дополнительные параметры > Справка > Сообщить о проблеме с DevTools в DevTools.
• Напишите твит в @ChromeDevTools .
• Оставляйте комментарии в видеороликах YouTube «Что нового в DevTools» или YouTube «Советы по DevTools» .

Что нового в DevTools

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