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

Джеселин Йен

Регулирование запросов WebSocket

Панель «Сеть» теперь поддерживает регулирование запросов веб-сокетов. Ранее регулирование сети не работало для запросов веб-сокетов.

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

Регулирование запросов WebSocket

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

Новая панель API отчетов на панели приложений

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

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

Откройте страницу, использующую API отчётов (например, демонстрационную страницу ). На панели «Приложение» прокрутите вниз до раздела «Фоновые службы» и выберите панель API отчётов .

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

Раздел «Конечные точки» содержит обзор всех конечных точек, настроенных в заголовке Reporting-Endpoints .

Панель API отчетности

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

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

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

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

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

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

Правильно оформляйте сообщения журнала с помощью escape-кода ANSI

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

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

Благодаря этим изменениям вы теперь можете легко отлаживать приложения Node.js с помощью DevTools, с корректной цветной консольной выдачей сообщений. Откройте эту демонстрацию , чтобы увидеть её самостоятельно!

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

стилизация консоли

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

Корректная поддержка спецификаторов формата %s , %d , %i и %f

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

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

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

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

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

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

фильтр группы консоли

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

Улучшения исходных карт

Отладка расширения Chrome с помощью файлов исходных карт

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

Отладка расширения Chrome с помощью файлов исходных карт

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

Улучшенное дерево папок с исходными файлами на панели «Источники»

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

Улучшенное дерево папок с исходными файлами на панели «Источники»

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

Отображение исходных файлов рабочих процессов на панели «Источники»

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

ALT_TEXT_HERE

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

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

Интерфейс эмуляции автоматической тёмной темы теперь упрощён. Теперь это флажок, а не раскрывающийся список.

Кроме того, когда включена автоматическая темная тема , раскрывающийся список «Эмулировать предпочитаемую цветовую схему» будет отключен и автоматически установлен на «предпочитаемую цветовую схему: темная» .

В Chrome 96 появилась пробная версия Origin для Auto Dark Theme на Android. Эта функция позволяет браузеру автоматически применять тёмную тему к сайтам со светлой тематикой, если пользователь включил тёмные темы в операционной системе.

Автоматическая эмуляция темной темы

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

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

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

Вот пример, снятый с помощью сенсорного экрана устройства Google Pixelbook .

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

Разные моменты

Вот некоторые важные исправления в этом выпуске:

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

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

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

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

Что нового в DevTools

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