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

Кейси Баски

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

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

Поддержка многоклиентской удаленной отладки

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

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

Многоклиентская удаленная отладка была самой популярной проблемой DevTools номер 1 на 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, добавив более полезный пользовательский интерфейс и улучшенное автоматическое сопоставление передаваемого кода. Первоначально планировалось, что эта функция будет выпущена вскоре после 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. Откройте Инструменты разработчика.
  5. Перейдите на панель Service Workers .

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

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

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

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

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

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

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

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

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

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

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

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

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

Связь с командой Chrome DevTools

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

Что нового в DevTools

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