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

Jecelyn Yeen

Поддержка отладки нарушений доверенных типов

Точка останова при нарушениях доверенного типа

Теперь вы можете устанавливать точки останова и перехватывать исключения при нарушениях доверенного типа на панели «Источники» .

API Trusted Types помогает предотвратить уязвимости межсайтового скриптинга на основе DOM. Узнайте, как писать, проверять и поддерживать приложения без XSS-уязвимостей DOM с помощью доверенных типов здесь .

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

Проблема с хромом: 1142804

Свяжите проблему на панели «Источники» с вкладкой «Проблемы».

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

Проблема с хромом: 1150883

Захватить снимок экрана узла за пределами области просмотра

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

На панели «Элементы» щелкните элемент правой кнопкой мыши и выберите «Сделать снимок экрана узла» .

Проблема с хромом: 1003629

Новая вкладка «Токены доверия» для сетевых запросов.

Проверьте сетевые запросы токенов доверия на новой вкладке «Токены доверия» .

Trust Token — это новый API, помогающий бороться с мошенничеством и отличать ботов от реальных людей без пассивного отслеживания. Узнайте, как начать работу с токенами доверия .

Дальнейшая поддержка отладки появится в следующих выпусках.

Проблема с хромом: 1126824

Маяк 7 на панели «Маяк»

На панели Lighthouse теперь работает Lighthouse 7. Полный список изменений можно найти в примечаниях к выпуску .

Новые аудиты в Lighthouse 7:

• Предварительная загрузка изображения с наибольшей полнотой содержимого (LCP) . Проверяет, предварительно загружено ли изображение, используемое элементом LCP, чтобы сократить время работы LCP.
• Проблемы, зарегистрированные на панели Issues . Указывает список нерешенных проблем на панели Issues .
• Прогрессивные веб-приложения (PWA) . Категория PWA изменилась довольно существенно.

• Группа «Устанавливаемые» теперь полностью основана на проверках возможностей, которые включают критерии установки Chrome. Это те же сигналы, что и на панели Манифест .

  • Аудит «Регистрирует сервисного работника…» перемещается в группу «Оптимизировано для PWA» , а аудит «Использует HTTPS» теперь включен как часть ключевого аудита «Требований к установке».
  • Группа «Быстрые и надежные» удалена. Поскольку обновленный аудит «Требований к установке» включает проверку возможности работы в автономном режиме, аудит «текущая страница и start_url отвечают 200 в автономном режиме» был удален. Аудит «Страница загружается достаточно быстро в мобильной сети» также был удален.

Проблема с хромом: 772558

Обновления панели «Элементы»

Поддержка принудительного изменения состояния CSS :target .

Теперь вы можете использовать DevTools для принудительного и проверки состояния CSS :target .

На панели «Элементы» выберите элемент и переключите состояние элемента. Установите флажок :target чтобы принудительно использовать и проверять стили.

Используйте псевдокласс :target для стилизации элемента, если хэш в URL-адресе и идентификатор элемента совпадают. Посмотрите это демо, чтобы попробовать это самостоятельно. Эта новая функция DevTools позволяет тестировать такие стили без необходимости постоянно менять URL-адрес вручную.

Проблема с хромом: 1156628

Новый ярлык для дублирования элемента

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

Щелкните правой кнопкой мыши элемент на панели «Элементы» и выберите «Дублировать элемент» . Под ним будет создан новый элемент.

Альтернативно вы можете дублировать элемент с помощью сочетаний клавиш:

• Mac: Shift + Option + ⬇️
• Окно/Linux: Shift + Alt + ⬇️

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

Палитры цветов для пользовательских свойств CSS

На панели «Стили» теперь отображаются палитры цветов для пользовательских свойств CSS.

Кроме того, вы можете удерживать клавишу Shift и нажимать на палитру цветов, чтобы переключаться между представлениями цвета RGBA, HSLA и Hex.

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

Новые ярлыки для копирования свойств CSS

Теперь вы можете копировать свойства CSS быстрее с помощью нескольких новых ярлыков.

На панели «Элементы» выберите элемент. Затем щелкните правой кнопкой мыши класс CSS или свойство CSS на панели «Стили» , чтобы скопировать значение.

Параметры копирования для класса CSS:

