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

Sofia Emelianova

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

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

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

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

Анализируйте файлы cookie вашего сайта с помощью инструмента анализа Privacy Sandbox.

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

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

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

Дополнительную информацию об использовании инструмента анализа Privacy Sandbox (PSAT) см. в следующих разделах:

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

Кроме того, ознакомьтесь с руководством по вопросам сообщения о проблемах .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для упрощения отладки фреймов панель «Элементы» теперь отображает documentURL рядом с узлами #document .

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

Эффективная политика безопасности контента на панели приложений

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

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

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

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

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

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

Диалоговое окно «Вы доверяете этому коду?» в разделе «Источники» и предупреждение о самообмане в консоли

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

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

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

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

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

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

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

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

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

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

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

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

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

Маяк 11.2.0

Панель Lighthouse теперь работает под управлением Lighthouse 11.2.0. Полный список изменений см. здесь.

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

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

Проблем с Chromium: 772558 .

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

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

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

Проблемы с Chromium: 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

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