Новинки DevTools (Chrome 93)

Переводы предоставлены Alena Batitskaya. Редактор — Maxim Salnikov.

# Редактируемые выражения от контейнера в панели Styles

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

Выражения от контейнера обеспечивают более динамичный подход к адаптивному дизайну. Директива @container работает аналогично медиавыражению с @media. Однако вместо того, чтобы запрашивать информацию о вьюпорте браузера, @container запрашивает информацию у родительского контейнера, соответствующего определённым критериям.

В панели Elements кликните на DOM-элемент с директивой @container, и в панели Styles DevTools отобразится информация о @container. Кликните на директиву, чтобы изменить размеры. В панели Styles также отобразится информация о соответствующем контейнере. Наведите на него курсор, чтобы подсветить элемент-контейнер на странице и проверить его размеры. Кликните на строку, чтобы выбрать элемент-контейнер.

Выражения от контейнеров пока на стадии эксперимента. Пожалуйста, включите флаг #enable-container-queries по ссылке chrome://flags, чтобы включить эту функциональность.

Задача в трекере Chromium: 1146422

# Предварительный просмотр веб-бандлов во вкладке Network

Веб-бандлы — это способ инкапсуляции одного или нескольких HTTP-ресурсов в один файл. Теперь вы можете просмотреть содержимое веб-бандла во вкладке Network.

Веб-бандлы пока на стадии эксперимента. Пожалуйста, включите флаг #enable-experimental-web-platform-features по ссылке chrome://flags чтобы включить эту функциональность.

Задача в трекере Chromium: 1182537

# Отладка Attribution Reporting API

Ошибки, связанные с Attribution Reporting API, теперь отображаются во вкладке Issues.

Attribution Reporting это новый API, который поможет вам понять, когда действия пользователя (например, клик или просмотр рекламы) приводят к конверсии, без использования межсайтовых идентификаторов.

Задача в трекере Chromium: 1190735

# Улучшенная работа со строками в консоли

Новое контекстное меню во вкладке Console позволяет скопировать любую строку в виде содержимого, литерала JavaScript или литерала JSON.

Начиная с версии Chrome 90, DevTools обновил Console, чтобы строки всегда форматировались как валидные литералы JSON. Мы получили отзывы от разработчиков, что это изменение может запутатать. Некоторые считают, что экранирование избыточно и делает вывод нечитаемым.

Console теперь форматирует выходные строки как валидные литералы JavaScript и, кроме того, предоставляет вам 3 варианта копирования строки. Опция Copy as JavaScript literal будет экранировать спецсимволы и заключать строку в одинарные кавычки, двойные кавычки или обратные кавычки в зависимости от содержимого строки. Опция Copy string contents, напротив, скопирует всё содержимое строки без изменений (включая переносы и спецсимволы) в буфер обмена. Опция Copy as JSON literal форматирует строку как валидный литерал JSON и копирует её в буфер обмена.

Задача в трекере Chromium: 1208389

# Улучшенная отладка CORS

TypeErrors, связанные с CORS, во вкладке Console теперь связаны с вкладками Network и Issues.

Используйте две новые иконки рядом с сообщением об ошибке, связанной с CORS, чтобы просмотреть сетевой запрос или более подробно изучить сообщение об ошибке и получить потенциальные варианты решения во вкладке Issues.

Задача в трекере Chromium: 1213393

# Lighthouse 8.1

Панель Lighthouse теперь работает под управлением Lighthouse 8.1.

Если ваш сайт предоставляет Lighthouse исходные карты, то найдите кнопку View Treemap, чтобы увидеть разбивку вашего отправленного кода JavaScript с возможностью фильтрации по размеру и охвату при загрузке.

Отчёт также включает новый фильтр метрик (см. раздел Show audits relevant to на снимке экрана). Выберите метрику, чтобы сосредоточиться на возможностях и диагностике, наиболее релевантных для улучшения именно этой метрики.

Метрика Performance Category претерпела ряд изменений для согласования с другими инструментами оценки производительности и лучшего отражения состояния сети.

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

