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

Кейс Баскс

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

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

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

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

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

Удаленная отладка нескольких клиентов была самой популярной проблемой DevTools на crbug.com и номером 3 во всем проекте 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, добавляя более полезный UX и улучшенное автоматическое сопоставление транспилированного кода. Первоначально эта функция была запланирована к выпуску вскоре после 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 в service worker.

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

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

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

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

Что нового в DevTools

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