Что нового в 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 .
• Чтобы спрогнозировать, что, скорее всего, произойдет после вступления в силу решения об устаревании, настройте среду оценки .
• Чтобы определить аспекты, на которые следует оказать влияние, см. раздел «Действия общего анализа» .
• Чтобы узнать, как анализировать распространенные сценарии, включая аналитику, электронную коммерцию, службы единого входа, встроенный контент и многое другое, ознакомьтесь с демонстрационными примерами в разделе Сценарии анализа .

Более того, см. руководство по отчетности о проблемах .

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

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

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

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

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

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

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

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

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

Чтобы приостановить выполнение пойманных и/или не пойманных исключений (при проверке) в асинхронных вызовах, отладчик ищет обработчики отклонений по обещаниям. Начиная с этой версии, отладчик больше не предсказывает, что 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

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

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

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

Теперь вы можете просматривать сведения о политике безопасности контента (CSP) для проверенного кадра. Чтобы просмотреть сведения, перейдите в Application > Frames , выберите кадр и прокрутите вниз до раздела Content Security Policy (CSP) .

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

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

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

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

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

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

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

Если вы новый пользователь DevTools и пытаетесь вставить код, панель Sources теперь показывает вам диалоговое окно Do you trust this code? (Вы доверяете этому коду?) , а Console теперь отображает похожее предупреждение. Вставляйте только тот код, который вы понимаете и проверили самостоятельно. Чтобы вставить, введите allow pasting при появлении соответствующего запроса. После того, как вставка будет разрешена один раз, предупреждение больше не будет отображаться.

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

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

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

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

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

Теперь вы можете включить новый значок медиа для элементов <audio> и <video> на панели элементов . При нажатии на значок вы переходите на панель медиа , чтобы можно было отладить эти элементы.

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

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

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

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

Проблема с хромом: 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 .
• Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

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