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

София Емельянова
Sofia Emelianova
GitHub

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

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

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

До и после показывает URL-адрес документа рядом с узлом #document.

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

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

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

Раздел «Политика безопасности контента», расположенный на вкладке «Приложение».

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

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

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

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

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

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

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

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

Вопрос «Доверяете ли вы этому коду?» диалоговое окно при вставке кода в Sources.

Проблема с хромом: 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.

Что нового в DevTools

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