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

Кейси Баск
Kayce Basques
X GitHub

Здравствуйте! Вот что нового в инструментах разработчика Chrome в версии 76.

Автозаполнение с использованием значений CSS

При добавлении объявлений стилей к узлу DOM иногда значение объявления запомнить проще, чем его имя. Например, при выделении элемента <p> жирным шрифтом, значение bold может быть проще запомнить, чем имя font-weight . Автозаполнение в панели «Стили» теперь поддерживает значения CSS. Если вы помните, какое значение ключевого слова вам нужно, но не можете вспомнить имя свойства, попробуйте ввести значение, и автозаполнение поможет вам найти нужное имя.

После ввода слова «bold» в панели «Стили» автоматически появляется значение «font-weight: bold».

Рисунок 1. После ввода слова bold в панели "Стили" автоматически дополняется значением font-weight: bold .

Отзывы об этой новой функции можно отправить в Chromium по поводу проблемы #931145 .

Новый пользовательский интерфейс для сетевых настроек.

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

Сетевые настройки

Рисунок 2. Сетевые настройки.

Следующие параметры перемещены в раздел «Сетевые настройки» : «Использовать большие строки запросов» , «Группировать по кадрам» , «Показывать обзор» , «Создавать снимки экрана» . На рисунке 3 показано соответствие старых и новых местоположений.

Сопоставление старых и новых мест расположения.

Рисунок 3. Сопоставление старых и новых местоположений.

Отзывы об этом изменении пользовательского интерфейса отправляйте в обсуждение Chromium под номером #892969 .

Сообщения WebSocket в экспорте HAR

При экспорте HAR-файла из панели «Сеть» для обмена сетевыми журналами с коллегами, ваш HAR-файл теперь включает сообщения WebSocket. Свойство _webSocketMessages начинается с подчеркивания, указывающего на то, что это пользовательское поле.

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

Отзывы об этой новой функции можно отправить в Chromium в рамках задачи #496006 .

Кнопки импорта и экспорта HAR

Благодаря новой функции «Экспорт всех сетевых журналов в формате HAR с содержимым» обмениваться журналами с коллегами стало проще. Экспорт и импортировать HAR-файл Импорт Кнопки. Импорт и экспорт HAR-файлов уже давно существуют в инструментах разработчика. Новое изменение — это более заметные кнопки.

Новые кнопки HAR.

Рисунок 4. Новые кнопки HAR.

Отзывы об этом изменении пользовательского интерфейса отправляйте в обсуждение Chromium под номером #904585 .

Общее использование памяти в реальном времени

Теперь на панели «Память» отображается общий объем используемой памяти в режиме реального времени.

Общее использование памяти в реальном времени.

Рисунок 5. В нижней части панели «Память» показано, что страница использует в общей сложности 43,4 МБ памяти. Скорость 209 КБ/с указывает на то, что общее использование памяти увеличивается на 209 КБ в секунду.

См. также Монитор производительности для отслеживания использования памяти в режиме реального времени.

Отзывы об этой новой функции можно отправить в Chromium по поводу проблемы #958177 .

номера портов регистрации работников сферы услуг

В панели «Сервисные работники» теперь в заголовках отображаются номера портов, что упрощает отслеживание того, какой именно сервисный работник вы отлаживаете.

Порты для обслуживающего персонала.

Рисунок 6. Порты для обслуживающего персонала.

Отзывы об этом изменении пользовательского интерфейса отправляйте в обсуждение Chromium под номером #601286 .

Просмотрите события фоновой выборки и фоновой синхронизации.

Используйте новый раздел «Фоновые службы» на панели приложений для отслеживания событий фоновой выборки и фоновой синхронизации . Учитывая, что события фоновой выборки и фоновой синхронизации происходят в фоновом режиме, было бы не очень полезно, если бы инструменты разработчика записывали события фоновой выборки и фоновой синхронизации только тогда, когда инструменты разработчика открыты. Поэтому, как только вы начнете запись, события фоновой выборки и фоновой синхронизации будут продолжать записываться даже после закрытия вкладки и даже после закрытия Chrome.

Перейдите в панель приложений , откройте вкладку «Фоновая загрузка» или «Фоновая синхронизация» , затем нажмите «Запись». Записывать Чтобы начать регистрацию событий, щелкните по событию, чтобы просмотреть подробную информацию о нем.

Панель «Фоновая выборка».

Рисунок 7. Панель «Фоновая выборка». Демонстрация Максима Сальникова .

Панель фоновой синхронизации.

Рисунок 8. Панель фоновой синхронизации.

Отзывы об этих новых функциях отправляйте в Chromium в рамках задачи #927726 .

Puppeteer для Firefox

Puppeteer for Firefox — это новый экспериментальный проект, позволяющий автоматизировать работу Firefox с помощью API Puppeteer. Другими словами, теперь вы можете автоматизировать работу Firefox и Chromium с помощью одного и того же API Node, как показано в видео ниже.

После запуска node example.js открывается Firefox, и текст с этой page вставляется в поле поиска на сайте документации Puppeteer. Затем та же задача повторяется в Chromium.

Посмотрите доклад Джоэла и Андрея о Puppeteer на Google I/O 2019, чтобы узнать больше о Puppeteer и Puppeteer для Firefox. Анонс Firefox состоится примерно в 4:05.

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

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

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

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

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

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