• Копировать селектор . Скопируйте текущее имя селектора.
• Копирование правила . Скопируйте правило текущего селектора.
• Копировать все объявления : скопировать все объявления в соответствии с текущим правилом, включая недопустимые свойства и свойства с префиксом.

Параметры копирования свойства CSS:

• Копировать декларацию . Скопируйте объявление текущей строки.
• Копировать свойство . Скопируйте свойство текущей строки.
• Копировать значение : копировать значение текущей строки.

Проблема с хромом: 1152391

Обновления файлов cookie

Новая опция для отображения файлов cookie, декодированных по URL-адресу.

Теперь вы можете просмотреть значение файлов cookie, декодированных по URL-адресу, на панели «Файлы cookie» .

Перейдите на панель «Приложение» и выберите панель «Файлы cookie» . Выберите любой файл cookie из списка. Установите новый флажок «Показать декодированный URL-адрес», чтобы просмотреть декодированный файл cookie.

Проблема с хромом: 997625

Очистить только видимые файлы cookie

Кнопка «Очистить все файлы cookie» на панели «Файлы cookie» теперь заменена кнопкой «Очистить отфильтрованные файлы cookie» .

На панели «Приложение» > «Файлы cookie» введите текст в текстовое поле, чтобы отфильтровать файлы cookie. В нашем примере мы фильтруем список по «PREF». Нажмите кнопку «Очистить отфильтрованные файлы cookie», чтобы удалить видимые файлы cookie. Очистите текст фильтра, и вы увидите, что другие файлы cookie останутся в списке. Раньше у вас была возможность только удалить все файлы cookie.

Проблема с хромом: 978059

Новая опция для очистки сторонних файлов cookie на панели «Хранилище».

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

Проблема с хромом: 1012337

Редактирование подсказок клиента User-Agent для пользовательских устройств

Теперь вы можете редактировать подсказки клиента User-Agent для пользовательских устройств.

Перейдите в «Настройки» > «Устройства» и нажмите «Добавить пользовательское устройство…» . Разверните раздел «Подсказки для клиента агента пользователя», чтобы изменить подсказки для клиента.

Клиентские подсказки User-Agent — это альтернатива строке User-Agent, которая позволяет разработчикам получать доступ к информации о браузере пользователя эргономичным и сохраняющим конфиденциальность способом. Дополнительные сведения о клиентских подсказках User-Agent см. в web.dev/user-agent-client-hints/ .

Проблема с хромом: 1073909

Обновления сетевой панели

Сохранять настройку «запись сетевого журнала».

В DevTools теперь сохраняется настройка «Запись сетевого журнала». Раньше DevTools сбрасывал выбор пользователя при каждой перезагрузке страницы.

Проблема с хромом: 1122580

Просмотр подключений WebTransport на панели «Сеть»

На панели «Сеть» теперь отображаются соединения WebTransport.

WebTransport — это новый API, обеспечивающий двунаправленный обмен сообщениями клиент-сервер с малой задержкой. Узнайте больше о вариантах его использования и о том, как оставить отзыв о будущей реализации в web.dev/webtransport/ .

Проблема с хромом: 1152290

«Онлайн» переименован в «Без регулирования».

Параметр сетевой эмуляции «Онлайн» теперь переименован в «Без регулирования».

Проблема с хромом: 1028078

Новые параметры копирования на панели «Консоль», «Источники» и «Стили».

Новые ярлыки для копирования объекта на панели «Консоль и источники».

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

Проблемы с хромом: 1149859 , 1148353.

Новые ярлыки для копирования имени файла на панелях «Источники» и «Стили».

Теперь вы можете скопировать имя файла, щелкнув правой кнопкой мыши:

• файл на панели «Источники» или
• имя файла на панели «Стили» на панели «Элементы »

Выберите Копировать имя файла в контекстном меню, чтобы скопировать имя файла.

Проблема с хромом: 1155120

Подробности о раме, просмотр обновлений

Информация о новых сервисных работниках в представлении сведений о кадре

DevTools теперь отображает выделенных сервисных работников под фреймом, который их создает.

На панели «Приложение» разверните фрейм с работниками службы, затем выберите работника службы в дереве «Работники службы», чтобы просмотреть подробные сведения.

Проблема с хромом: 1122507

Измерьте информацию о памяти в представлении сведений о кадре.

Статус API performance.measureMemory() теперь отображается в разделе доступности API .

