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

Джеселин Йен

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

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

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

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

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

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

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

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

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

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

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

Панель API отчетов

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

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

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

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

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

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

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

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

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

Исходные файлы Worker (например, web worker, service worker) с относительным SourceURL теперь отображаются на панели Source . Ранее исходные файлы Worker обрабатывались неправильно.

ALT_TEXT_HERE

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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