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

Kayce Basques

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

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

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

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

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

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

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

Рисунок 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 .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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