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

Jecelyn Yeen

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

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

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

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

Новая панель Reporting API на панели приложения.

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

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

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

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

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

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

Поддержка ожидания, пока элемент не станет видимым/доступным для щелчка на панели «Рекордер».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Улучшено дерево папок исходного кода на панели «Источники».

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

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

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

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

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

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

Пользовательский интерфейс эмуляции Auto Dark Theme теперь упрощен. Сейчас это флажок, раньше это был раскрывающийся список.

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

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

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

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

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

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

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

Разное

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

• Исправлена ​​проблема с редактированием файлов cookie на панели «Файлы cookie» . ( 1290196 )
• Используйте Shift + Tab , чтобы выбрать предыдущую команду в меню «Команды» . ( 1278743 )
• Сообщайте о проблемах с предварительным запросом CORS на вкладке «Проблемы» . ( 1272445 ).
• Сообщайте о проблемах с подсказками клиента User-Agent на вкладке «Проблемы» . ( 1219359 ).
• Исправлено поведение Shift + Delete и Page up / Page down на панели «Источники» и «Консоль» . ( 1278461 , 1285662 )
• Закройте диалоговое окно редактирования точки останова при удалении точки останова на панели «Источники» . (922513)
• При переключении светлой/темной темы в DevTools перезагрузка не требуется. ( 1278738 )

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

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

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

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

• Отправьте нам предложение или отзыв через crbug.com .
• Сообщите о проблеме DevTools, используя дополнительные параметры. > Справка > Сообщить о проблемах DevTools в DevTools.
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к нашим видеороликам «Что нового в DevTools на YouTube» или «Советы по DevTools» на YouTube .

Что нового в DevTools

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