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

Кейси Баски

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

Автозаполнение значениями CSS

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

После ввода «жирного шрифта» панель «Стили» автоматически заполняется до «font-weight: полужирный».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рабочие порты службы.

Рисунок 6. Порты Service Worker.

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

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

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

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

Панель фоновой выборки.

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

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

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

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

Кукольник для Firefox

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

После запуска 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.

Что нового в DevTools

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