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

Kayce Basques

Привет! Вот что нового в Chrome DevTools в Chrome 76.

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

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

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

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

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

Панель «Сеть» ранее имела проблему с удобством использования, когда опции, такие как меню «Дросселирование», были недоступны, когда окно DevTools было узким. Чтобы исправить эту проблему и навести порядок на панели «Сеть», несколько редко используемых опций были перемещены за новые «Параметры сети» панель.

Рисунок 2. Настройки сети.

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

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

Отправьте отзыв об этом изменении пользовательского интерфейса в Chromium issue #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 issue #496006 .

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

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

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

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

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

Панель «Память» теперь показывает общее использование памяти в режиме реального времени.

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

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

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

Номера портов регистрации сервисных работников

Панель Service Workers теперь включает в свои заголовки номера портов, чтобы было проще отслеживать, какой Service Worker вы отлаживаете.

Рисунок 6. Порты сервисных рабочих.

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

Проверка событий фоновой загрузки и фоновой синхронизации

Используйте новый раздел Background Services на панели Application для мониторинга событий Background Fetch и Background Sync . Учитывая, что события Background Fetch и Background Sync происходят в... ну... фоновом режиме, было бы не очень полезно, если бы DevTools регистрировал события Background Fetch и Background Sync только при открытом DevTools. Таким образом, как только вы начнете запись, события Background Fetch и Background Sync продолжат записываться, даже после того, как вы закроете вкладку и даже после того, как вы закроете Chrome.

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

Рисунок 7. Панель Background Fetch. Демонстрация Максима Сальникова .

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

Отправьте отзыв об этих новых функциях в Chromium issue #927726 .

Кукловод для Firefox

Puppeteer для 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.

• Отправляйте нам отзывы и запросы на новые функции на crbug.com .
• Сообщить о проблеме DevTools можно с помощью функции more_vert Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
• Твитните @ChromeDevTools .
• Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

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