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

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

Добро пожаловать! Новые функции DevTools в Chrome 63:

Читайте дальше или смотрите видео ниже, чтобы узнать больше!

Поддержка удаленной отладки нескольких клиентов

Если вы когда-либо пробовали отлаживать приложение в IDE, например, VS Code или WebStorm, вы, вероятно, замечали, что открытие DevTools приводит к сбою сеанса отладки. Эта проблема также делала невозможным использование DevTools для отладки тестов WebDriver.

Начиная с Chrome 63, DevTools по умолчанию поддерживает несколько клиентов удаленной отладки, настройка не требуется.

Проблема многоклиентской удалённой отладки заняла первое место по популярности среди проблем DevTools на crbug.com и третье место среди проблем всего проекта Chromium. Поддержка многоклиентности также открывает множество интересных возможностей для интеграции других инструментов с DevTools или использования этих инструментов новыми способами. Например:

  • Клиенты протоколов, такие как ChromeDriver или расширения отладки Chrome для VS Code и Webstorm, а также клиенты WebSocket, такие как Puppeteer, теперь могут работать одновременно с DevTools.
  • Два отдельных клиента протокола WebSocket, например Puppeteer или chrome-remote-interface , теперь могут одновременно подключаться к одной и той же вкладке.
  • Расширения Chrome, использующие API chrome.debugger , теперь могут работать одновременно с DevTools.
  • Несколько различных расширений Chrome теперь могут одновременно использовать API chrome.debugger на одной вкладке.

Рабочие пространства 2.0

Рабочие пространства уже давно доступны в DevTools. Эта функция позволяет использовать DevTools в качестве IDE. Вы вносите изменения в исходный код в DevTools, и эти изменения сохраняются в локальной версии вашего проекта в файловой системе.

Workspaces 2.0 основан на версии 1.0, предлагая более удобный пользовательский интерфейс и улучшенное автоматическое сопоставление транспилированного кода. Изначально эта функция планировалась к выпуску вскоре после Chrome Developer Summit (CDS) 2016, но команда отложила его, чтобы решить некоторые проблемы.

Ознакомьтесь с разделом «Создание» (около 14:28) доклада DevTools на конференции CDS 2016, чтобы увидеть Workspaces 2.0 в действии.

Четыре новых аудита

В Chrome 63 на панели «Аудиты» появилось 4 новых аудита:

  • Подавайте изображения в формате WebP.
  • Используйте изображения с соответствующими пропорциями.
  • Избегайте использования библиотек JavaScript с известными уязвимостями безопасности.
  • Ошибки браузера регистрируются в консоли.

Чтобы узнать, как использовать панель аудита для улучшения качества ваших страниц, см. раздел Запуск Lighthouse в Chrome DevTools.

Подробнее о проекте, лежащем в основе панели аудита , можно узнать на сайте Lighthouse .

Имитация push-уведомлений с использованием пользовательских данных

Имитация push-уведомлений уже некоторое время существует в DevTools, но с одним ограничением: нельзя было отправлять пользовательские данные. Но с появлением нового текстового поля Push на панели Service Worker в Chrome 63 это стало возможным. Попробуйте прямо сейчас:

  1. Перейти к демонстрации Simple Push .
  2. Нажмите Включить push-уведомления .
  3. Нажмите «Разрешить» , когда Chrome предложит вам разрешить уведомления.
  4. Откройте DevTools.
  5. Перейдите на панель Service Workers .

  6. Напишите что-нибудь в текстовом поле Push .

    Имитация push-уведомления с пользовательскими данными.

    Рисунок 1. Имитация push-уведомления с пользовательскими данными через текстовое поле Push на панели Service Worker .

  7. Нажмите «Push» , чтобы отправить уведомление.

    Имитация push-уведомления

    Рисунок 2. Имитация push-уведомления

Запускайте события фоновой синхронизации с помощью пользовательских тегов

Запуск событий фоновой синхронизации также некоторое время находился на панели Service Workers , но теперь вы можете отправлять пользовательские теги:

  1. Откройте DevTools.
  2. Перейдите на панель Service Workers .
  3. Введите текст в текстовое поле «Синхронизация» .
  4. Нажмите «Синхронизировать» .

Запуск пользовательского события фоновой синхронизации

Рисунок 3. После нажатия кнопки «Синхронизировать» DevTools отправляет событие фоновой синхронизации с пользовательским тегом update-content в сервис-воркер.

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

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

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

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

Что нового в DevTools

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