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

Джеселин Йен

Пошаговый повтор в Диктофоне

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

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

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

Дополнительную информацию см. в разделе «Справочник по функциям рекордера» .

Пошаговый повтор в Диктофоне

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

Поддержка события наведения курсора мыши на панели «Рекордер».

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

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

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

Поддержка события наведения мыши в рекордере

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

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

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

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

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

LCP на панели «Сведения о производительности»

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

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

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

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

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

FOUT на панели «Статистика производительности»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ALT_TEXT_ЗДЕСЬ

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

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

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

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

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

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

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

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

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

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

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

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

@scope в правилах на панели «Стили»

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

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

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

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

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

Разное

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

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

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

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

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

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

Что нового в DevTools

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