Задача в трекере Chromium: 772558

# Отображение new_note_url в панели Manifest

В панели Manifest теперь отображается new_note_url.

В настоящее время в ChromeOS (CrOS) приложения Chrome и Android, в которых есть возможность создания заметок, могут быть выбраны в качестве приложения для создания заметок в настройках стилуса (отображаются, если устройство CrOS используется со стилусом). Если приложение помечено таким образом, его можно запустить по кнопке «Создать заметку». Добавление поля new-note-url в манифесте приложения является частью работы по добавлению аналогичных функций в веб-приложения.

Задача в трекере Chromium: 1185678

# Исправление соответствия селекторам CSS

DevTools исправил отображение соответствия селекторам CSS, в прошлой версии это не работало.

Разделённые запятыми селекторы CSS в панели Styles окрашиваются по разному в зависимости от того, соответствуют ли они выбранному узлу DOM:

• Часть селектора, не соответствующая узлу, окрашена в светло-серый цвет.
• Часть селектора, соответствующая узлу, окрашена в чёрный цвет.

Задача в трекере Chromium: 1219153

# Форматирование ответов JSON во вкладке Network

Теперь вы можете отформатировать ответы JSON во вкладке Network.

Откройте ответ JSON во вкладке Network и нажмите на значок {}, чтобы его отформатировать.

Задача в трекере Chromium: 998674

# Загрузите предварительные версии браузеров

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

# Связь с командой Chrome DevTools

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

• Отправьте нам предложение или отзыв через crbug.com.
• Сообщите о проблеме, связанной с DevTools, используя Больше опций (More options)     > Справка (Help) > Сообщить о проблемах в инструментах разработчика (Report a DevTools issues) в DevTools.
• Твитните на @ChromeDevTools.
• Оставьте комментарии под What's new in DevTools видео на YouTube.

# Больше новинок DevTools

Чтобы увидеть полный список обновлений, перейдите на английскую версию по ссылке What's New In DevTools. Ниже перечислены материалы, переведенные на русский язык.

# Chrome 110

• Очистка вкладки Производительность при перезагрузке
• Обновления Регистратора (Recorder)
• Просмотр и подсветка кода в пользовательском сценарии в Регистраторе
• Настройка типов селекторов записи
• Редактирование пользовательского сценария во время записи
• Автоматическое красивое форматирование внутри файла
• Улучшенная подсветка синтаксиса и встроенный предварительный просмотр для Vue, SCSS и других
• Эргономичное и единообразное автодополнения в Консоли (Console)
• Другие важные моменты

# Chrome 109

• Recorder: опции копирования для шага, воспроизведение на странице, контекстное меню шага
• Показ настоящих названий функций в записях производительности
• Новые горячие клавиши во вкладках Консоль (Console) и Источники (Sources)
• Улучшенная отладка JavaScript
• Другие важные моменты
• [Эксперимент] Улучшенный UX в интерфейсе управления точками останова
• [Эксперимент] Автоматическое красивое форматирование внутри файла

# Chrome 108

• Подсказки для неактивных CSS-свойств
• Автоматическое определение XPath и текстовых селекторов во вкладке Recorder
• Пошаговое выполнение выражений, разделенных запятыми
• Улучшенные настройки Списка игнорируемых фреймворков
• Другие важные моменты

# Chrome 107

• Кастомизация сочетаний клавиш в DevTools
• Переключение между светлой и тёмной темами по сочетанию клавиш
• Подсветка объектов C/C++ в Инспекторе памяти (Memory Inspector)
• Поддержка полной информации об инициаторе для импорта HAR
• Начало поиска по DOM по нажатию по Enter
• Отображение иконок start и end для свойства флексбокса align-content
• Другие важные моменты

# Chrome 106

