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

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

# Троттлинг запросов WebSocket

Вкладка Сеть (Network) теперь поддерживает троттлинг запросов для веб-сокетов. Раньше замедление сети не работало для веб-сокетов.

Откройте вкладку Сеть (Network), кликните на веб-сокет запрос и откройте вкладку Сообщения (Messages) чтобы наблюдать за передачей сообщений. Выберите Медленная 3G-сеть (Slow 3G) чтобы замедлить скорость.

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

# Новая панель Reporting API во вкладке Приложение (Application)

Используйте новую панель Reporting API, чтобы отслеживать созданные на вашей страницы отчёты и их статус.

Reporting API помогает отслеживать нарушения безопасности на вашем сайте, устаревшие запросы API и многое другое.

Откроейте страницу, которая использует Reporting API (например, демо страница). Во вкладке Приложение (Application) проскрольте до раздела Фоновые службы (Background services) и выберите панель Reporting API.

В разделе Reports отображается список сгенерированных на вашей странице отчётов и их статус. Кликните на один из них, чтобы посмотреть детали.

Раздел Endpoints даёт представление о всех конечных точках, настроенных в заголовке Reporting-Endpoints.

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

# Поддержка ожидания момента, когда элемент становится видимым/кликабельным во вкладке Recorder

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

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

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

# Улучшенный внешний вид, форматирование и фильтрация в консоли

# Правильная стилизация сообщений в логах с использованием ANSI

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

Это обычное явление для разработчиков на Node.js расскрашивать сообщения в логах при помощи ANSI, часто с использованием библиотек типа chalk, colors, ansi-colors, kleur и подобных.

Благодаря этим изменениям вы теперь можете беспрепятственно отлаживать приложения Node.js с помощью DevTools , с соответствующим цветовым оформлением сообщений в консоли. Откройте [демонстрацию] (https://stackblitz.com/edit/node-colors-test), чтобы просмотреть!

Узнайте больше о форматировании и стилизации сообщений в консоли при помощи DevTools в документации.

Задачи в трекере Chromiums: 1282837, 1282076

# Правильная поддержка спецификаторов формата %s, %d, %i and %f

Консоль (Console) теперь правильно выполняет преобразование типов %s, %d, %i и %f согласно стандартам консоли. Раньше результаты преобразования были непоследовательными.

Задачи в трекере Chromiums: 1277944, 1282076

# Более интуитивный фильтр групп в консоли

При фильтрации сообщений в консоли теперь сообщение показывается если его контент соответствует фильтру или если заголовок группы (или группы-предка) соответствует фильтру. Ранее заголовок группы показывался, несмотря на фильтр.

Кроме того, при отображении сообщения консоли теперь отображается и группа (или группа-предок), к которой оно принадлежит.

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

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

# Отладка расширений Chrome с помощью карта источников

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

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

# Улучшено дерево папок источников во вкладке Источники (Sources)

Дерево папок источников во вкладке Источники (Sources) теперь улучшено, с меньшим беспорядком в структуре папок и именовании (например, "../", "./" и т.д.). Под капотом это результат нормализации абсолютных URL-адресов источников в картах источников.

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

# Отображение исходных файлов воркеров во вкладке Источники (Sources)

Исходные файлы воркера (веб-воркера, сервис-воркера) с относительным SourceURL теперь отображаются во вкладке Источники (Sources). Ранее исходные файлы воркеров обрабатывались неправильно.

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

# Обновление автоматической тёмной темы Chrome

UI эмуляции автоматической тёмной темы теперь упрощён. Сейчас это чекбокс, раньше это был выпадающий список.

Кроме того, если автоматическая тёмная тема активирована, выпадающий список Эмулировать медиафункцию prefers-color-scheme становится неактивным и устанавливает значение prefers-color-scheme: dark автоматически.

Chrome 96 анонсировал ранний доступ для автоматической тёмной темы на Android. С помощью этой функции браузер применяет автоматически созданную тёмную тему к сайтам со светлой темой, если пользователь выбрал тёмную тему в операционной системе.

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

# Удобные сенсорные палитра цветов и разделитель панелей

Теперь вы можете выбрать цвет или изменить размер Drawer в DevTools при помощи пальцев или стилуса на устройствах с сенсорным экраном.

Вот пример, записанный на сенсорном экране Google Pixelbook.

Задачи в трекере Chromiums: 1284245, 1284995

# Другие важные моменты

Вот несколько заслуживающих внимания исправлений в этом выпуске:

• Исправлены неполадки с редактированием cookies в панели Файлы cookie (Cookies). (1290196)

• Использование Shift + Tab для выбора предыдущей команды в Командном меню (Command menu). (1278743)

• Вывод сообщений о проблемах с предварительным запросом CORS во вкладке Проблемы (Issues). (1272445)

• Вывод сообщений о проблемах с User-Agent Client Hints во вкладке Проблемы (Issues). (1219359)

• Исправлено поведение Shift + Delete и Page up / Page down во вкладках Источники (Sources) и Консоль (Console). (1278461, 1285662)

• Закрытие диалога редактирования точки останова при удалении точки останова во вкладке Источники (Sources). (922513)

• Больше не нужна перезагрузка при переключении светлой/тёмной темы в DevTools. (1278738)

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

Рассмотрите возможность использования 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 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