Что нового в 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 ), для более интегрированного взаимодействия.

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

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

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

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

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

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

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

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

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

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

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

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

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

Откройте файл Wasm на панели Sources . Щелкните правой кнопкой мыши в редакторе и выберите Add DWARF debugging info…, чтобы прикрепить отладочную информацию по требованию.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Правильно удаляйте пару ключ-значение локального хранилища из таблицы на панели Приложение > Локальное хранилище при ее удалении. ( 1339280 )
• Предварительные просмотры цветов теперь корректно отображаются при просмотре CSS-файлов на панели «Источники» . Ранее их позиции были смещены. ( 1340062 )
• Последовательно отображать элементы CSS flex и grid на панели Layout , а также отображать их как значки на панели Elements . Ранее элементы 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 .
• Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

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