• Группировка по авторским и развёрнутым файлам во вкладке Источники (Sources)
• Связанные трассировки стека для асинхронных операций
• Автоматическое игнорирование известных сторонних скриптов
• Улучшен стек вызовов во время отладки
• Скрытие источников из списка игнорируемых во вкладке Источники (Sources)
• Скрытие игнорируемых файлов из Меню Команд (Command Menu)
• Новый трек Взаимодействия (Interactions) во вкладке Производительность (Performance)
• Разбивка по времени LCP во вкладке Performance Insights
• Автоматическая генерация стандартного имени для записи во вкладке Recorder
• Другие важные моменты

# Chrome 105

• Пошаговое воспроизведение в Recorder
• Поддержка события mouse over во вкладке Recorder
• Самое крупное существенное отображение (LCP) во вкладке Performance Insights
• Определение миганий текста (FOIT, FOUT) как потенциальных первопричин сдвигов раскладки
• Обработчик протоколов в панели Манифест
• Значок верхнего слоя во вкладке Элементы
• Прикрепление сведений для отладки Wasm во время исполнения
• Поддержка редактирования во время отладки
• Отображение и редактирование директивы @scope в панели Стили
• Улучшения карты источников
• Другие важные моменты

# Chrome 104

• Перезапуск фрейма во время отладки
• Опции замедленного воспроизведения во вкладке Recorder
• Создание расширений для вкладки Recorder
• Группировка по Авторским (Authored) и Развёрнутым (Deployed) файлам во вкладке Источники (Sources)
• Новый трек User Timings во вкладке Performance insights
• Отображение элемента с назначенным слотом
• Симуляция аппаратного параллелизма при записи Производительности (Performance)
• Предпросмотр нецветовых значений при автодополнении переменных CSS
• Определение блокирующего фрейма на панели Возвратного кэша (Back/forward cache)
• Улучшены подсказки автодополнения для объектов JavaScript
• Улучшение карт источников
• Другие важные моменты

# Chrome 103

• Запись событий двойного клика и клика правой кнопкой мыши во вкладке Recorder
• Новые режимы Анализа временного диапазона (timespan) и Сводки (snapshot) во вкладке Lighthouse
• Улучшено управление масштабированием во вкладке Performance Insights
• Подтверждение удаления записи производительности
• Изменение порядка панелей во вкладке Элементы (Elements)
• Выбор цвета вне браузера
• Улучшен предварительный просмотр значений в строке при отладке
• Поддержка больших объектов BLOB для виртуальных аутентификаторов
• Новые сочетания клавиш во вкладке Источники (Sources)
• Улучшения карты исходников

# Chrome 102

• Ранний доступ: Новая панель анализа производительности
• Новые горячие клавиши для эмуляции светлой и тёмной темы
• Улучшение безопасности на вкладке Предварительный просмотр (Preview) панели Сеть (Network)
• Улучшена перезагрузка в точке останова
• Обновления консоли
• Отмена записи пользовательского сценария в самом начале
• Отображение наследуемых псевдоэлементов выделения в панели Стили (Styles)
• Другие важные моменты
• [Эксперимент] Копирование изменений в CSS
• [Эксперимент] Выбор цвета вне браузера

# Chrome 101

• Импорт и экспорт записей действий пользователя в виде JSON файла
• Просмотр каскадных слоёв во вкладке Стили (Styles)
• Поддержка функции цвета hwb()
• Улучшено отображение приватных свойств
• Другие важные моменты
• [Эксперимент] Новые режимы временного промежутка и сводки во вкладке Lighthouse

# Chrome 100

• Просмотр и изменение директивы @supports в панели Стилей (Styles)
• Дефолтная поддержка распространённых селекторов
• Кастомизация селектора записи
• Переименование записи
• Предпросмотр свойств класса/функции при наведении курсора
• Частично представленные фреймы во вкладке Производительность (Performance)
• Другие важные моменты

# Chrome 99

