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

Джеселин Йин

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

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

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

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

Дополнительную информацию см. в справочнике по функциям программы записи .

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

Номер выпуска Chromium: 1257499

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

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

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

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

Поддержка события наведения мыши в программе записи событий.

Номер выпуска Chromium: 1257499

Крупнейший объект Contentful Paint (LCP) на панели анализа производительности.

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

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

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

LCP на панели анализа производительности

Номер выпуска Chromium: 1326481

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

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

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

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

FOUT на панели анализа производительности

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ALT_TEXT_HERE

Выпуск Chromium: 1341255

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

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

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

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

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

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

Номер выпуска Chromium: 1334484

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

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

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

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

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

Номер выпуска Chromium: 1337777

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

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

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

Проблемы Chromium: 1335338 , 1333411

Различные важные моменты

В этом релизе внесены следующие существенные исправления:

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

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

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

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

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

Что нового в инструментах разработчика

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