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

Sofia Emelianova

Поэтапный отказ от сторонних файлов cookie

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

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

Проблема с хромом: 1466310 .

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

Расширение Privacy Sandbox Analysis Tool для DevTools находится в стадии активной разработки с последней предварительной версией 0.3.2 . Этот инструмент позволяет вам понять, как ваш веб-сайт использует файлы cookie, и предоставляет рекомендации по новым API-интерфейсам Chrome, обеспечивающим конфиденциальность.

Чтобы проанализировать ваши файлы cookie:

1. Установите расширение в Chrome.
2. Откройте свой веб-сайт в одной вкладке для лучшего анализа.
3. Откройте DevTools и перейдите на панель Privacy Sandbox . Эта панель может быть скрыта за кнопка раскрывающегося списка вверху.
4. Откройте раздел «Файлы cookie» и нажмите «Анализ этой вкладки» . Если инструмент не обнаружил файлов cookie, попробуйте перезагрузить страницу.

Для получения дополнительной информации о том, как использовать инструмент анализа изолированной программной среды конфиденциальности (PSAT) , см. следующее:

• PSAT: «Как это сделать ».
• Чтобы спрогнозировать, что может произойти после вступления в силу прекращения поддержки, настройте среду оценки .
• Чтобы определить аспекты, которые будут затронуты, см. Общие действия анализа .
• Чтобы узнать, как анализировать распространенные сценарии, включая аналитику, электронную коммерцию, службы единого входа, встроенный контент и т. д., ознакомьтесь с демонстрационными примерами в разделе «Сценарии анализа» .

Кроме того, см. руководство по вопросам отчетности .

Расширенный список игнорирования

Шаблон исключения по умолчанию для node_modules

Эта версия включает регулярное выражение по умолчанию в качестве настраиваемого правила исключения в Настройки > Список игнорирования . Чтобы помочь вам сосредоточиться только на своем коде, отладчик теперь по умолчанию будет пропускать сценарии из /node_modules/ и /bower_components/ . Вы можете отключить это правило в настройках в любое время.

Проблема с хромом: 1496301 .

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

Когда вы отлаживаете код с помощью Установлен флажок «Пауза при перехваченных исключениях» , отладчик теперь останавливает выполнение следующих перехваченных исключений, как синхронных, так и асинхронных:

• Исключения, обнаруженные в неигнорируемых кадрах стека вызовов.
• Перехватываются исключения, которые проходят через неигнорируемые кадры в стеке вызовов. Например, смотрите скриншот.

Чтобы проверить это поведение, откройте эту демонстрационную страницу :

1. Откройте DevTools > Sources , добавьте hidden папку в список игнорирования и проверьте Пауза на пойманных исключениях .
2. На странице под списком «Пойманных» сценариев нажимайте разные кнопки и смотрите, как выполнение приостанавливается в упомянутых случаях.

Чтобы приостановить выполнение перехваченных и/или неперехваченных исключений (если они отмечены) в асинхронных вызовах, отладчик ищет обработчики отклонения в обещаниях. Начиная с этой версии, отладчик больше не предсказывает, что Promise.finally() перехватит исключение, аналогично тому, как блок try...finally не перехватывает ни одного исключения.

Проблемы с хромом: 1489312 , 1291064 .

x_google_ignoreList переименован в ignoreList в исходных картах

Спецификация исходных карт приняла поле ignoreList вместо x_google_ignoreList , и DevTools теперь поддерживает новое имя с резервным вариантом для старого. Фреймворки и сборщики теперь могут использовать новое имя поля.

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

Дополнительную информацию об исходных картах см.:

• Что такое исходные карты
• Отлаживайте исходный код вместо его развертывания с использованием исходных карт.

Новый переключатель режима ввода во время удаленной отладки.

Теперь вы можете переключаться между сенсорным вводом и вводом с помощью мыши при удаленной отладке вкладки Chrome. Например, когда вы запускаете экземпляр Chrome с --remote-debugging-port=<port> и подключаетесь к этой сетевой цели через chrome://inspect/#devices .

Посмотрите видео, чтобы увидеть переключение режима ввода в действии.

Проблема с хромом: 1410433 .

На панели «Элементы» теперь отображаются URL-адреса узлов #document .

Чтобы упростить отладку iframe, на панели «Элементы» теперь отображается documentURL рядом с узлами #document .

Проблема с хромом: 1376976 .

Действующая политика безопасности контента в панели приложения.

Теперь вы можете просмотреть сведения о политике безопасности контента (CSP) проверяемого фрейма. Чтобы просмотреть подробную информацию, перейдите в «Приложение» > «Кадры» , выберите кадр и прокрутите вниз до раздела «Политика безопасности контента (CSP)» .

