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

Kayce Basques

Здравствуйте! Ниже рассказывается о том, что нового появилось в инструментах разработчика Chrome в 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.

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

На панели "Память" теперь в реальном времени показывается общий объем использования памяти.

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

Также вы можете отслеживать использование памяти в реальном времени с помощью Performance Monitor.

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

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

На панели Сервисные Worker-процессы теперь показываются номера портов, чтобы вам было проще отслеживать, какой процесс вы отлаживаете.

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

Отзывы об этом изменении интерфейса можно оставить на странице Chromium issue #601286.

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

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

Перейдите на панель Application (Приложение), откройте вкладку Background Fetch (Фоновое извлечение) или Background Sync (Фоновая синхронизация) и нажмите Record (Запись) , чтобы начать регистрацию событий. Чтобы посмотреть подробную информацию о событии, нажмите на него.

Рис. 7. Панель "Фоновое извлечение". Демонстрация от Максима Сальникова.

Рис. 8. Панель "Фоновая синхронизация".

Отзывы об этих новых функциях можно оставить в задаче Chromium № 927726.

Puppeteer для Firefox

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

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

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

Как скачать предварительные версии каналов

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

Как связаться с командой инструментов разработчика Chrome

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

• Отправить отзыв или запрос на добавление функции можно на сайте crbug.com.
• Чтобы сообщить о проблеме с инструментами разработчика, в меню more_vert Ещё выберите Справка > Сообщить о проблеме с инструментами разработчика.
• Напишите нам в Твиттере: @ChromeDevTools.
• Оставляйте комментарии к видео What's new in DevTools (Что нового в инструментах разработчика) или DevTools Tips (Советы по работе с инструментами разработчика) на YouTube.

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

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