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

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

Поэтапное прекращение использования сторонних файлов cookie

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

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

Предупреждение о предстоящем прекращении поддержки сторонних файлов cookie находится во вкладке «Проблемы».

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

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

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

Для анализа ваших файлов cookie:

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

Инструмент анализа конфиденциальности в «песочнице».

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

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

Расширенный список игнорируемых объектов

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

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

Фотографии до и после добавления регулярного выражения.

Номер выпуска Chromium: 1496301 .

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

При отладке кода с помощью Флажок. В этом случае отладчик останавливает выполнение при возникновении следующих перехваченных исключений , как синхронных, так и асинхронных:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На изображениях «до» и «после» рядом с узлом #document отображается documentURL.

Номер выпуска Chromium: 1376976 .

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

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

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

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

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

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

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

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

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

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

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

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

Номер выпуска Chromium: 345205 .

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

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

Отладчик приостанавливается, когда сервис-воркер вызывает функцию установки таймаута.

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

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

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

Включен новый значок для аудио- и видеотегов.

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

Номер выпуска Chromium: 1448214 .

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

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

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

Номер выпуска Chromium: 1478888 .

Маяк 11.2.0

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

В этом обновлении переработана категория «Производительность». Теперь показатели производительности оцениваются и расставляются по приоритетам в зависимости от их предполагаемого влияния на метрики производительности. Кроме того, индикатор оценки производительности содержит более подробную информацию о том, как каждая метрика влияет на оценку.

Результаты до и после улучшения производительности.

Чтобы узнать основы использования панели Lighthouse в инструментах разработчика, см. статью «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.

Что нового в инструментах разработчика

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