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

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

С возвращением! В Chrome 63 в инструментах разработчика появятся новые функции, в том числе:

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

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

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

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

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

  • Теперь клиенты протоколов, такие как ChromeDriver или расширения отладки Chrome для VS Code и Webstorm, а также клиенты WebSocket, такие как Puppeteer, могут запускаться одновременно с инструментами разработчика.
  • Теперь два отдельных клиента протокола WebSocket, таких как Puppeteer или chrome-remote-interface , могут одновременно подключаться к одной и той же вкладке.
  • Расширения Chrome, использующие API chrome.debugger , теперь могут работать одновременно с инструментами разработчика.
  • Теперь несколько различных расширений 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», чтобы узнать, как использовать панель аудита для повышения качества ваших страниц.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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