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

Jecelyn Yeen

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

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

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

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

На панели Sources откройте боковую панель отладчика . Разверните раздел CSP Violation Breakpoints и включите флажок Trusted Type violence , чтобы приостановить исключения. Попробуйте сами на этой демонстрационной странице .

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

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

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

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

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

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

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

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

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

Проверяйте сетевые запросы Trust Token с помощью новой вкладки Trust Tokens .

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

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

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

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

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

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

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

• Группа Installable теперь полностью основана на проверках возможностей, которые включают критерии установки Chrome. Это те же сигналы, которые видны в панели Manifest .

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

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

Обновления панели элементов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Копировать параметры для свойства CSS:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обновления просмотра деталей рамы

Новая информация о Service Workers в представлении сведений о кадре

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Новый расчет цветового контраста — Advanced Perceptual Contrast Algorithm (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 или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

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