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

Ограничение количества запросов WebSocket

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

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

Ограничение количества запросов WebSocket

Номер выпуска Chromium: 423246

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

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

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

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

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

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

Панель API для создания отчетов

Проблема Chromium: 1205856

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

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

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

Номер выпуска Chromium: 1257499

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

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

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

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

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

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

оформление консоли

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

Обеспечивает корректную поддержку спецификаторов формата %s , %d , %i и %f

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

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

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

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

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

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

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

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

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

Расширение для отладки Chrome с файлами карты исходного кода

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

Расширение для отладки Chrome с файлами карты исходного кода

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

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

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

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

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

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

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

ALT_TEXT_HERE

Номер выпуска Chromium: 1277002

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

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

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

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

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

Номер выпуска Chromium: 1243309

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

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

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

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

Различные важные моменты

В этом релизе внесены следующие существенные исправления:

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

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

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

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

Что нового в инструментах разработчика

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