| layout | title | authors | date | updated | description | hero | alt | tags | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
layouts/blog-post.njk |
Новинки DevTools (Chrome 105) |
|
2022-08-12 |
2022-08-12 |
Поддержка пошагового воспроизведения и событий mouse over в Recorder, LCP во вкладке Performance insights и другое. |
image/dPDCek3EhZgLQPGtEG3y0fTn4v82/IcPSEph39qIsU3BS0Yk1.jpg |
|
Переводы предоставлены Alena Batitskaia. Редактор — Maxim Salnikov.
{% Partial 'devtools/banner.md' %}
{% YouTube id='bHw_56RiVsg' %}
Теперь вы можете установить точку останова и пошагово воспроизвести пользовательский сценарий во вкладке Recorder.
Чтобы установить точку останова, кликните на синюю точку рядом с шагом. Воспроизведите пользовательский сценарий, проигрывание остановится перед выполнением отмеченного шага. С этого места вы можете продолжить воспроизведение, выполнить шаг или отменить воспроизведение.
С помощью этой функции вы можете полностью визуализировать и с легкостью отлаживать пользовательский сценарий.
Читайте подробнее в статье Recorder features reference.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/5RqFNkPTbtEXSC4KovNF.png", alt="Пошаговое воспроизведение в Recorder", width="800", height="547" %}
Задача в трекере Chromium: 1257499
Recorder теперь поддерживает добавление в запись шага mouse over (hover).
В демо появляется всплывающее меню при наведении. Попробуйте записать пользовательский сценарий и во время записи кликните на пункт меню.
Если вы воспроизведёте запись сейчас, она проиграется с ошибкой, потому что Recorder не ловит событие наведения мыши автоматически во время записи. Чтобы решить эту проблему, вручную добавьте шаг, чтобы имитировать наведение курсора на пункт меню перед кликом.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/GY1ZkqEU3zbGmhEKoblN.png", alt="Поддержка события mouse over во вкладке Recorder", width="800", height="488" %}
Задача в трекере Chromium: 1257499
LCP – это важная, ориентированная на пользователя метрика, замеряющая ощущаемую скорость нагрузки. Теперь вы можете отследить критические моменты и первопричины задержки отрисовки крупного существенного отображения (LCP).
В записи производительности кликните на значок LPC в Таймлайне (Timeline). В панели Details вы можете увидеть оценку LCP, узнать как поправить ресурсы, которые замедляют LPC, и посмотреть критический путь для ресурса LCP.
Изучите документацию Performance Insights, чтобы узнать, как получить полезные сведения и улучшить производительность вашего сайта с помощью вкладки.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/NZZJ1FzXxqj2U2NR0U53.png", alt="LCP во вкладке Performance Insights", width="800", height="751" %}
Задача в трекере Chromium: 1326481
Определение миганий текста (FOIT, FOUT) как потенциальных первопричин сдвигов раскладки {: #foit-fout }
Во вкладке Performance Insights теперь распознаются мигания невидимого текста (FOIT) и мигания нестилизованного текста (FOUT) как потенциальные причины сдвига раскладки.
Чтобы увидеть потенциальные причины сдвига раскладки кликните на скриншот в Layout shifts.
Изучите статью Optimize WebFont loading and rendering, чтобы узнать о техниках предотвращения сдвига раскладки.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/AMN5oD5hlKhPhnq98sIB.png", alt="FOUT во вкладке Performance insights", width="800", height="497" %}
Задачи в трекере Chromium: 1334628, 1328873
Теперь вы можете использовать DevTools для тестирования регистрации обработчика протокола URL для прогрессивных веб-приложений (PWA).
Регистрация обработчика протокола URL позволяет установленным PWA обрабатывать ссылки, использующие определённый протокол (например magnet, web+example), для более полноценного опыта использования.
Перейдите в раздел Обработчики протоколов (Protocol Handlers) в панели Приложение (Application) > Манифест (Manifest). Здесь вы можете просмотреть и протестировать все доступные протоколы.
Например, установите это тестовое PWA. В разделе Обработчики протоколов (Protocol Handlers) введите «americano» и нажмите Тестировать протокол (Test protocol), чтобы открыть страницу с кофе в PWA.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/DuH2YwkYGPpYjnUKln8m.png", alt="Обработчик протоколов во вкладке Манифест", width="800", height="402" %}
{# https://chromium.googlesource.com/devtools/devtools-frontend/+/cc2291cce5c5d199540334d01fcfe27207bc5962 #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/1aa36584d580ed5aa2caf7a8533f2c89b16ab66b #}
Задачи в трекере Chromium: 1300613
Используйте значок верхнего слоя, чтобы понять концепцию верхнего слоя и визуализировать, как меняется его контент.
Элемент <dialog> недавно стал стабилен во всех браузерах. Когда вы открываете диалог, он помещается в верхний слой. Контент верхнего уровня отображается поверх всего остального контента.
В этом демо кликните на Open dialog.
Чтобы помочь визуализировать элементы верхнего слоя, DevTools добавляет контейнер верхнего слоя (#top-layer) в DOM-дерево. Он размещен после закрывающего тега </html>.
Чтобы перепрыгнуть с контейнера верхнего слоя на соответствующий элемент в дереве элементов, кликните на кнопку reveal рядом с контейнером или рядом с его подложкой внутри контейнера верхнего слоя.
Рядом с элементом верхнего слоя в дереве (например, элемент диалога) кликните на значок top-layer, чтобы переместиться на контейнер верхнего слоя.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/pGMsiKw0IhplBMd4hZCv.png", alt="Значок верхнего слоя во вкладке Элементы", width="800", height="538" %}
Задача в трекере Chromium: 1313690
Теперь вы можете прикрепить отладочную информацию DWARF для wasm во время исполнения файла. Раньше на вкладке Источники (Sources) можно было прикрепить только карту источников для файлов JavaScript и Wasm.
Откройте файл Wasm во вкладке Источники (Sources). Кликните правой клавишей мыши в области редактора и выберите Добавить сведения для отладки DWARF… (Add DWARF debugging info…), чтобы прикрепить отладочную информацию по запросу.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/i5DMV6DFNGRYkrXyBtlg.png", alt="Прикрепление сведений для отладки Wasm во время исполнения", width="800", height="559" %}
Задача в трекере Chromium: 1341255
Теперь вы можете редактировать самую верхнюю функцию в стеке без перезапуска отладчика.
В Chrome 104 в DevTools вернулась возможность перезапуска фрейма. Тем не менее вы не могли редактировать функцию, на которой вы остановились прямо сейчас. Разработчики часто прерывают функцию, а затем редактируют ее во время паузы.
С этим обновлением отладчик автоматически перезапускает функцию со следующими ограничениями:
- Только функция самого верхнего уровня может быть отредактирована во время паузы.
- Ниже по стеку нет рекурсивных вызовов этой же функции.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/0PG2PnQUh5bnpIulyj7m.png", alt="Редактирование во время отладки", width="800", height="560" %}
Задача в трекере Chromium: 1334484
Теперь вы можете просматривать и редактировать CSS-директиву @scope в панели Стили (Styles).
Директива @scope является частью спецификации «CSS Cascading and Inheritance Level 6». Эти правила позволяют разработчикам группировать правила стилей в CSS.
Откройте эту демо-страницу и проинспектируйте гиперссылку внутри элемента <div class="dark-theme">. В панели Стили (Styles) просмотрите директиву @scope. Кликните на объявление правила, чтобы отредактировать его.
{% Aside %}
Поддержка @scope в настоящее время находится в стадии разработки. Чтобы протестировать эту функцию, включите флаг Experimental Web Platform features на странице chrome://flags/#enable-experimental-web-platform-features.
{% endAside %}
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/LnkBUWoEl11HGiAD4ag7.png", alt="Директива @scope на вкладке Стили", width="800", height="464" %}
Задача в трекере Chromium: 1337777
Вот несколько исправлений в картах источников для улучшения общего опыта отладки:
- DevTools теперь правильно распознает идентификаторы карт источников с пунктуацией. Некоторые современные минификаторы (например, esbuild) создают карты источников, объединяющие идентификаторы с помощью знаков препинания (запятая, круглые скобки, точка с запятой).
- DevTools теперь распознает имена карт источников для конструкторов с вызовом
super. {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/6djFfkrtPzXuNYq5m8Vk.png", alt="Правильное распознание вызова super", width="800", height="441" %}
- Исправлено индексирование URL карт источников при дублирующихся канонических URL. Ранее точки останова не активировались в некоторых файлах из-за дублирования канонических URL.
Задача в трекере Chromium: 1335338, 1333411
Вот несколько заслуживающих внимания исправлений в этом выпуске:
- Правильная реализация удаления пары ключ-значение локального хранилища из таблицы в панели Приложении (Application) > Локальное хранилище (Local Storage) при её удалении. (1339280)
- Предпросмотры цвета теперь отображается корректно при просмотре файлов CSS во вкладке Источники (Sources). Ранее их позиция была неверной. (1340062)
- Последовательное отображение флекс- и грид-элементов в панели Макет (Layout), а также отображение их в виде значков во вкладке Элементы (Elements). Ранее флекс- и грид-элементы случайным образом терялись в обоих местах. (1340441, 1273992)
- Новая ссылка Creator Ad Script теперь доступна для рекламных фреймов, если DevTools обнаружили скрипт, из-за которого фрейм был помечен как реклама. Вы можете открыть фрейм во вкладке Приложение (Application) > Фреймы (Frames). (1217041)
{% Partial 'devtools/reach-out.md' %} {% Partial 'devtools/whats-new.md' %}