Проблема с хромом: 1424714 .

Улучшена отладка анимации.

На вкладке «Анимация» теперь вы можете:

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

Проблемы с хромом: 1492460 , 1489721 .

— Вы доверяете этому коду? диалоговое окно в источниках и предупреждение XSS в консоли

Показывать предупреждение о Self-XSS, когда эксперимент по вставке кода включен по умолчанию. Self-XSS (самостоятельный межсайтовый скриптинг) — это атака, которая заставляет вас вставить вредоносный код в DevTools и позволяет злоумышленнику получить контроль над вашими веб-учетными записями и личной информацией.

Если вы новый пользователь DevTools и пытаетесь вставить код, на панели «Источники» теперь отображается сообщение « Доверяете ли вы этому коду?». диалоговое окно, и консоль теперь отображает аналогичное предупреждение. Вставляйте только тот код, который вы понимаете и который вы проверили самостоятельно. Чтобы вставить, введите allow pasting при появлении соответствующего запроса. Если вставка разрешена один раз, предупреждение больше никогда не будет отображаться.

Проблема с хромом: 345205 .

Точки останова прослушивателя событий в веб-работниках и рабочих модулях

Когда вы устанавливаете точку останова на событие в разделе «Источники» > «Точки останова прослушивателя событий» , отладчик теперь не только приостанавливает это событие на вашем веб-сайте, но и приостанавливает его, когда соответствующее событие происходит в веб-воркере или ворлете любого типа, включая ворлет с общим хранилищем .

Проблема с хромом: 1445175 .

Новый медиа-значок для <audio> и <video>

Теперь вы можете включить новый значок мультимедиа для элементов <audio> и <video> на панели «Элементы» . Щелкнув значок, вы перейдете на панель «Медиа» , где вы сможете отладить эти элементы.

Эта функция находится в стадии разработки и будет улучшаться в дальнейшем. Команда DevTools хотела бы выразить благодарность Джунсо (Джереми) Ю за это улучшение.

Проблема с хромом: 1448214 .

Предварительная загрузка переименована в Спекулятивную загрузку.

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

Проблема с хромом: 1478888 .

Маяк 11.2.0

На панели «Маяк» теперь работает Lighthouse 11.2.0. См. полный список изменений .

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

Чтобы узнать основы использования панели Lighthouse в DevTools, см. Lighthouse: оптимизация скорости веб-сайта .

Проблемы с хромом: 772558 .

Улучшения доступности

В этой версии реализованы следующие улучшения специальных возможностей:

• Программы чтения с экрана теперь сообщают о статусе (установлен или снят) флажков в разделе «Источники» > «Точки останова» .
• Теперь вы можете получить доступ к таким функциям «Скрыть», как это раскрывающееся меню, с помощью клавиатуры.

Проблемы с хромом: 1488645 , 1484918 .

Разное

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

• Производительность : исправлен иногда отсутствующий индикатор LCP в записи ( 1487136 ).
• Спекулятивные загрузки: исправлены полные URL-адреса целей в раскрывающемся меню на панели «Сеть» ( 1471020 ).
• Охват :
  • Исправлено построчное покрытие красиво напечатанного кода ( 1464974 ).
  • Информация о покрытии теперь обновляется при перезагрузке страницы ( 1494457 ).
• Консоль :
  • Исправлено частичное выделение текста в сообщениях ( 1487449 ).
  • Исправлено мерцание раскрывающегося списка автозаполнения ( 1487453 ).
  • Поддерживаются круглые скобки в путях стека и URL-адреса в трассировках стека ( 1473926 ).
• Источники : поддерживается подсветка синтаксиса TypeScript using ключевого слова ( 1490515 ).
• В меню быстрого открытия теперь отображаются частные методы ( 1492957 ).
• Приложение > Фоновые службы : верхняя панель действий теперь переносит текст при изменении размера ( 1487276 ).
• Элементы > Стили :
  • Исправлено разрешение унаследованных переменных CSS для элементов с прорезями ( 1492162 ).
  • При отключении свойства CSS его комментарии теперь удаляются, чтобы исправить синтаксические разрывы ( 1101224 ).
• Сеть : в столбце «Приоритет» теперь отображается всплывающая подсказка с информацией о первоначальном приоритете (то же самое отображается, когда отмечен флажок «Большие строки запроса» ) ( 1495735 ).
• Устаревшие:
  • Параметр Цветовой формат был отключен в предыдущих версиях и теперь удален.
  • Параметр «Удалить все переопределения» в «Источниках» теперь удален из-за низкого использования после оптимизации переопределений ( 1473681 ).

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

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

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

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

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

Что нового в DevTools

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