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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На панели «Элементы» выберите элемент и измените его состояние. Установите флажок :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» .

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

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

Новая возможность очистки сторонних файлов cookie на панели «Хранилище»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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