Новый API performance.measureMemory() оценивает использование памяти всей веб-страницей. Узнайте, как отслеживать общее использование памяти вашей веб-страницы с помощью этого нового API, в этой статье .

Проблема с хромом: 1139899

Оставьте отзыв на вкладке «Проблемы».

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

Пропущенные кадры на панели «Производительность»

При анализе производительности загрузки на панели «Производительность» раздел «Кадры» теперь помечает пропущенные кадры красным цветом. Наведите на него курсор, чтобы узнать частоту кадров.

Проблема с хромом: 1075865

Эмуляция складного и двойного экрана в режиме устройства

Теперь вы можете эмулировать двухэкранные и складные устройства в DevTools.

После включения панели инструментов устройства выберите одно из этих устройств: Surface Duo или Samsung Galaxy Fold .

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

Вы также можете включить функции экспериментальной веб-платформы , чтобы получить доступ к новой функции screen-spanning мультимедиа CSS и API JavaScript getWindowSegments . Экспериментальный значок отображает состояние флага функций экспериментальной веб-платформы . Значок подсвечивается, когда флаг включен. Перейдите к chrome://flags и переключите флаг.

Проблема с хромом: 1054281

Экспериментальные возможности

Автоматизируйте тестирование браузера с помощью Puppeteer Recorder

DevTools теперь может генерировать сценарии Puppeteer на основе вашего взаимодействия с браузером, что упрощает автоматизацию тестирования браузера. Puppeteer — это библиотека Node.js, которая предоставляет API высокого уровня для управления Chrome или Chromium через протокол DevTools .

Перейдите на эту демонстрационную страницу . Откройте панель «Источники» в DevTools. Выберите вкладку «Запись» на левой панели. Добавьте новую запись и назовите файл (например, test01.js).

Нажмите кнопку «Запись» внизу, чтобы начать запись взаимодействия. Попробуйте заполнить экранную форму. Обратите внимание, что команды Puppeteer соответственно добавляются в файл. Нажмите кнопку «Запись» еще раз, чтобы остановить запись.

Чтобы запустить скрипт, следуйте руководству по началу работы на официальном сайте Puppeteer.

Обратите внимание, что это ранняя стадия эксперимента. Мы планируем со временем улучшать и расширять функциональность Регистратора.

Проблема с хромом: 1144127

Редактор шрифтов на панели «Стили»

Новый редактор шрифтов — это всплывающий редактор на панели «Стили» со свойствами, связанными со шрифтом, который поможет вам найти идеальную типографику для вашей веб-страницы.

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

Проблема с хромом: 1093229

Инструменты отладки CSS flexbox

DevTools добавил экспериментальную поддержку отладки flexbox с момента последнего выпуска .

DevTools теперь рисует направляющую линию, которая поможет вам лучше визуализировать свойство CSS align-items . Также поддерживается свойство CSS- gap . В нашем примере у нас есть CSS- gap: 12px; . Обратите внимание на штриховку для каждого разрыва.

Проблема с хромом: 1139949

Новая вкладка «Нарушения CSP»

Просматривайте все нарушения Политики безопасности контента (CSP) на новой вкладке «Нарушения CSP» . Эта новая вкладка представляет собой эксперимент, который должен облегчить работу с веб-страницами с большим количеством нарушений CSP и доверенных типов.

Проблема с хромом: 1137837

Новый расчет цветового контраста — усовершенствованный алгоритм перцептивного контраста (APCA).

Алгоритм расширенного перцептивного контраста (APCA) заменяет рекомендуемый коэффициент контрастности AA / AAA в палитре цветов .

APCA — это новый способ расчета контраста, основанный на современных исследованиях восприятия цвета. По сравнению с рекомендациями AA/AAA, APCA более зависит от контекста. Контраст рассчитывается на основе пространственных свойств текста (вес и размер шрифта), цвета (воспринимаемая разница в яркости между текстом и фоном) и контекста (окружающее освещение, окружение, предполагаемое назначение текста).

В примере показано, что порог APCA составляет 38% . Коэффициент контрастности должен соответствовать указанному значению или превышать его. Это значение рассчитывается на основе веса и размера шрифта, ссылаясь на справочную таблицу APCA .

Проблема с хромом: 1121900

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

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

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

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

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

Что нового в DevTools

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