• Троттлинг запросов WebSocket
• Новая панель Reporting API во вкладке Приложение (Application)
• Поддержка ожидания момента, когда элемент становится видимым/кликабельным во вкладке Recorder
• Улучшенный внешний вид, форматирование и фильтрация в консоли
• Отладка расширений Chrome с помощью карта источников
• Улучшено дерево папок источников во вкладке Источники (Sources)
• Отображение исходных файлов воркеров во вкладке Источники (Sources)
• Обновление автоматической тёмной темы Chrome
• Удобные сенсорные палитра цветов и разделитель панелей
• Другие важные моменты

# Chrome 98

• Ранний доступ: дерево доступности на всю страницу (Full-page accessibility tree)
• Явное отображение изменений на вкладке Изменения (Changes)
• Устанавливайте более длительный тайм-аут для записи поведения пользователя
• Убедитесь, что ваши страницы кешируются с помощью вкладки Возвратный кеш (Back/forward cache)
• Новый фильтр в панели Свойства (Properties)
• Эмулируйте CSS-медиафункцию forced-colors
• Показ линейки при наведении курсора мыши
• Поддержка значений row-reverse и column-reverse в редакторе флексбоксов
• Новые сочетания клавиш для повторения запроса XHR и расширения всех результатов поиска
• Lighthouse 9 во вкладке Lighthouse
• Улучшенная вкладка Источники (Sources)
• Другие важные моменты
• [Эксперимент] Эндпоинты во вкладке Reporting API

# Chrome 97

• Ранний доступ: новая вкладка Recorder
• Обновлён список устройств в панели инструментов устройства (Device Mode)
• Автодополнение в режиме Редактировать как HTML (Edit as HTML)
• Улучшен процесс отладки кода
• Синхронизация настроек DevTools между устройствами

# Chrome 96

• Ранний доступ: Новая вкладка Обзор CSS
• Восстановлен и улучшен опыт редактирования и копирования длины в CSS
• Эмуляция CSS-медиафункции prefers-contrast
• Эмулируйте функцию создания автоматической тёмной темы в Chrome
• Копируйте объявления как JavaScript в панели Стилей (Styles)
• Новая вкладка Полезная нагрузка (Payload) на вкладке Сеть
• Улучшенное отображение свойств в панели Свойства (Properties)
• Опция для скрытия ошибок CORS в Консоли
• Правильный предварительный просмотр и оценка объектов Intl в Консоли
• Консистентные асинхронные трассировки стека
• Сохранение боковой колонки в Консоли
• Устаревшая панель Кэш приложения на вкладке Приложение
• [Эксперимент] Новая панель Reporting API на вкладке Приложение

# Chrome 95

• Новый инструмент выбора единиц измерения длины в CSS
• Скрытие задач во вкладке Проблемы (Issues)
• Улучшенное отображение свойств
• Lighthouse 8.4 во вкладке Lighthouse
• Сортировка снипетов во вкладке Источники (Sources)
• Новые ссылки на переводы обновлений и сообщение об ошибке в переводе
• Улучшенный UI для командного меню в DevTools

# Chrome 94

• Пользуйтесь DevTools на своём языке
• Новые устройства Nest Hub в списке девайсов
• Информация об origin trials в свойствах фрейма
• Новый значок для выражений от контейнера
• Новый чекбокс для инвертирования фильтров сети
• Предстоящее упразднение боковой колонки Console
• Отображение необработанных заголовков Set-Cookie во вкладках Issues и Network
• Последовательное отображение нативных аксессоров как собственных свойств в консоли
• Правильная трассировка стека ошибок для встроенных скриптов с #sourceURL
• Изменение формата цвета в панели Computed
• Замена кастомных всплывающих подсказок на нативные HTML-подсказки
• [Эксперимент] Скрытие задач во вкладке Issues

# Chrome 93

• Редактируемые выражения от контейнера в панели Styles
• Предварительный просмотр веб-бандлов во вкладке Network
• Отладка Attribution Reporting API
• Улучшенная работа со строками в консоли
• Улучшенная отладка CORS
• Lighthouse 8.1
• Отображение new_note_url в панели Manifest
• Исправление соответствия селекторам CSS
• Форматирование ответов JSON во вкладке Network